Skip to main content

PieChart

Series Data​

Result
Loading...
Live Editor
<PieChart
	id="demo-series-data-component"
	tooltipTitle="Tooltip Title"
	data={[
		{
			id: '1',
			name: 'Taxable investment',
			y: 1210000,
			description: 'Taxable investment, 1.21 million dollars',
		},
		{
			id: '2',
			name: 'Other Taxable investment',
			y: 320000,
			description: 'Taxable investment, 320 thousand dollars',
		},
	]}
/>

Flat Data​

Result
Loading...
Live Editor
<PieChart
	id="demo-flat-data-component"
	tooltipTitle="Tooltip Title"
	data={[18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]}
/>

Custom Tooltip Formatter​

Result
Loading...
Live Editor
const customTooltipFormatter = (chartData) => {
	const { key, y } = chartData;
	return `<div><strong>${key} - </strong> <em>Y: ${y}</em></div>`;
};

render(
	<PieChart
		id="demo-tooltip-formatter-component"
		data={[1210000, 320000, 675000]}
		tooltipFormatter={customTooltipFormatter}
	/>,
);

Custom Value Formatter​

Result
Loading...
Live Editor
<PieChart
	id="demo-value-formatter-component"
	tooltipTitle="Tooltip Title"
	data={[1210000, 320000, 675000, 980000]}
	valueFormatter={(value) => `€${value}`}
/>

Props​