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.

How it's done

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.

Relevant code

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

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

Example

See the Pen
Axis ranges by amCharts team (@amcharts)
on CodePen.0