Using adapters on category axis labels

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:

TypeScript

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

JavaScript

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.

Open in CodePen