Aligning axis range labels

Labels of an axis range are shown on the axis itself by default. This demo shows how we can put them on the opposite side of the plot area, or within it.

Labels on opposite side

To achieve the required result, we’ll need these steps:

• Set label’s inside: true so that it is drawn inside plot container and thus automatic positioning is disabled.
• Add adapter for labels’ x setting, so that we can add plot container’s width to it.
• Add an event to update x if/when plot container’s width changes (e.g. browser window is resized).
• Optionally, we may also need to adjust label’s centerX and right padding of the chart.

The code:

TypeScript

let chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    paddingRight: 80 // Add space on the right for labels
  })
);

// ...

range.get("label").setAll({
  text: "Hello",
  inside: true,
  centerX: 0, // Label starts at its left side
  dx: 5 // Move label additionally right by 5px
});

range.get("label").adapters.add("x", (x, target)=>{
  return chart.plotContainer.width();
});

chart.plotContainer.onPrivate("width", ()=>{
  range.get("label").markDirtyPosition();
});

JavaScript

var chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    paddingRight: 80 // Add space on the right for labels
  })
);

// ...

range.get("label").setAll({
  text: "Hello",
  inside: true,
  centerX: 0, // Label starts at its left side
  dx: 5 // Move label additionally right by 5px
});

range.get("label").adapters.add("x", (x, target)=>{
  return chart.plotContainer.width();
});

chart.plotContainer.onPrivate("width", ()=>{
  range.get("label").markDirtyPosition();
});

The demo:

Open in CodePen

Labels inside plot area

We can put axis range label into plot area by following these steps:

• Pushing it to the chart’s plotContainer.children.
• Overriding labels’ centerX setting (we need it centered around different edge then regular labels placed outside plot area).
• Using an adapter to override labels’ x value. This is optional of we are using only left-side axes.
• Using dx to shift the label away from the edge of the plot area.

The code:

TypeScript

let right = yAxis.get("renderer").get("opposite");

let rangeDataItem = yAxis.makeDataItem({
  value: value
});

let range = yAxis.createAxisRange(rangeDataItem);

let label = range.get("label");

label.setAll({
  text: "Hello",
  centerX: right ? am5.p100 : am5.p0,
  dx: right ? -15 : 15
});

label.adapters.add("x", function(x, target) {
  return right ? am5.p100: am5.p0;
});

chart.plotContainer.children.push(label);

JavaScript

var right = yAxis.get("renderer").get("opposite");

var rangeDataItem = yAxis.makeDataItem({
  value: value
});

var range = yAxis.createAxisRange(rangeDataItem);

var label = range.get("label");

label.setAll({
  text: "Hello",
  centerX: right ? am5.p100 : am5.p0,
  dx: right ? -15 : 15
});

label.adapters.add("x", function(x, target) {
  return right ? am5.p100: am5.p0;
});

chart.plotContainer.children.push(label);

The demo:

Open in CodePen