Setting a custom date format for the dateAxis tooltip is necessary to display the hour, minute, and second.
If only one day with different times is set, it displays as expected with the proper time in the tooltip. However, when more than one day is set in the data (which is required), 12:00:00 always appears as the time, and moving the cursor only navigates between days, not individual points with different times.
While the scale in days is functioning correctly, how can the cursor be moved to each point in the data and show the corresponding time?
https://i.sstatic.net/wXccc.jpg
function amRangeAreaChart() {
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
var chart = am4core.create("amLineChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
var data = [];
var open = 100;
var close = 250;
for (var i = 1; i < 30; i++) {
open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 4);
close = Math.round(open + Math.random() * 5 + i / 5 - (Math.random() < 0.5 ? 1 : -1) * Math.random() * 2);
data.push({ date: new Date(2018, 1, i, 11, i, i), open: open, close: close });
}
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.openValueY = "open";
series.dataFields.valueY = "close";
dateAxis.tooltipDateFormat = "yyyy-MM-dd / hh:mm:ss";
series.tooltipText = "temp: {openValueY.value}";
series.sequencedInterpolation = true;
series.fillOpacity = 0.3;
series.defaultState.transitionDuration = 1000;
series.tensionX = 0.8;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "open";
series2.sequencedInterpolation = true;
series2.defaultState.transitionDuration = 1500;
series2.stroke = chart.colors.getIndex(6);
series2.tensionX = 0.8;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();
});
}