Highcharts range selector buttons and input filter not working

Question

I've created a chart using Highcharts in Django but the range selector buttons do not work and input range starts from 1970 instead of my first date. I guess it's something to do with dates formatting but I can't figure it out ...

I'm reading a JSON file content with dates entry formatted in milliseconds, ex: 1527465600000.

The chart is displayed just fine, the range selector at the bottom of the chart works just fine as well, and dates on the X-axis are nicely formatted as expected. What I want is for the range selector buttons to work, and for the range selector input filter to start from my first date instead of starting from the 1st of Jan 1970.

Here's my highcharts code:

{% block javascripts %}

{% load static %}

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

    <script>
        fetch("{% static 'highcharts_1.json' %}")
        .then(response => response.json())
        .then(mydata => {
            console.log(mydata.sample1,mydata.dates)

            Highcharts.chart('mychart_1', {
              
                chart: {
                    zoomType: 'x',
                    type: 'spline',
                },

                xAxis: {
                    type: 'category',
                    categories: mydata.dates,
                    labels:{
                        formatter: function() { 
                            return Highcharts.dateFormat('%d %b %Y', 
                                                        this.value); 
                        },
                        align: 'right',
                        rotation: -90,
                    },
                },

                yAxis: {
                    min: 0,
                    max: 1,
                    tickInterval: 0.1,
                    title: {
                        text: 'Score'
                    }
                },

                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                credits :  {
                    enabled : false
                    },
                
                navigator :{
                    enabled: true
                },

                scrollbar :{
                    enabled: true
                },

                rangeSelector: {
                    enabled: true,
                    allButtonsEnabled: true,
                    inputEnabled: true,
                    buttons: [{
                        type: 'month',
                        count: 1,
                        text: '1m'
                    }, {
                        type: 'month',
                        count: 3,
                        text: '3m'
                    }, {
                        type: 'month',
                        count: 6,
                        text: '6m'
                    }, {
                        type: 'ytd',
                        text: 'YTD'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    selected: 3
                },

                series: [{
                    name: 'sample1',
                    data: mydata.sample1,
                }],

                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false,
                        },
                    },
                },

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 1000
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

                });
        });
    </script>

{% endblock javascripts %}

Thanks for your help ! Here's a fiddle with the code I'm using: https://jsfiddle.net/ssoj_tellig/408xoat9/13/

Answer 1

You need to change your data format if you want to make the rangeSelector work into:

const data = [
  [x, y],
  [x, y],
  ...
]

Where x is a time format. Base on your demo:

var mydates = [
  [1527465600000, 29.9],
  [1528070400000, 71.5],
  [1528675200000, 106.4],
  [1529280000000, 129.2],
  [1529884800000, 144.0],
  [1530489600000, 176.0],
  [1531094400000, 135.6],
  [1531699200000, 148.5],
  [1532304000000, 216.4],
  [1532908800000, 194.1],
  [1533513600000, 95.6],
  [1534118400000, 54.4]
];

Demo: https://jsfiddle.net/BlackLabel/p2nmrt6g/