highcharts: how can I show the floats as datetime in the xAxis correctly

Question

I am trying to plot the following example data. I want to show the x-Axis as the DateTime from the float numbers. But it keeps on shown as 1970-01-01. Can someone help me to understand how can I get it correctly?

I copied the high charts example as below. But I want to show the x-axis as date, like '2017-03-20', rather than the original floats.

Thank you very much for your help!

Thank you.

    Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        credits: {
            text: 'Songhuiming',
            href: 'http://www.songhuiming.com'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            type: 'datetime',
            dateTimeLabelFormats: {day: '%Y-%b-%d'},
            categories: [1489298400000.0, 1492923600000.0, 1492318800000.0, 1480226400000.0, 1494133200000.0, 1490504400000.0, 1488088800000.0, 1475384400000.0, 1493528400000.0, 1491109200000.0, 1480831200000.0, 1471755600000.0],
            crosshair: true,
            labels: {rotation: 90, step: 2}
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'spline',
            data: [110, 105, 104, 96, 102, 93, 93, 105, 118, 119, 101, 94],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });

Answer 1

Assigning manually formatted timestamps to categories is not a good approach here. Highcharts already has built in mechanism for handling axis' datetime labels.

First change the type of your x axis to datetime. Then use timestamps as x values for points. It can be done either by explicitly assigning specific timestamp to every point or by using pointInterval combined with pointStart (when the distance between points is constant).

Doc about data formats: https://www.highcharts.com/docs/chart-concepts/series

Doc about types of axes: https://www.highcharts.com/docs/chart-concepts/axes

API references:

• https://api.highcharts.com/highcharts/plotOptions.series.pointStart
• https://api.highcharts.com/highcharts/plotOptions.series.pointInterval

Answer 2

Seems that the proprity dateTimeLabelFormats is not working fine so you can just convert you float timestamp to a formatted date string :

new Date(1489298400000.0).toLocaleDateString()

Here the complete example :

Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        credits: {
            text: 'Songhuiming',
            href: 'http://www.songhuiming.com'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: [new Date(1489298400000.0).toLocaleDateString(), new Date(1492923600000.0).toLocaleDateString(), new Date(1492318800000.0).toLocaleDateString(), new Date(1480226400000.0).toLocaleDateString(), new Date(1494133200000.0).toLocaleDateString(), new Date(1490504400000.0).toLocaleDateString(), new Date(1488088800000.0).toLocaleDateString(), new Date(1475384400000.0).toLocaleDateString(), new Date(1493528400000.0).toLocaleDateString(), new Date(1491109200000.0).toLocaleDateString(), new Date(1480831200000.0).toLocaleDateString(), new Date(1471755600000.0).toLocaleDateString()],
            crosshair: true,
            labels: {rotation: 90, step: 2}
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            data: [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            type: 'spline',
            data: [110, 105, 104, 96, 102, 93, 93, 105, 118, 119, 101, 94],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>