CODEWITHSUNDEEP
highchartsslidernavigator
Sidharth Gilela
Sidharth Gilela

Reputation: 1

Highcharts - How to separate the functionality of the navigator from the graph

After adding a navigator to the highchart graph, how do we prevent the navigator from changing the movement of the graph.
Is there an event handler for this?

I would like the navigator to be on the screen but disable how it functions with the graph.

Upvotes: 0

Views: 152

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can achieve it overwriting its core methods.

1) destroy whole functionality:

(function(H) {
    H.Navigator.prototype.addMouseEvents = function() {}
})(Highcharts);

Demo:


2) prevent changing chart extremes when the navigator handles are moved:

(function(H) {
  H.Navigator.prototype.onMouseUp = function(e) {
    var navigator = this,
      chart = navigator.chart,
      xAxis = navigator.xAxis,
      scrollbar = navigator.scrollbar,
      unionExtremes,
      fixedMin,
      fixedMax,
      ext,
      DOMEvent = e.DOMEvent || e;

    if (
      (navigator.hasDragged && (!scrollbar || !scrollbar.hasDragged)) ||
      e.trigger === 'scrollbar'
    ) {
      unionExtremes = navigator.getUnionExtremes();

      // When dragging one handle, make sure the other one doesn't change
      if (navigator.zoomedMin === navigator.otherHandlePos) {
        fixedMin = navigator.fixedExtreme;
      } else if (navigator.zoomedMax === navigator.otherHandlePos) {
        fixedMax = navigator.fixedExtreme;
      }
      // Snap to right edge (#4076)
      if (navigator.zoomedMax === navigator.size) {
        fixedMax = navigator.reversedExtremes ?
          unionExtremes.dataMin : unionExtremes.dataMax;
      }

      // Snap to left edge (#7576)
      if (navigator.zoomedMin === 0) {
        fixedMin = navigator.reversedExtremes ?
          unionExtremes.dataMax : unionExtremes.dataMin;
      }

      ext = xAxis.toFixedRange(
        navigator.zoomedMin,
        navigator.zoomedMax,
        fixedMin,
        fixedMax
      );
    }

    if (e.DOMType !== 'mousemove') {
      navigator.grabbedLeft = navigator.grabbedRight =
        navigator.grabbedCenter = navigator.fixedWidth =
        navigator.fixedExtreme = navigator.otherHandlePos =
        navigator.hasDragged = navigator.dragOffset = null;
    }
  }
})(Highcharts);

Demo:

Upvotes: 1

Related Questions