Hiding Small Pie Slices

Pie chart sizes its slices proportionally, based on the relative values. Sometimes that means that we end up with a chart that has a bunch of small-value slices that are barely visible, but clutter up the chart.

Here's one chart like that:

See the Pen amCharts 4: hide labels for small slices by amCharts team (@amcharts) on CodePen.0

Ewww. Let's see what we can do about it.

Hiding labels

Let's hide labels (and ticks) of the slices that are less than X percent of the whole slice.

To hide something we can use its hidden property. However, that does not mean we will need to explicitly specify it for each individual slice.

We have adapters on our side!

Adapters are custom functions that can dynamically modify value of object's any property.

Let's build one to auto-hide labels and ticks.

pieSeries.ticks.template.adapter.add("hidden", hideSmall);
pieSeries.labels.template.adapter.add("hidden", hideSmall);
function hideSmall(hidden, target) {
return target.dataItem.values.value.percent < 5 ? true : false;
}
pieSeries.ticks.template.adapter.add("hidden", hideSmall);
pieSeries.labels.template.adapter.add("hidden", hideSmall);
function hideSmall(hidden, target) {
return target.dataItem.values.value.percent < 5 ? true : false;
}
{
// ...
"series": [{
// ...
"ticks": {
"adapter": {
"hidden": function hideSmall(hidden, target) {
return target.dataItem.values.value.percent < 5 ? true : false;
}
}
},
"labels": {
"adapter": {
"hidden": function hideSmall(hidden, target) {
return target.dataItem.values.value.percent < 5 ? true : false;
}
}
}
}]
}

Let's check how we're doing now.

See the Pen amCharts 4: hide labels for small slices by amCharts team (@amcharts) on CodePen.0

Better. Now small irrelevant slices do not clutter up the interface, but still identifiable via hover or legend.

Hiding slices

But what about we don't want to show those small slices at all?

We could use the same hidden adapter for slices template as well:

pieSeries.slices.template.adapter.add("hidden", hideSmall);
pieSeries.slices.template.adapter.add("hidden", hideSmall);
{
// ...
"series": [{
// ...
"slices": {
"adapter": {
"hidden": function hideSmall(hidden, target) {
return target.dataItem.values.value.percent < 5 ? true : false;
}
}
}
}]
}

However, they would just be hidden, without the rest of the slices moving in to claim the freed up space.

See the Pen amCharts 4: hide labels for small slices by amCharts team (@amcharts) on CodePen.0

While not faulty per se empty space indicates that we have removed something.

But what about if we want to completely eliminate hidden slices?

In this case simple adapter won't do.

Removing slices

For this to work, we will need to hide not just respective visual element of the slice, but whole "data item".

In this case, Pie series will re-adjust itself so that remaining slices take up all of the pie.

For that we will utilize Pie series event datavalidated which happens right after data is being supplied to the series, because we will need it in order to check which slices to hide.

And, while we're at it, we will also hide related legend items.

pieSeries.events.on("datavalidated", function(ev) {
ev.target.slices.each(function(slice) {
if (slice.dataItem.values.value.percent < 5) {
slice.dataItem.hide();
slice.dataItem.legendDataItem.hide();
}
});
});
pieSeries.events.on("datavalidated", function(ev) {
ev.target.slices.each(function(slice) {
if (slice.dataItem.values.value.percent < 5) {
slice.dataItem.hide();
slice.dataItem.legendDataItem.hide();
}
});
});
{
// ...
"series": [{
// ...
"events": {
"datavalidated": function(ev) {
ev.target.slices.each(function(slice) {
if (slice.dataItem.values.value.percent < 5) {
slice.dataItem.hide();
slice.dataItem.legendDataItem.hide();
}
});
}
}
}]
}

See the Pen amCharts 4: hide labels for small slices by amCharts team (@amcharts) on CodePen.0