Using adapters on 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 dynamically modify labels of the CategoryAxis using an adapter.

We need to add an adapter on an axis label template, which is accessible via axis' renderer:

xAxis.get("renderer").labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem && target.dataItem.dataContext) {
    return target.dataItem.dataContext.categoryLabel;
  }
  return text;
});

xAxis.get("renderer").labels.template.adapters.add("text", function(text, target) {
  if (target.dataItem && target.dataItem.dataContext) {
    return target.dataItem.dataContext.categoryLabel;
  }
  return text;
});

In this particular example, actual category name is being replaced with a different value extracted from data.

See the Pen
amCharts 5: Using adapaters on CategoryAxis labels by amCharts team (@amcharts)
on CodePen.0