This demo shows how we can use an adapter and oversizeBehavior on labels of a category axis, to make the auto-wrap automatically.
The code
Here's the relevant code section:
// Create axes
// Renderer
let xRenderer = am5xy.AxisRendererX.new(root, {
minGridDistance: 30
});
// Axis
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
// Enable label wrapping
xRenderer.labels.template.setAll({
oversizedBehavior: "wrap",
textAlign: "center"
});
// Set up automatic width calculation using an adapter
xRenderer.labels.template.adapters.add("width", function(width, target) {
let x0 = xAxis.getDataItemCoordinateY(xAxis.dataItems[0], "category", 0);
let x1 = xAxis.getDataItemCoordinateY(xAxis.dataItems[0], "category", 1);
target.set("maxWidth", x1 - x0)
return x1 - x0;
});
// Create axes
// Renderer
var xRenderer = am5xy.AxisRendererX.new(root, {
minGridDistance: 30
});
// Axis
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
// Enable label wrapping
xRenderer.labels.template.setAll({
oversizedBehavior: "wrap",
textAlign: "center"
});
// Set up automatic width calculation using an adapter
xRenderer.labels.template.adapters.add("width", function(width, target) {
var x0 = xAxis.getDataItemCoordinateY(xAxis.dataItems[0], "category", 0);
var x1 = xAxis.getDataItemCoordinateY(xAxis.dataItems[0], "category", 1);
target.set("maxWidth", x1 - x0)
return x1 - x0;
});
Example
See the Pen Wrapping category axis labels by amCharts team (@amcharts) on CodePen.