Added props shiftTextX and shiftTextY

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

View File

@ -27,6 +27,8 @@
| value | number | Value of the item, representing a section of the Pie chart |
| shiftX | number | Translates (shifts) the particular section horizontally 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 |
| text | string | Label text for the sections |
| textColor | ColorValue | Color of the text (label) inside the section |

View File

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