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', }, ]} />

<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]} />

<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} />, );

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}`} />

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

Props