Skip to content
amCharts 5

Pre-hiding pie chart slices

This short tutorial will show how to pre-hide individual slices of a pie chart, in this case ones that have zero value.

Hiding a slice

Section titled “Hiding a slice”

To a hide a slice on a pie series (or any other percent series for that matter), we need to call the hide() method of its data item.

For example, the following code will hide the second slice in series:

series.dataItems[1].hide(0);

Waiting for data

Section titled “Waiting for data”

Please note, that data items for the series might not be ready immediately.

To work around that we can use series’ datavalidated event, which kicks in when data is parsed and all data items are created.

series.events.on("datavalidated", function() {
  series.dataItems[1].hide(0)
});

Filtering slices to hide

Section titled “Filtering slices to hide”

Now, one thing left is to filter out actual slices (data items) to hide:

series.events.on("datavalidated", function() {
  am5.array.each(series.dataItems, function(dataItem) {
    if (dataItem.get("value") == 0) {
      dataItem.hide();
    }
  })
});

You could use any logic to filtering slices, too.

The following code will check for hidden value in source data:

series.events.on("datavalidated", function() {
  am5.array.each(series.dataItems, function(dataItem) {
    if (dataItem.dataContext.hidden) {
      dataItem.hide();
    }
  })
});

Removing filtered slices from legend

Section titled “Removing filtered slices from legend”

We can use datavalidated to selectively populate legend data, too:

series.events.on("datavalidated", function() {
  am5.array.each(series.dataItems, function(dataItem) {
    if (dataItem.get("value") == 0) {
      dataItem.hide();
    }
    else {
      legend.data.push(dataItem);
    }
  })
});

Example

Section titled “Example”
Open in CodePen