Exploding Pie/Donut Chart Series On Click

Environment

Product	Version
Chart for React	Current

Description

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

Solution

To achieve click-to-expand functionality in a Vue pie chart you must:

1. Handle the seriesClick event:

html

<Chart @seriesclick="onSeriesClick">
</Chart>

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

JavaScript

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

  this.pieData.value = newData;
}

Runnable example

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Vue Charts Documentation
• Chart SeriesItem Component
• Handling Events in Kendo UI for Vue Charts