How to explode a segment in ASP.NET MVC Pie Chart?

Pie Charts are circular charts that render Y values as slices in a pie. These slices are rendered in proportion to the sum of all the Y values in the series. You can explode these slices in any of the following ways.

Explode

Pie series supports Explode property that allows segments to lean out when moving the mouse over the segments. Explode option is not applicable to the pyramid and funnel type series.

CSHTML

      @(Html.EJ().Chart("container")
               .Series(series =>
               {
                     series.Type(SeriesType.Pie).Explode(true).Add();
                     . . . . . . .
               })
               . . . . . . . . 
      )

In following screenshot, when the mouse hovers over the first segment, that segment explodes. When mouse moves out, the exploded segment returns to its original position.

Figure 1: First segment explodes

Explodeindex

You can also programmatically explode a segment by using the explodeIndex property for accumulation type series (pie, doughnut, pyramid, and funnel series). To explode all the segments in the series, the explodeAll property is enabled.

CSHTML

      @(Html.EJ().Chart("container")
               .Series(series =>
               {
                     series.Type(SeriesType.Pie).ExplodeIndex(5).Add();
                     . . . . . . .
               })
               . . . . . . . . 
      )

The following screenshot displays the chart with programmatically exploded 5th segment by using the above code.

Figure 2: Exploded 5th segment

ExplodeOffset

The explodeOffset property is used to specify the distance between the actual center and the starting position of the exploded point.

CSHTML

      @(Html.EJ().Chart("container")
               .Series(series =>
               {
                     series.Type(SeriesType.Pie).ExplodeIndex(5).ExplodeOffset(35).Add();
                     . . . . . . .
               })
               . . . . . . . . 
      )

The following screenshot displays the Pie Chart with the 5th index exploded to 35 pixels from the center.

Figure 3: 5th index exploded to 35 pixels from the center