highCharts 范围选择器日期格式问题？

Question

I am trying to use the rangefilter with the HighCharts. But getting improper start and end date. Seems like it is not able to recognize my date.

On x-axis, I have categorical values of unique dates. On the y-axis, I have the unique count.

My data series for y-axis is complicated and generating dynamically in the mentioned format.

Can someone please suggest me where i am going wrong?

$(document).ready(function() {
    var categories = ['2010-12-30','2011-03-31','2011-06-30'];

    new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'Sample'
        },
        rangeSelector: {
            enabled: true
        },
        navigator: {
            enabled: true,
            xAxis: {
                labels: {
                    /* formatter: function() {
                         return categories[this.pos]
                     } */
                }
            }
        },
        scrollbar: {
            enabled: true
        },
        xAxis: {
            reversed: true,
            minRange: 1,
            tickPositions: categories
            
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'AVERAGE CT_HOURS',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }],
        series: [{
            name: 'Count',
            type: 'spline',
            data: [
                [56.6],
                [46.3],
                [32.8]
            ].reverse(),
            tooltip: {
                valueSuffix: ''
            }
        }]
    });
});

Here is my sample code: http://jsfiddle.net/7x3cgf48/3/

Answer 1

The range selector is reserved for highstock charts.

https://api.highcharts.com/highstock/rangeSelector

As for displaying unique values in xAxis.labels I project a value onto a two-dimensional array and display the label as a string after set xAxis.labels.useHTML to true.

https://api.highcharts.com/highstock/xAxis.labels.useHTML

   xAxis: {
     useHTML: true,
     labels: {
       formatter: function() {
         var value = this.value,
           string = `${categories[this.value][0]}`;
         return string;
       }
     }
   },

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