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.

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Using adapaters on CategoryAxis labelsusing-adapaters-on-categoryaxis-labels