For some reason value_2 covers value_1 at 2:00 if you hide the value_2 legend, you can see value_1 column.
How do I stack them automatically and display tooltips for both? If I swap the order of data, the tooltip shows for both values at 2:00 but value_2 still covers value_1.
Please help
am4core.ready(function() {
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.legend = new am4charts.Legend();
function createSeries(field, color) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 0;
series.fill = am4core.color(color);
series.clustered = false;
series.minBulletDistance = -1;
series.name = field;
series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;
chart.scrollbarX.series.push(series);
return series;
}
// Create axes
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = {
"timeUnit": 'hour',
"count": 1
};
createSeries('value_1', '#646464');
createSeries('value_2', '#333333');
chart.data = [
{
"date": new Date(2021, 5, 4, 1),
"value_1": 2
},
{
"date": new Date(2021, 5, 4, 2),
"value_1": 2,
},
{
"date": new Date(2021, 5, 4, 2),
"value_2": 9,
},
];
}); // end am4core.ready()
Your data needs to be grouped by date; separating them out as individual elements will cause visual glitches like in your codepen.
chart.data = [
{
date: new Date(2021, 5, 4, 1),
value_1: 2
},
{
date: new Date(2021, 5, 4, 2),
value_1: 2,
value_2: 9
}
];