Currently, I am attempting to display multiple processes throughout a single day on an AMChart XY axis. Everything seems to be functioning correctly initially, but as soon as I stack the data, the timeline unexpectedly zooms out all the way to 1970.
However, when I set series.stacked = false, the chart starts behaving as expected.
Below is the code snippet that I am using. I'm hoping that someone can identify the issue and help me achieve the desired outcome.
The desired result is to have all durations stacked on the same line based on the day field (it is possible for multiple ID's to occur on the same day).
Thank you in advance!
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "dd/MM/yyyy HH:mm:ss";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
chart.data = [{
"id":"1","name":"TEST",
"DURATION01":"6727.315","DURATION01_START":"29/04/2021 21:07:26","DURATION01_STOP":"29/04/2021 22:59:33",
"DURATION02":"4349.170","DURATION02_START":"29/04/2021 22:59:33","DURATION02_STOP":"30/04/2021 00:12:02",
"DURATION03":"13308.341","DURATION03_START":"30/04/2021 00:12:02","DURATION03_STOP":"30/04/2021 03:53:50",
"DURATION04":"1562.635","DURATION04_START":"30/04/2021 03:53:50","DURATION04_STOP":"30/04/2021 04:19:53",
"total_time":"25947.464",
"start":"Thu Apr 29 21:07:26 2021",
"end":"Fri Apr 30 04:31:22 2021",
"day":"29:04/2021 21:07:26",
"percent":100,"type":"task"
}];
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "dd/MM/yyyy HH:mm:ss";
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 30, timeUnit: "minute" };
dateAxis.renderer.tooltipLocation = 0;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
series1.dataFields.openDateX = "DURATION01_START";
series1.dataFields.dateX = "DURATION01_STOP";
series1.dataFields.categoryY = "name";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke = "color";
series1.columns.template.strokeOpacity = 1;
series1.columns.template.height = am4core.percent(100);
//series1.stacked = true
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
series2.dataFields.openDateX = "DURATION02_START";
series2.dataFields.dateX = "DURATION02_STOP";
series2.dataFields.categoryY = "name";
series2.columns.template.propertyFields.fill = "color"; // get color from data
series2.columns.template.propertyFields.stroke = "color";
series2.columns.template.strokeOpacity = 1;
series2.columns.template.height = am4core.percent(100);
//series2.stacked = truebody {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 300px;
}<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>