status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-23 09:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added props shiftTextX and shiftTextY

Browse Source
This commit is contained in:
Abhinandan Kushwaha 2021-10-19 18:39:15 +05:30
parent 5ffb196a31
commit 3a0fb89baa
2 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/PieChart/PieChartProps.md
View File

@ -27,6 +27,8 @@
| 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 |
| shiftTextX | number | Translates (shifts) the position of label text horizontally |
| shiftTextY | number | Translates (shifts) the position of label text vertically |
| color | ColorValue | Color (background color) of the section | | color | ColorValue | Color (background color) of the section |
| text | string | Label text for the sections | | 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 |

8
src/PieChart/index.tsx
View File

@ -42,6 +42,8 @@ type itemType = {
textSize?: number; textSize?: number;
textBackgroundColor?: string; textBackgroundColor?: string;
textBackgroundRadius?: number; textBackgroundRadius?: number;
shiftTextX?: number;
shiftTextY?: number;
}; };
export const PieChart = (props: propTypes) => { export const PieChart = (props: propTypes) => {
const {data, isThreeD} = props; const {data, isThreeD} = props;
@ -144,6 +146,9 @@ export const PieChart = (props: propTypes) => {
const shiftX = dataItem.shiftX || 0; const shiftX = dataItem.shiftX || 0;
const shiftY = dataItem.shiftY || 0; const shiftY = dataItem.shiftY || 0;
const shiftTextX = dataItem.shiftTextX || 0;
const shiftTextY = dataItem.shiftTextY || 0;
/**************** This section is to prevent the shadow from ***************/ /**************** This section is to prevent the shadow from ***************/
/**************** being visible inside the chart content if ***************/ /**************** being visible inside the chart content if ***************/
/**************** the color of sections is transparent ***************/ /**************** the color of sections is transparent ***************/
@ -260,6 +265,9 @@ export const PieChart = (props: propTypes) => {
ctx.fill(); ctx.fill();
} }
xx += shiftTextX;
yy += shiftTextY;
ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8]; ctx.fillStyle = dataItem.textColor || textColor || colors[i++ % 8];
let labelText = dataItem.text || ''; let labelText = dataItem.text || '';
if (showValuesAsLabels && !labelText) { if (showValuesAsLabels && !labelText) {