Skip to content
amCharts 5

Auto-wrapping category axis labels

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

Section titled “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;
});

Example

Section titled “Example”
Open in CodePen
Section titled “Related info”