Auto-wrapping category axis labels

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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.0

The code

Example

Related info