海图导航器

Question

i am showing data year wise in my chart i want to use navigator so the user can navigate to years and see data of that particular year but the problem i cant fixed is when i appply navigator in highcharts it remains fixed , is there a problem in data ?

  $(document).ready(function() {
        Highcharts.setOptions({
            chart: {
                type: 'line'
            },

            credits: {
                enabled: false
            },


            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            },

            //title: { text: ''},
            //subtitle: { text:''},
            //xAxis: { categories: '' },
            yAxis: {
                // reversed: true,
                title: {
                    text: 'Rank'
                },
                useHtml : Highcharts.hasBidiBug,


                labels: {
                    useHTML: true,
                    formatter: function () {
                        return this.value ;
                    }
                },
                min : 0,
                reversed: false,
                title: {
                    text: 'Rank',
                    useHtml : true

                }

            },
            xAxis: {
                labels : {
                    useHTML: true,
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }

            },
            plotOptions: {
                series: {
                    animation: {
                        duration: 4000,
                    },
                    showInNavigator: true
                },
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<b>{series.name}</b><br/>',
                //animation: [true],
                // pointFormat: '{point.x} Year: {point.y}'
            },


            legend : {
                enabled : true,
                useHTML: true

            }
            //series: ''

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

        });

        var chart1 = new Highcharts.Chart({
            chart:{renderTo:'container1'},
            navigator: {
                enabled: true , 

                xAxis: {
            dateTimeLabelFormats: {
            year: '%Y'
                     }
        }
            },
            rangeSelector: {
                enabled: false,
                selected:1,
            },

            title : {text :'GCI '},
            subtitle : {text : 'Source: © 2017 OSMM.'},
            xAxis: { categories: ['2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017']  },
            series: [{ name: 'Bahrain', data: [37,37,35,43,44,39,48] ,visible : false},{ name: 'Bhutan', data: [0,0,0,109,103,105,97] ,visible : false},{ name: 'China', data: [27,26,29,29,28,28,28] ,visible : false},{ name: 'India', data: [51,56,59,60,71,55,39] ,visible : false},{ name: 'Iran', data: [69,62,66,82,83,74,76] ,visible : false},{ name: 'KSA', data: [21,17,18,20,24,25,29] ,visible : false},{ name: 'Kuwait', data: [35,34,37,36,40,34,38] ,visible : false},{ name: 'Netherlands', data: [8,7,5,8,8,5,4] ,visible : false},{ name: 'Oman', data: [34,32,32,33,46,62,66,] , dataLabels: {  enabled: true }},{ name: 'Qatar', data: [17,14,11,13,16,14,18] ,visible : false},{ name: 'RUSSIAN FEDERATION', data: [63,66,67,64,53,45,43] ,visible : false},{ name: 'Rwanda', data: [80,70,63,66,62,58,52] ,visible : false},{ name: 'Singapore', data: [3,2,2,2,2,2,2] ,visible : false},{ name: 'UAE', data: [25,27,24,19,12,17,16] ,visible : false},{ name: 'United Kingdom', data: [12,10,8,10,9,10,7] ,visible : false},{ name: 'United State', data: [4,5,7,5,3,3,3] ,visible : false},{ name: 'Vietnam', data: [59,65,75,70,68,56,60] , visible : false}] 
            });

        var chart11 = $('#container1').highcharts();

        chart11.yAxis[0].update({
            title :{
                text : "Score"
            },
            reversed : true

        })


    });

fiddle : http://jsfiddle.net/wz33ng9h/

Answer 1

xAxis.minRange prevents the navigator from setting extremes.

Set minRange to 1

xAxis: {
        minRange: 1,
        categories: ['2010-2011', '2011-2012', '2012-2013', '2013-2014', '2014-2015', '2015-2016', '2016-2017']
      },

example: http://jsfiddle.net/wz33ng9h/1/