JS amChart set cursor resolution to minutes and keep axis in days

Question

I am setting a custom date format for the dateAxis tooltip in order to show the hour/min/sec.

If I just set one day with different times, it is rendered as expected, and I can see the proper time in the tooltip. However, if I set more than one day in the data (that's what is needed), I always see 12:00:00 as time, and I can only move the cursor from one day to another, and not to each point in the data (different time).

So, the scale in days is ok. However, how can I move the cursor to each point in data and show the time as well?

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();

});

}

Answer 1

When you are working with dates in amCharts, it is generally a good idea to specify the baseInterval property of your dateAxis. It is documented here: DateAxis – amCharts 4 Documentation

Since your have seconds, then be explicit and tell the library to display seconds.

You can actually solve your problem with a single line of code.

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());
    // ==================================================
    dateAxis.baseInterval = { timeUnit: "second", count: 1 }; // <--- HERE
    // ==================================================
    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();

});

#amLineChart {
  width: 100%;
  height: 350px;
}

<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>

<div id="amLineChart"></div>