Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { 
+    Pie, 
+    ResponsiveContainer,
+    Cell,
+    PieChart,
+    PieValueLabel
+} from './../../../../components/recharts';
+
+import colors from './../../../../colors';
+
+const data = [
+    {name: 'Group A', value: 400},
+    {name: 'Group B', value: 300},
+    {name: 'Group C', value: 300},
+    {name: 'Group D', value: 200}
+];
+const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']];
+
+export const PieChartWithCustomizedLabel = () => (
+    <ResponsiveContainer width='100%' aspect={6.0/3.0}>
+        <PieChart>
+            <Pie
+                data={data}
+                dataKey="value"
+                stroke={ colors['white'] }
+                labelLine={false}
+                label={<PieValueLabel />}
+                outerRadius={80} 
+                fill="#8884d8"
+            >
+                {
+                    data.map((entry, index) => <Cell key={ index } fill={COLORS[index % COLORS.length]}/>)
+                }
+            </Pie>
+        </PieChart>
+    </ResponsiveContainer>
+);