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