Pre-hiding Pie Chart Slices

Sometimes you will have a Pie chart with a lot of slices. This tutorial will teach how to automatically pre-hide some of them using “data fields” and data.

Prerequisites

Before we begin, let’s make sure we absolutely know how Pie series’ data fields work. To do so visit “Setting up series” section in our Pie chart article.

Base chart

As our test guinea pig, let’s use a very basic Pie chart with a Legend:

Open in CodePen

Selectively hiding slices

Suppose we want to hide last 4 slices, since they are not very relative because of their size.

For that we have a data field "hidden" in Pie series. Just like we were setting data fields for value and category, we can set this field to specify which slice visibility in our data:

pieSeries.dataFields.hidden = "show";

pieSeries.dataFields.hidden = "show";

{
  // ...
  "series": [{
    // ...
    "dataFields": {
      // ...
      "hidden": "show"
    }
  }]
}

Now, our Pie series will know that it needs to hide slices that have show set to false in their data:

Open in CodePen