javascript - Highcharts: how to draw line segments with click-and-drag and without chart to scroll?

Question

I am having my code inside of this JSFiddle and as a reference I am considering this JSFiddle. When I am trying to draw a segment annotation or an arrow-segment annotation, the whole chart is scrolling. Additionally, drawing can not be performed in a single mouse click and dragging to draw.

Here is an example video of how I want my chart to works v.s. how it actually works. The implementation for this behavior was initiated in the method customInitEvents, but I am not sure how to proceed further from there.

(function(H) {
  function customInitEvents() {
    var objectEach = H.objectEach,
      addEvent = H.addEvent,
      isFunction = H.isFunction;

    var navigation = this,
      chart = navigation.chart,
      bindingsContainer = navigation.container,
      options = navigation.options;

    this.removeEvents();
    // Shorthand object for getting events for buttons:
    navigation.boundClassNames = {};
    objectEach((options.bindings || {}), function(value) {
      navigation.boundClassNames[value.className] = value;
    });
    // Handle multiple containers with the same class names:
    [].forEach.call(bindingsContainer, function(subContainer) {
      navigation.eventsToUnbind.push(addEvent(subContainer, 'click', function(event) {
        var bindings = navigation.getButtonEvents(subContainer,
          event);
        if (bindings) {
          navigation.bindingsButtonClick(bindings.button, bindings.events, event);
        }
      }));
    });
    objectEach(options.events || {}, function(callback, eventName) {
      if (isFunction(callback)) {
        navigation.eventsToUnbind.push(addEvent(navigation, eventName, callback));
      }
    });
    navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
      if (!chart.cancelClick &&
        chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        navigation.bindingsChartClick(this, e);
      }
    }));
    navigation.eventsToUnbind.push(addEvent(chart.container, 'mouseup', function(e) {
      if (!chart.cancelClick &&
        chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        navigation.bindingsChartClick(this, e);
      }
    }));
    navigation.eventsToUnbind.push(addEvent(chart.container, H.isTouchDevice ? 'touchmove' : 'mousemove', function(e) {
      navigation.bindingsContainerMouseMove(this, e);
    }));
  }

  H.wrap(H.Chart.prototype, 'initNavigationBindings', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    customInitEvents.call(this.navigationBindings);
  });
}(Highcharts));

Answer 1

That functionality requires custom code. After wrapping the initNavigationBindings method, you can refactor the initEvents method and include mousedown and mouseup events:

(function(H) {
    function customInitEvents() {
        ...
        navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
            if (!chart.cancelClick &&
                    chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                e.isFakeClickEvent = true;
                navigation.bindingsChartClick(chart, e);
            }
        }));

        navigation.eventsToUnbind.push(addEvent(chart.container, 'mouseup', function(e) {
            chart.pointer.normalize(e);
            navigation.bindingsChartClick(chart, e);
        }));
        ...
    }

    H.wrap(H.Chart.prototype, 'initNavigationBindings', function(proceed) {
        var chart = this;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        chart.navigationBindings.removeEvents();

        customInitEvents.call(chart.navigationBindings);
    });
}(Highcharts));

---

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

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts