Hide or relocate label bullets for small columns

Sometimes, showing a label on a very small column is not an option. This tutorial will take a look at two ways to fix that issue.

Hiding labels

First option is to hide labels for small columns.

We can use a private setting height change event handler to automatically hide or show the bullet based on height.

The beautiful thing is that it will happen automatically, even across data updates.

series.columns.template.onPrivate("height", function(height, target) {
  am5.array.each(target.dataItem.bullets, function(bullet) {
    if (height > 50) {
      bullet.get("sprite").show();
    }
    else {
      bullet.get("sprite").hide();
    }
  });
});

series.columns.template.onPrivate("height", function(height, target) {
  am5.array.each(target.dataItem.bullets, function(bullet) {
    if (height > 50) {
      bullet.get("sprite").show();
    }
    else {
      bullet.get("sprite").hide();
    }
  });
});

See the Pen
amCharts 5: Hide bullets for small columns by amCharts team (@amcharts)
on CodePen.0

Relocating labels

Another option is to relocate the label to a more suitable place, e.g. to place it on top of the label.

We'll use the same approach as we did when hiding labels, but instead of toggling the bullet on or off we'll modify it's locationY and some other settings.

series.columns.template.onPrivate("height", function(height, target) {
  am5.array.each(target.dataItem.bullets, function(bullet) {
    if (height > 50) {
      bullet.set("locationY", 0.5);
      bullet.get("sprite").set("centerY", am5.p50);
    }
    else {
      bullet.set("locationY", 1);
      bullet.get("sprite").set("centerY", am5.p100);
    }
  });
});

series.columns.template.onPrivate("height", function(height, target) {
  am5.array.each(target.dataItem.bullets, function(bullet) {
    if (height > 50) {
      bullet.set("locationY", 0.5);
      bullet.get("sprite").set("centerY", am5.p50);
    }
    else {
      bullet.set("locationY", 1);
      bullet.get("sprite").set("centerY", am5.p100);
    }
  });
});

See the Pen
amCharts 5: Hide bullets for small columns by amCharts team (@amcharts)
on CodePen.0