How to use highstocks navigator on a highchart

Question

I have a highcharts datetime spline graph, and I would like to add the navigator from highstocks (highstocks is already on the page) without changing anything else about the graph.

Switching from a highchart to highstocks also changes of lots of default behaviour which I'd like to forego (axis settings, legend settings… all sorts). I just want the navigator.

So I'd either like to add just the navigator to my highchart, or be pointed to a comprehensive list of options that I can pass to highstocks to make it match the highcharts defaults (if one exists).

Thanks!

Answer 1

By replacing highcharts.js with highstock.js you won't change default behavior:

• Highcharts: http://jsfiddle.net/pq7o66as/
• Highstock: http://jsfiddle.net/pq7o66as/1/

Now simply enable navigator:

http://jsfiddle.net/pq7o66as/2/

    navigator: {
        enabled: true      
    },

Note:

Don't change constructor from: $('#container').highcharts(options); to $('#container').highcharts('StockChart', options);.

And default options for Highstock:

    chart: {
        panning: true,
        pinchType: 'x',
        inverted: false // "true" is not supported in Highstock
    },
    navigator: {
        enabled: true
    },
    scrollbar: {
        enabled: true
    },
    rangeSelector: {
        enabled: true
    },
    title: {
        text: null,
        style: {
            fontSize: '16px'
        }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        line: {
            marker: {
                enabled: false,
                radius: 2
            },
            states: {
                hover: {
                    lineWidth: 2
                }
            }
        },
        column: {
            shadow: false,
            borderWidth: 0
        }
    },
    xAxis: {
            startOnTick: false, // only when navigator enabled 
            endOnTick: false, // only when navigator enabled
            minPadding: 0,
            maxPadding: 0,
            ordinal: true,
            title: {
                text: null
            },
            labels: {
                overflow: 'justify'
            },
            showLastLabel: true,
            type: 'datetime' // in Highstock only supported type
   },
   yAxis: {
        labels: {
            y: -2
        },
        opposite: opposite,
        showLastLabel: false,
        title: {
            text: null
        }
   }