Labels on negative columns

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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

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
  });
});

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

See the Pen
Labels for negative columns by amCharts team (@amcharts)
on CodePen.0