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:

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

Posted in Uncategorized