Highcharts/Highstock tooltip crosshairs appear on top of navigator when disabled

I am trying to represent multi-series events on a timeline using a column chart in Highstock.

I want to completely disable the crosshairs that appear as you move the mouse around the chart. It says quite clearly in the documentation that the crosshairs are disabled by simply setting tooltip.crosshairs to false. However, after doing so the crosshairs still appear over the navigator portion of the chart.

  • Passing a JavaScript function from JSON encoded PHP
  • Optimize JavaScript DrillDown code
  • Hover markers missing on disconnected graph
  • highcharts link series such that turn one off turns off the other
  • Rendering and navigating multiple charts in highcharts
  • Highcharts - change background color along specific date range
  • enter image description here

    jsFiddle: jsFiddle showing problem

    Highcharts.stockChart configuration:

    chart = new Highcharts.StockChart({
        chart: {
            alignTicks: true,
            animation: true,
            backgroundColor: '#fff',
            events: {
                load: function (e) {
                    this.xAxis[0].setExtremes(1398859200000, 1414753200000);
                }
            },
            ignoreHiddenSeries: true,
            renderTo: $('#chart')[0]
        },
        colors: [
            '#89f1a4',
            '#68d9f7',
            '#9eb9ef',
            '#c49eef'
        ],
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            borderWidth: 0,
            enabled: true,
            navigation: {
                animation: true
            },
            shadow: false,
            verticalAlign: 'top'
        },
        rangeSelector: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            crosshairs: false,
            shared: true
        },
        navigator: {
            height: 40,
            margin: 10,
            maskFill: 'rgba(233, 233, 233, 0.7)',
            outlineWidth: 0,
            series: {
                type: 'column',
                stacking: 'normal',
                dataGrouping: {
                    enabled: true,
                    forced: true,
                    units: [[
                        'week',
                        [1]
                    ]]
                }
            }
        },
        plotOptions: {
            series: {
                showInLegend: true,
                stacking: 'normal',
                dataGrouping: {
                    enabled: true,
                    forced: true,
                    units: [[
                        'week',
                        [1]
                    ]]
                }
            }
        },
        yAxis: {
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            max: 24,
            min: 0,
            ordinal: false
        },
        xAxis: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%b %Y',
                month: '%b %Y',
                year: '%Y'
            },
            labels: {
                style: {
                    color: '#ccc'
                }
            },
            minRange: 604800000,
            ordinal: false
        },
        series: data
    });
    

    My question:

    I have been unable to find a “crosshairs” option anywhere in the Navigator configuration within the API documentation. Am I missing something, or is this a bug?

    Any help very much appreciated!

  • Highcharts data labels overlapping columns
  • Highcharts customization PHP/MySQL
  • Highcharts, display marker on selected point only
  • Remove DataPoint from x-axis redraw Issues
  • how to change local functions of highcharts
  • Highcharts - Force Categories in x-axis to be shown, even without data