highchart navigator - disable range movement

Question

We are using HighChart navigator to display the series of data. currently if we place the cursor between the left and right range buttons, we are able to move that range within the chart, we need to disable that option, we just need the left- and right buttons to move separately and not as a whole

Highcharts.stockChart('container', {

    rangeSelector: {
        enabled: false
    },
    tooltip: {
        enabled: false
    },
    // title: {
    //     text: 'Income vs Expense'
    // },
    exporting: {
        enabled: false,
    },
    yAxis: {
        height: 0,
        gridLineWidth: 0,
        labels: {
            enabled: false
        }
    },
    xAxis: {
        lineWidth: 0,
        tickLength: 0,
        labels: {
            enabled: false
        },
        events: {
            setExtremes: function(e) {

            },
        },
        min: 40,
        max: 50,
    },
    scrollbar: {
        enabled: false,
    },
    credits: {
        enabled: false,
    },
    navigator: {
        series: {
            type: 'column',
            animation: {
                duration: 0,
            },
        },
        height: 100,

        xAxis: {
            lineColor: "gray",
            lineWidth: 1,
            labels: {
                step: 1,
                align: "right",
                enabled: true,
                x: 1,
                y: 10,
                formatter: function() {
                    return this.value;
                },
            },
            min: 0,
            max: 100
        },

    },
    series: [{
        name: 'data 1',
        data: [
            [30, 158000],
            [31, 158000],
            [32, 158000],
            [33, 158000],
            [34, 158000],
            [35, 159000],
            [40, 161000],
            [41, 161000],
            [42, 161000],
            [43, 161000],
            [44, 161000],
            [45, 165000],
            [46, 165000],
            [47, 165000],
            [48, 165000],
            [49, 165000],
            [50, 180000],
            [51, 180000],
            [52, 180000],
            [53, 180000],
            [54, 180000],
            [55, 70000],
            [56, 70000],
            [57, 70000],
            [58, 70000],
            [59, 70000],
            [60, 185000],
            [61, 185000],
            [62, 185000],
            [63, 185000],
            [64, 185000],
            [65, 185000],
        ],
        lineWidth: 0,
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: false
                }
            }
        },
    }]
});

Fiddle link: https://jsfiddle.net/yasarui/0Lc1oudf/1/

Answer 1

You can remove all events from shades elements in navigator. For example:

  chart: {
    events: {
      load: function() {
        this.navigator.shades.forEach(shade => {
          Highcharts.removeEvent(shade.element);
        });
      }
    }
  }

---

Live demo: https://jsfiddle.net/BlackLabel/ofepkwta/

API Reference: https://api.highcharts.com/class-reference/Highcharts#.removeEvent%3CT%3E