Exploding Pie/Donut Chart Series On Click

Environment

Product Version	9.0.0
Product	Progress® KendoReact Chart

Description

How can I make the Pie or Donut Chart series explode when clicking them?

Solution

To achieve click-to-expand functionality in a React pie chart you should:

1. Handle the seriesClick event:

html

<Chart onSeriesClick="{onSeriesClick}"> </Chart>

2. Within the event handler function, toggle the explodeField property and update the Chart data by reference to re-render the Chart.

jsx

const onSeriesClick = (event) => {
    const newData = data.map((item) => {
        item.exploded = item === event.dataItem ? !item.exploded : false;
        return item;
    });

    setData(newData);
};

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• React Charts Documentation
• Chart SeriesItem Component
• Handling Events in React Charts