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

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>