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={[1210000, 320000]} />

<PieChart id="demo-flat-data-component" tooltipTitle="Tooltip Title" data={[1210000, 320000]} />

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]} 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]}
    tooltipFormatter={customTooltipFormatter}
  />,
);

Custom Value Formatter

Result

Loading...

Live Editor

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

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