How to integrate highchart range slider in angularjs

Question

I am using angularjs highchart by integrating the DI of highcharts-ng

I have created different type of charts by following options

var chart = {
            options: {
                chart: {
                    type: 'bar'
                }
            },
            title: {
                text: chartData.name
            },
            subtitle: {
                text: chartData.subname
            },
            rangeSelector: {
                enabled:true,
                selected: 1
            },

            xAxis: {
                title: {
                    text: chartData.x.title
                }
            },
            yAxis: {
                title: {
                    text: chartData.y.title
                }
            },
            series: [{
                name: chartData.data[0].name,
                data: chartData.data[0].data,
                dashStyle: 'longdash'
            }, {
                 name: chartData.data[1].name,
                data: chartData.data[1].data,
                dashStyle: 'dot'
            }, {
                 name: chartData.data[2].name,
                data: chartData.data[2].data
            }]
        }

I have added rangeslider options but its not reflecting in chart.

How to integrate highchart range slider in angualrjs

Answer 1

Include a reference to highstock instead of highcharts. Both are compatible with highcharts-ng, but only highstock supports rangeSelector. Then, move rangeSelector into the options object. Note - "range slider" functionality is called navigator in the highstock docs, and must also be added to options.

var chart = {
  options: {
    chart: {
      type: 'bar'
    },
    rangeSelector: {
      enabled: true
    },
    navigator: {
      enabled: true
    }
  }
  ...
};

Here is a demo, from highcharts-ng's GitHub page: http://jsfiddle.net/pablojim/r88yszk0/