Disabling stacking candles on AmCharts v4 Candlestick chart

I am building a simple candlestick chart in a hourly timeframe. I figured out out to avoid candles to being grouped within the same day using both "dateFormat" and "inputDateFormat" parameters. For some reason, depending on the dataset, it doesn't always work. Below two examples that differ only for the dataset (chart.data). Any idea about what is wrong? Thanks

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
var chart = am4core.create("chartdiv_stock", am4charts.XYChart);


// Load data


chart.data=[{"Date":"2020-10-29 12:00:00","Open":"329.21","High":"329.87","Low":"327.82","Close":"328.43","Volume":"9903193"},{"Date":"2020-10-29 11:00:00","Open":"327.87","High":"329.82","Low":"327.11","Close":"329.22","Volume":"14505192"},{"Date":"2020-10-29 10:00:00","Open":"327.08","High":"329.485","Low":"325.09","Close":"327.83","Volume":"11636626"}];

chart.leftAxesContainer.layout = "vertical";
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 60;
dateAxis.skipEmptyPeriods=true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0;
dateAxis.renderer.grid.template.strokeOpacity = 0;


var series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "Date";
series.dataFields.openValueY = "Open";
series.dataFields.valueY = "Close";
series.dataFields.lowValueY = "Low";
series.dataFields.highValueY = "High";

//series.tooltipText = "Open: [bold]${openValueY.value}[/]\nLow: [bold]${lowValueY.value}[/]\nHigh: [bold]${highValueY.value}[/]\nClose: [bold]${valueY.value}[/]";
series.connect = true;

series.dropFromOpenState.properties.fill = am4core.color("black");
series.dropFromOpenState.properties.stroke = am4core.color("black");

series.riseFromOpenState.properties.fill = am4core.color("white");
series.riseFromOpenState.properties.stroke = am4core.color("black");

series.riseFromPreviousState.properties.fillOpacity = 0;
series.dropFromPreviousState.properties.fillOpacity = 1;

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
</script>
<div id="chartdiv_stock" style="width:100%;height:500px;float:left;" ></div>

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
var chart = am4core.create("chartdiv_stock", am4charts.XYChart);


// Load data
chart.data=[{"Date":"2020-12-04 15:00:00","Open":"368.74","High":"369.28","Low":"368.55","Close":"369.2","Volume":"4558835"},{"Date":"2020-12-04 16:00:00","Open":"369.2","High":"369.85","Low":"368.67","Close":"369.83","Volume":"13766958"},{"Date":"2020-12-04 17:00:00","Open":"369.82","High":"369.94","Low":"368.94","Close":"369.01","Volume":"7618573"},{"Date":"2020-12-04 18:00:00","Open":"369","High":"369.85","Low":"369","Close":"369.15","Volume":"413998"},{"Date":"2020-12-04 19:00:00","Open":"369.15","High":"369.34","Low":"369.11","Close":"369.19","Volume":"38254"},{"Date":"2020-12-04 20:00:00","Open":"369.21","High":"369.25","Low":"369.14","Close":"369.22","Volume":"22622"}];


chart.leftAxesContainer.layout = "vertical";
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 60;
dateAxis.skipEmptyPeriods=true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0;
dateAxis.renderer.grid.template.strokeOpacity = 0;


var series = chart.series.push(new am4charts.CandlestickSeries());
series.dataFields.dateX = "Date";
series.dataFields.openValueY = "Open";
series.dataFields.valueY = "Close";
series.dataFields.lowValueY = "Low";
series.dataFields.highValueY = "High";

//series.tooltipText = "Open: [bold]${openValueY.value}[/]\nLow: [bold]${lowValueY.value}[/]\nHigh: [bold]${highValueY.value}[/]\nClose: [bold]${valueY.value}[/]";
series.connect = true;

series.dropFromOpenState.properties.fill = am4core.color("black");
series.dropFromOpenState.properties.stroke = am4core.color("black");

series.riseFromOpenState.properties.fill = am4core.color("white");
series.riseFromOpenState.properties.stroke = am4core.color("black");

series.riseFromPreviousState.properties.fillOpacity = 0;
series.dropFromPreviousState.properties.fillOpacity = 1;

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
</script>
<div id="chartdiv_stock" style="width:100%;height:500px;float:left;" ></div>

Solution

It's seems it was due to the ordering, the "not working" case had Data descending. Changing to ascending solved the issue.