Labels on negative columns

This demo shows how we can use adapters to change vertical alignment of a bullet, by dynamically modifying its centerY setting, based on its value.

The code

TypeScript

series.bullets.push(function() {
  let label = am5.Label.new(root, {
    text: "{valueY}",
    fill: series.get("fill"),
    centerX: am5.p50,
    centerY: am5.p100,
    populateText: true
  })

  label.adapters.add("centerY", function(centerY, target) {
    let dataItem = target.dataItem;
    if (dataItem) {
      var value = dataItem.get("valueY", 0)
      if (value < 0) {
        return 0
      }
    }

    return centerY;
  })

  return am5.Bullet.new(root, {
    locationY: 1,
    sprite: label
  });
});

JavaScript

series.bullets.push(function() {
  var label = am5.Label.new(root, {
    text: "{valueY}",
    fill: series.get("fill"),
    centerX: am5.p50,
    centerY: am5.p100,
    populateText: true
  })

  label.adapters.add("centerY", function(centerY, target) {
    var dataItem = target.dataItem;
    if (dataItem) {
      var value = dataItem.get("valueY", 0)
      if (value < 0) {
        return 0
      }
    }

    return centerY;
  })

  return am5.Bullet.new(root, {
    locationY: 1,
    sprite: label
  });
});

The demo

Open in CodePen