Can modify color and font styling in each Pie at Pie-Chart

App.js

@@ -142,6 +142,8 @@ export default class App extends React.Component {
                 chartConfig={chartConfig}
                 accessor="population"
                 style={graphStyle}
+                bgColor="transparent"
+                paddingLeft="15"
               />
               <Text style={labelStyle}>Line Chart</Text>
               <LineChart

README.md

@@ -188,13 +188,16 @@ const data = {
 
 ![Pie Chart](https://i.imgur.com/JMz3obk.jpg)
 
+### Modified Pie Chart Screenshot
+![Pie Chart_modified](/src/piechart_modified.png)
+
 ```js
 const data = [
-  { name: 'Toronto', population: 2800000  },
-  { name: 'Dublin', population: 527612 },
-  { name: 'New York', population: 8538000 },
-  { name: 'Beijing', population: 21500000 },
-  { name: 'Moscow', population: 11920000 }
+  { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F, legendFontSize: 15' }
 ]
 ```
 ```html
@@ -204,6 +207,8 @@ const data = [
   height={220}
   chartConfig={chartConfig}
   accessor="population"
+  bgColor="transparent"
+  paddingLeft="15"
 />
 ```
 
@@ -214,6 +219,8 @@ const data = [
 | height | Number | Height of the chart |
 | chartConfig | Object | Configuration object for the chart, see example config in the beginning of this file |
 | accessor | string | Property in the `data` object from which the number values are taken |
+| bgColor | string | background color - if you want to set transparent, input `transparent` or `none`. |
+| paddingLeft | string | left padding of the pie chart |
 
 ## Contribution graph (heatmap)
 

data.js

@@ -51,11 +51,11 @@ const contributionData = [
 // Mock data object for Pie Chart
 
 const pieChartData = [
-  { name: 'Italy', population: Math.random() * 10000 },
-  { name: 'Mexico', population: Math.random() * 10000 },
-  { name: 'France', population: Math.random() * 10000 },
-  { name: 'Argentina', population: Math.random() * 10000 },
-  { name: 'Japan', population: Math.random() * 10000 }
+  { name: 'Seoul', population: 21500000, color: 'rgba(131, 167, 234, 1)', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Toronto', population: 2800000, color: '#F00', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Beijing', population: 527612, color: 'red', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'New York', population: 8538000, color: '#ffffff', legendFontColor: '#7F7F7F', legendFontSize: 15 },
+  { name: 'Moscow', population: 11920000, color: 'rgb(0, 0, 255)', legendFontColor: '#7F7F7F', legendFontSize: 15 }
 ]
 
 // Mock data object for Progress

src/pie-chart.js

@@ -13,7 +13,7 @@ const Pie = require('paths-js/pie')
 
 class PieChart extends AbstractChart {
   render() {
-    const { style = {} } = this.props
+    const { style = {}, backgroundColor } = this.props
     const { borderRadius = 0 } = style
     const chart = Pie({
       center: this.props.center || [0, 0],
@@ -32,20 +32,20 @@ class PieChart extends AbstractChart {
         <G key={Math.random()}>
           <Path
             d={c.sector.path.print()}
-            fill={this.props.chartConfig.color(0.2 * (i + 1))}
+            fill={c.item.color}
           />
           <Rect
             width="16"
             height="16"
-            fill={this.props.chartConfig.color(0.2 * (i + 1))}
+            fill={c.item.color}
             rx={8}
             ry={8}
             x={(this.props.width / 2.5) - 24}
             y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12}
           />
           <Text
-            fill={this.props.chartConfig.color(0.5)}
-            fontSize="11"
+            fill={c.item.legendFontColor}
+            fontSize={c.item.legendFontSize}
             x={this.props.width / 2.5}
             y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12*2}
           >{Math.round(100 / total * c.item[this.props.accessor])}% { c.item.name }
@@ -71,9 +71,9 @@ class PieChart extends AbstractChart {
             height: this.props.height,
             ...this.props.chartConfig
           })}
-          <Rect width="100%" height={this.props.height} rx={borderRadius} ry={borderRadius} fill="url(#backgroundGradient)"/>
+          <Rect width="100%" height={this.props.height} rx={borderRadius} ry={borderRadius} fill={backgroundColor}/>
           <G
-            x={this.props.width / 2.5}
+            x={((this.props.width / 2) / 2) + Number((this.props.paddingLeft)?this.props.paddingLeft:0)}
             y={this.props.height / 2}
           >
             {slices}