39 lines
1.0 KiB
JavaScript
Executable File
39 lines
1.0 KiB
JavaScript
Executable File
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>
|
|
);
|