Hiding labels and ticks for small pie slices

This demo shows how we can use an adapter to automatically hide labels and ticks of small pie chart slices.

Relevant code

TypeScript

series.labels.template.adapters.add("y", function(y, target) {
  let dataItem = target.dataItem;
  if (dataItem) {
    var tick = dataItem.get("tick");
    if (tick) {
      if (dataItem.get("valuePercentTotal") < 1) {
        target.set("forceHidden", true);
        tick.set("forceHidden", true);
      }
      else {
        target.set("forceHidden", false);
        tick.set("forceHidden", false);
      }
    }
    return y;
  }
});

JavaScript

series.labels.template.adapters.add("y", function(y, target) {
  var dataItem = target.dataItem;
  if (dataItem) {
    var tick = dataItem.get("tick");
    if (tick) {
      if (dataItem.get("valuePercentTotal") < 1) {
        target.set("forceHidden", true);
        tick.set("forceHidden", true);
      }
      else {
        target.set("forceHidden", false);
        tick.set("forceHidden", false);
      }
    }
    return y;
  }
});

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Hiding labels and ticks for small pie sliceshiding-labels-and-ticks-for-small-pie-slices