New to Kendo UI for Angular? Start a free 30-day trial

Exploding Pie/Donut Chart Series On Click

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

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

Solution

Handle the seriesClick event.

html

<kendo-chart (seriesClick)="onClick($event)">
</kendo-chart>

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

typescript

public onClick(event: SeriesClickEvent) {
    event.dataItem.explodeField = !event.dataItem.explodeField;
    this.pieData = this.pieData.slice();
}

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

Change Theme

Theme

Loading ...

If the requirement is to have only one exploded segment at a time, you will need to change the explodeField property value of any previously exploded items to false when exploding a new one.