I am trying to place two axes below the chart, one that will display the name of the “part”, in this example “Part_1”, and below it the corresponding date. As in the example below.
This is how it looks with provided code
And this is what I’m trying to achive
Here I have a working example with data and everything:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [
{
"Part_1_bad": 20,
"Part_2_bad": 20,
"Part_1_good": 20,
"Part_2_good": 40,
"date": "2023-11-23",
"name": "Part 1"
},
{
"Part_1_bad": 20,
"Part_2_bad": 30,
"Part_1_good": 30,
"Part_2_good": 50,
"date": "2023-11-24",
"name": "Part 2"
},
{
"Part_1_bad": 20,
"Part_2_bad": 10,
"Part_1_good": 25,
"Part_2_good": 60,
"date": "2023-11-25",
"name": "Part 3"
}
];
var part_names = ["Part_1", "Part_2"];
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.labels.template.dy = 30
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var createSeries = function (part_name) {
var series_good = chart.series.push(new am4charts.ColumnSeries());
series_good.data = this.chartData;
series_good.dataFields.valueY = part_name.concat("_good");
series_good.dataFields.dateX = "date";
series_good.fillOpacity = 0.5;
series_good.columns.template.column.strokeWidth = 1.5;
series_good.columns.template.column.strokeOpacity = 1.0;
series_good.columns.template.column.stroke = am4core.color("#008000");
series_good.columns.template.column.fill = am4core.color("#008000");
var series_bad = chart.series.push(new am4charts.ColumnSeries());
series_bad.data = this.chartData;
series_bad.dataFields.valueY = part_name.concat("_bad");
series_bad.dataFields.dateX = "date";
series_bad.fillOpacity = 0.5;
series_bad.columns.template.column.strokeWidth = 1.5;
series_bad.columns.template.column.strokeOpacity = 1.0;
series_bad.columns.template.column.stroke = am4core.color("#ff0000");
series_bad.columns.template.column.fill = am4core.color("#ff0000");
series_bad.stacked = true;
}
part_names.forEach(function (part_name) {
createSeries(part_name);
});