How to assign different colors to chart labels on graph interface in amChart 5?

Question

I have a simple amChart5 chart. I would like to change the colors of the text that displays on the axes and assign a different color to each of these elements.

What I have:

What I want:

The documentation explains that you can change the color but it applies to the whole axis, to all elements at the same time.

Do you know if there is a way to treat each element individually?

Answer 1

A nice solution is to use an adapter like so:

xAxis.get("renderer").labels.template.adapters.add("fill", (fill, target) => { 
  if (target.dataItem && target.dataItem.dataContext) {
    let category = target.dataItem.dataContext.category;
      
    if (category === "Category 1") {
      return "#ff0000";
    } else if (category === "Category 2") {
      return "#00ff00";
    } else {
      return "#0000ff";
    }
  }
    
  return fill;
});

Full code:

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let legend = chart.children.push(am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50
  }));

  let data = [
    {
      "category": "Category 1",
      "value1": 10,
      "value2": 1
    },
    {
      "category": "Category 2",
      "value1": 20,
      "value2": 7
    },
    {
      "category": "Category 3",
      "value1": 15,
      "value2": 3
    }
  ];

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  }));

  xAxis.data.setAll(data);
  
  // ==================================================
  xAxis.get("renderer").labels.template.adapters.add("fill", (fill, target) => {   
    if (target.dataItem && target.dataItem.dataContext) {
      let category = target.dataItem.dataContext.category;
      
      if (category === "Category 1") {
        return "#ff0000";
      } else if (category === "Category 2") {
        return "#00ff00";
      } else {
        return "#0000ff";
      }
    }
    
    return fill;
  });
  // ==================================================

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));

  function makeSeries(name, fieldName) {
    let series = chart.series.push(am5xy.ColumnSeries.new(root, {
      name: name,
      xAxis: xAxis,
      yAxis: yAxis,
      categoryXField: "category",
      valueYField: fieldName
    }));

    series.data.setAll(data);
    legend.data.push(series);
  }

  makeSeries("Series 1", "value1");
  makeSeries("Series 2", "value2");

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>