Explode Pie or Donut Series on Click or Mouseover

This project illustrates how to toggle the explode state of a Pie/Donut series item when it is clicked or hovered. The RadHtmlChart control exposes the dataItem object in the arguments of the OnClientSeriesClicked/OnClientSeriesHovered event, so that you can utilize it in order to access and toggle the explode state of the target item. There are, however, specifics in both events that are described below.

How to Toggle the Pie/Donut Series Item Explode on Click

For a non-data bound chart you can do the following steps:

1. Directly modify the explode property in the dataItem object of the clicked item.
2. Disable the chart’s animation.
3. Repaint the chart in order for the new change the take effect.

For a data bound chart you can simply replace the explode property in the dataItem object with the name of the data source field that is responsible for the explode state of the Pie/Donut series items.

How to Toggle the Pie/Donut Series Item Explode on Mouseover and Toggle it Back on MouseLeave

This scenario illustrates how to toggle the explode state of a Pie/Donut series item when it is hovered and then toggle its explode state back when the mouse leaves the chart.

In order to toggle the explode state of Pie/Donut series item on hover you must do the following steps:

1. Directly modify the explode property in the dataItem object of the clicked item.
2. Detach the OnClientSeriesHovered event before repainting the chart, in order to avoid recursive triggering of this event.
3. Disable the chart’s animation.
4. Repaint the chart in order for the new change the take effect.
5. Attach back the OnClientSeriesHovered after some time out.

As you can see there are two additional steps here that are needed to prevent the OnClientSeriesHovered event from recursive triggering (i.e., the attachment and detachment of the event itself).

In order to toggle back the exploded state of Pie/Donut series item when the mouse leaves the chart you must attach to the mouse leave event of the chart’s wrapper and execute once again the logic listed in the steps above. There two notes regarding this case:

• It is necessary to attach the mouseleave event to the chart’s wrapper because the chart doesn’t have any client-side events for unhover and attaching the mouseleave event to the DOM element of the item will not work (i.e., the item has an overlay that triggers the event on mouse over and not on mouse leave).
• You must store the dataItem object in a global variable when the OnClientSeriesHovered event is triggered, so that it is available in the mouse leave event.

For a data bound chart you can simply replace the explode property in the dataItem object with the name of the data source field that is responsible for the explode state of the Pie/Donut series items.

You can find the full runnable VS examples on both approaches in the attached archives.