Added background for Pie chart labels

App.js

@@ -18,13 +18,29 @@ const App = () => {
   //   {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 (
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
-      <BarChart data={data} />
+      <BarChart
+        showGradient
+        gradientColor="gray"
+        frontColor="white"
+        data={data}
+      />
       <LineChart data={data} />
-      <PieChart data={data} />
+      <PieChart
+        showText
+        showTextBackground
+        showValuesAsLabels
+        textSize={14}
+        data={data}
+      />
       {/* <LineChart data={data} curved /> */}
       {/* <BarChart
         data={data}

docs/PieChart/PieChartProps.md

@@ -1,7 +1,7 @@
 # Pie Chart props
 
 | Prop                 | Type           | Description                                                                      | Default value |
-| --------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
+| -------------------- | -------------- | -------------------------------------------------------------------------------- | ------------- |
 | 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           |
 | 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   |
 | strokeWidth          | number         | Stroke (line) width for the Pie chart and its section                            | 0             |
 | 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         |
+| 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
 
 | Prop                 | Type       | Description                                                            |
-| --------- | ---------- | ---------------------------------------------------------------------- |
+| -------------------- | ---------- | ---------------------------------------------------------------------- |
 | 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   |
 | 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                           |
+| 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "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.",
   "main": "src/index.tsx",
   "files": [

src/BarChart/index.tsx

@@ -318,7 +318,7 @@ export const BarChart = (props: PropTypes) => {
           {
             marginLeft: initialSpacing + 6,
             position: 'absolute',
-            bottom: stepHeight * -0.5 - 60,
+            bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },
           horizontal && {width: totalWidth},
         ]}

src/PieChart/index.tsx

@@ -19,20 +19,30 @@ type propTypes = {
   shadowWidth?: number;
   strokeWidth?: number;
   strokeColor?: string;
-  textColor?: string;
-  textSize?: number;
   backgroundColor?: string;
   data: Array<itemType>;
+
+  showText?: Boolean;
+  textColor?: string;
+  textSize?: number;
+  showTextBackground?: Boolean;
+  textBackgroundColor?: string;
+  textBackgroundRadius?: number;
+  showValuesAsLabels?: Boolean;
 };
 type itemType = {
   value: number;
   shiftX?: number;
   shiftY?: number;
   color?: string;
+  text?: string;
   textColor?: string;
+  textSize?: number;
+  textBackgroundColor?: string;
+  textBackgroundRadius?: number;
 };
 export const PieChart = (props: propTypes) => {
-  const {data, isThreeD, textColor} = props;
+  const {data, isThreeD} = props;
   const radius = props.radius || 120;
   const shadowWidth = props.shadowWidth || (4 * radius) / 3;
   const backgroundColor = props.backgroundColor || 'white';
@@ -50,7 +60,14 @@ export const PieChart = (props: propTypes) => {
   const strokeWidth = props.strokeWidth || 0;
   const strokeColor =
     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;
   data.forEach((item: any) => {
     total += item.value;
@@ -80,7 +97,6 @@ export const PieChart = (props: propTypes) => {
     }
     canvas.width = canvasWidth;
     const ctx = canvas.getContext('2d');
-    ctx.font = textSize + 'px Comic Sans MS';
     ctx.lineWidth = strokeWidth;
     ctx.strokeStyle = strokeColor;
     const initialValue = 30;
@@ -177,9 +193,22 @@ export const PieChart = (props: propTypes) => {
       ctx.fillStyle = dataItem.color || colors[i++ % 8];
       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;
         yy = Math.sin(semiSum) * radius + (radius + initialValue + shiftX);
         xx = Math.cos(semiSum) * radius + (radius + initialValue + shiftY);
+
         // console.log('semisum==>>', semiSum);
         // console.log('sin(semisum)==>>', Math.sin(semiSum));
         if (semiSum > 0 && semiSum <= pi / 2) {
@@ -196,15 +225,36 @@ export const PieChart = (props: propTypes) => {
           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.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;
     });