PieChart

Props

{
  value: number;
  title?: string;
}[]

number

number

{ fill: string; }[]

number

number

Examples

Different themes

You can import some themes from the library or create a new one.

Available themes:

• bluePieChartTheme
• greenPieChartTheme
• rainbowPieChartTheme

1import {
2  PieChart,
3  bluePieChartTheme,
4  greenPieChartTheme,
5  rainbowPieChartTheme
6} from '@cergmin/components';
7
8const largestCompanies2021 = [
9  { title: 'Apple', value: 274 },
10  { title: 'Samsung', value: 200 },
11  { title: 'Google', value: 182 },
12  { title: 'Foxconn', value: 181 },
13  { title: 'Microsoft', value: 143 },
14  { title: 'Huawei', value: 129 },
15  { title: 'Facebook', value: 85 },
16];
17
18<PieChart
19  theme={bluePieChartTheme}
20  data={largestCompanies2021}
21/>
22<PieChart
23  theme={greenPieChartTheme}
24  data={largestCompanies2021}
25/>
26<PieChart
27  theme={rainbowPieChartTheme}
28  data={largestCompanies2021}
29/>

Custom theme

Theme is an array of objects. Each object describes the appearance of one segment of a pie chart, so you can create you own theme.

An object that describes the appearance of a segment should have these properties:

• fill — background of a segment

1import { PieChart } from '@cergmin/components';
2
3const customTheme = [
4  { fill: '#002533' },
5  { fill: 'rgb(0, 95, 115)' },
6  { fill: 'hsl(181deg, 86%, 32%)' },
7  { fill: 'orange' },
8  { fill: `#bb3e03` },
9  { fill: `#ae2012` },
10  { fill: `#9b2226` },
11];
12
13const largestCompanies2021 = [
14  { title: 'Apple', value: 274 },
15  { title: 'Samsung', value: 200 },
16  { title: 'Google', value: 182 },
17  { title: 'Foxconn', value: 181 },
18  { title: 'Microsoft', value: 143 },
19  { title: 'Huawei', value: 129 },
20  { title: 'Facebook', value: 85 },
21];
22
23<PieChart theme={customTheme} data={largestCompanies2021} />;