Added background for Pie chart labels
This commit is contained in:
parent
ab8d6dc7e0
commit
da43ff8d94
22
App.js
22
App.js
|
@ -18,13 +18,29 @@ const App = () => {
|
||||||
// {value: 100, text: 'May'},
|
// {value: 100, text: 'May'},
|
||||||
// ];
|
// ];
|
||||||
|
|
||||||
const data = [{value: 50}, {value: 80}, {value: 90}, {value: 70}];
|
const data = [
|
||||||
|
{value: 150},
|
||||||
|
{value: 80, text: 80},
|
||||||
|
{value: 90, text: 90, textColor: 'green', textBackgroundColor: 'pink'},
|
||||||
|
{value: 70},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
||||||
<BarChart data={data} />
|
<BarChart
|
||||||
|
showGradient
|
||||||
|
gradientColor="gray"
|
||||||
|
frontColor="white"
|
||||||
|
data={data}
|
||||||
|
/>
|
||||||
<LineChart data={data} />
|
<LineChart data={data} />
|
||||||
<PieChart data={data} />
|
<PieChart
|
||||||
|
showText
|
||||||
|
showTextBackground
|
||||||
|
showValuesAsLabels
|
||||||
|
textSize={14}
|
||||||
|
data={data}
|
||||||
|
/>
|
||||||
{/* <LineChart data={data} curved /> */}
|
{/* <LineChart data={data} curved /> */}
|
||||||
{/* <BarChart
|
{/* <BarChart
|
||||||
data={data}
|
data={data}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
# Pie Chart props
|
# Pie Chart props
|
||||||
|
|
||||||
| Prop | Type | Description | Default value |
|
| Prop | Type | Description | Default value |
|
||||||
| --------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
|
| -------------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
|
||||||
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
|
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
|
||||||
| radius | number | Radius of the Pie chart | 120 |
|
| radius | number | Radius of the Pie chart | 120 |
|
||||||
| isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false |
|
| isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false |
|
||||||
|
@ -10,19 +10,28 @@
|
||||||
| shadowWidth | number | Width of the shadow | radius\*4/3 |
|
| shadowWidth | number | Width of the shadow | radius\*4/3 |
|
||||||
| strokeWidth | number | Stroke (line) width for the Pie chart and its section | 0 |
|
| strokeWidth | number | Stroke (line) width for the Pie chart and its section | 0 |
|
||||||
| strokeColor | ColorValue | Stroke (line) color | gray |
|
| strokeColor | ColorValue | Stroke (line) color | gray |
|
||||||
| textColor | ColorValue | Color of the label texts | random colors |
|
|
||||||
| textSize | number | Size of the label texts (max allowed: radius / 5) | 24 |
|
|
||||||
| backgroundColor | ColorValue | Background color of the container that contains the Pie chart | white |
|
| backgroundColor | ColorValue | Background color of the container that contains the Pie chart | white |
|
||||||
|
| showText | Boolean | When set to true, displays text on the Pie sections | false |
|
||||||
|
| textColor | ColorValue | Color of the label texts | random colors |
|
||||||
|
| textSize | number | Size of the label texts (max allowed: radius / 5) | 16 |
|
||||||
|
| showTextBackground | Boolean | When set to true, displays background for text on the Pie sections | false |
|
||||||
|
| textBackgroundColor | ColorValue | Background color for the label texts | white |
|
||||||
|
| textBackgroundRadius | number | Radius for the background of the text labels | textSize |
|
||||||
|
| showValuesAsLabels | Boolean | When set to true, the values of the Pie sections are displayed as labels | false |
|
||||||
|
|
||||||
### Item description
|
### Item description
|
||||||
|
|
||||||
| Prop | Type | Description |
|
| Prop | Type | Description |
|
||||||
| --------- | ---------- | ---------------------------------------------------------------------- |
|
| -------------------- | ---------- | ---------------------------------------------------------------------- |
|
||||||
| value | number | Value of the item, representing a section of the Pie chart |
|
| value | number | Value of the item, representing a section of the Pie chart |
|
||||||
| shiftX | number | Translates (shifts) the particular section horizontally by given value |
|
| shiftX | number | Translates (shifts) the particular section horizontally by given value |
|
||||||
| shiftY | number | Translates (shifts) the particular section vertically by given value |
|
| shiftY | number | Translates (shifts) the particular section vertically by given value |
|
||||||
| color | ColorValue | Color (background color) of the section |
|
| color | ColorValue | Color (background color) of the section |
|
||||||
|
| text | string | Label text for the sections |
|
||||||
| textColor | ColorValue | Color of the text (label) inside the section |
|
| textColor | ColorValue | Color of the text (label) inside the section |
|
||||||
|
| textSize | number | Size of the text (label) inside the section |
|
||||||
|
| textBackgroundColor | ColorValue | Background color for the label text |
|
||||||
|
| textBackgroundRadius | number | Radius for the background of the text label |
|
||||||
|
|
||||||
### Donut chart related props
|
### Donut chart related props
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "react-native-gifted-charts",
|
"name": "react-native-gifted-charts",
|
||||||
"version": "0.0.4",
|
"version": "0.0.5",
|
||||||
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
||||||
"main": "src/index.tsx",
|
"main": "src/index.tsx",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
|
@ -318,7 +318,7 @@ export const BarChart = (props: PropTypes) => {
|
||||||
{
|
{
|
||||||
marginLeft: initialSpacing + 6,
|
marginLeft: initialSpacing + 6,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: stepHeight * -0.5 - 60,
|
bottom: stepHeight * -0.5 - 60 + xAxisThickness,
|
||||||
},
|
},
|
||||||
horizontal && {width: totalWidth},
|
horizontal && {width: totalWidth},
|
||||||
]}
|
]}
|
||||||
|
|
|
@ -19,20 +19,30 @@ type propTypes = {
|
||||||
shadowWidth?: number;
|
shadowWidth?: number;
|
||||||
strokeWidth?: number;
|
strokeWidth?: number;
|
||||||
strokeColor?: string;
|
strokeColor?: string;
|
||||||
textColor?: string;
|
|
||||||
textSize?: number;
|
|
||||||
backgroundColor?: string;
|
backgroundColor?: string;
|
||||||
data: Array<itemType>;
|
data: Array<itemType>;
|
||||||
|
|
||||||
|
showText?: Boolean;
|
||||||
|
textColor?: string;
|
||||||
|
textSize?: number;
|
||||||
|
showTextBackground?: Boolean;
|
||||||
|
textBackgroundColor?: string;
|
||||||
|
textBackgroundRadius?: number;
|
||||||
|
showValuesAsLabels?: Boolean;
|
||||||
};
|
};
|
||||||
type itemType = {
|
type itemType = {
|
||||||
value: number;
|
value: number;
|
||||||
shiftX?: number;
|
shiftX?: number;
|
||||||
shiftY?: number;
|
shiftY?: number;
|
||||||
color?: string;
|
color?: string;
|
||||||
|
text?: string;
|
||||||
textColor?: string;
|
textColor?: string;
|
||||||
|
textSize?: number;
|
||||||
|
textBackgroundColor?: string;
|
||||||
|
textBackgroundRadius?: number;
|
||||||
};
|
};
|
||||||
export const PieChart = (props: propTypes) => {
|
export const PieChart = (props: propTypes) => {
|
||||||
const {data, isThreeD, textColor} = props;
|
const {data, isThreeD} = props;
|
||||||
const radius = props.radius || 120;
|
const radius = props.radius || 120;
|
||||||
const shadowWidth = props.shadowWidth || (4 * radius) / 3;
|
const shadowWidth = props.shadowWidth || (4 * radius) / 3;
|
||||||
const backgroundColor = props.backgroundColor || 'white';
|
const backgroundColor = props.backgroundColor || 'white';
|
||||||
|
@ -50,7 +60,14 @@ export const PieChart = (props: propTypes) => {
|
||||||
const strokeWidth = props.strokeWidth || 0;
|
const strokeWidth = props.strokeWidth || 0;
|
||||||
const strokeColor =
|
const strokeColor =
|
||||||
props.strokeColor || (strokeWidth ? 'gray' : 'transparent');
|
props.strokeColor || (strokeWidth ? 'gray' : 'transparent');
|
||||||
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 24;
|
|
||||||
|
const showText = props.showText || false;
|
||||||
|
const textColor = props.textColor || '';
|
||||||
|
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 16;
|
||||||
|
|
||||||
|
const showTextBackground = props.showTextBackground || false;
|
||||||
|
const showValuesAsLabels = props.showValuesAsLabels || false;
|
||||||
|
|
||||||
let isDataShifted = false;
|
let isDataShifted = false;
|
||||||
data.forEach((item: any) => {
|
data.forEach((item: any) => {
|
||||||
total += item.value;
|
total += item.value;
|
||||||
|
@ -80,7 +97,6 @@ export const PieChart = (props: propTypes) => {
|
||||||
}
|
}
|
||||||
canvas.width = canvasWidth;
|
canvas.width = canvasWidth;
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
ctx.font = textSize + 'px Comic Sans MS';
|
|
||||||
ctx.lineWidth = strokeWidth;
|
ctx.lineWidth = strokeWidth;
|
||||||
ctx.strokeStyle = strokeColor;
|
ctx.strokeStyle = strokeColor;
|
||||||
const initialValue = 30;
|
const initialValue = 30;
|
||||||
|
@ -177,9 +193,22 @@ export const PieChart = (props: propTypes) => {
|
||||||
ctx.fillStyle = dataItem.color || colors[i++ % 8];
|
ctx.fillStyle = dataItem.color || colors[i++ % 8];
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
|
/************************* Displaying Text Labels **********************/
|
||||||
|
|
||||||
|
if (showText) {
|
||||||
|
let fontSize;
|
||||||
|
if (props.textSize) {
|
||||||
|
fontSize = Math.min(props.textSize, radius / 5);
|
||||||
|
} else if (dataItem.textSize) {
|
||||||
|
fontSize = Math.min(dataItem.textSize, radius / 5);
|
||||||
|
} else {
|
||||||
|
fontSize = 16;
|
||||||
|
}
|
||||||
|
ctx.font = fontSize + 'px Comic Sans MS';
|
||||||
semiSum = angleSum + (pi * dataItem.value) / total;
|
semiSum = angleSum + (pi * dataItem.value) / total;
|
||||||
yy = Math.sin(semiSum) * radius + (radius + initialValue + shiftX);
|
yy = Math.sin(semiSum) * radius + (radius + initialValue + shiftX);
|
||||||
xx = Math.cos(semiSum) * radius + (radius + initialValue + shiftY);
|
xx = Math.cos(semiSum) * radius + (radius + initialValue + shiftY);
|
||||||
|
|
||||||
// console.log('semisum==>>', semiSum);
|
// console.log('semisum==>>', semiSum);
|
||||||
// console.log('sin(semisum)==>>', Math.sin(semiSum));
|
// console.log('sin(semisum)==>>', Math.sin(semiSum));
|
||||||
if (semiSum > 0 && semiSum <= pi / 2) {
|
if (semiSum > 0 && semiSum <= pi / 2) {
|
||||||
|
@ -196,15 +225,36 @@ export const PieChart = (props: propTypes) => {
|
||||||
yy += 24;
|
yy += 24;
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log('xx-->', xx)
|
if (showTextBackground && (dataItem.text || showValuesAsLabels)) {
|
||||||
// console.log('yy-->', yy)
|
let textBackgroundX = xx + textSize / 2;
|
||||||
|
let textBackgroundY = yy - textSize / 2 + 1;
|
||||||
// ctx.moveTo(xx, yy)
|
ctx.beginPath();
|
||||||
|
ctx.arc(
|
||||||
// ctx.arc(xx, yy, 10, 0, 2 * pi)
|
textBackgroundX,
|
||||||
|
textBackgroundY,
|
||||||
|
props.textBackgroundRadius ||
|
||||||
|
dataItem.textBackgroundRadius ||
|
||||||
|
textSize,
|
||||||
|
0,
|
||||||
|
2 * pi,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
ctx.fillStyle =
|
||||||
|
props.textBackgroundColor ||
|
||||||
|
dataItem.textBackgroundColor ||
|
||||||
|
'white';
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8];
|
ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8];
|
||||||
ctx.fillText(dataItem.value.toString(), xx, yy);
|
let labelText = dataItem.text || '';
|
||||||
|
if (showValuesAsLabels && !labelText) {
|
||||||
|
labelText = dataItem.value.toString();
|
||||||
|
}
|
||||||
|
ctx.fillText(labelText, xx, yy);
|
||||||
|
}
|
||||||
|
|
||||||
|
/****************************************************************************************/
|
||||||
|
|
||||||
angleSum += (2 * pi * dataItem.value) / total;
|
angleSum += (2 * pi * dataItem.value) / total;
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue