Is there a way to get Highstock Scrollbar to respond to trackpad?

Question

The Highstock scrollbar only responds when you physically click and drag the bar or use the arrow keys. However ideally i'd be able to use the track pad while hovering over the scrollbar or graph itself. I've searched the Highstock/Highcharts API and found nothing that points toward a solution so i thought i'd query the internet hive mind

Looked into eventing and the followTouch attributes to no avail

score 0 · Answer 1 · answered Dec 20 '18 at 09:55

Scroll by mouse wheel or trackpad is not implemented in Highcharts by default, but you can add it:

(function(H) {

    //internal functions
    function stopEvent(e) {
        if (e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            e.cancelBubble = true;
        }
    }

    //the wrap
    H.wrap(H.Chart.prototype, 'render', function(proceed) {
        var chart = this,
            mapNavigation = chart.options.mapNavigation;

        proceed.call(chart);

        // Add the mousewheel event
        H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {

            var delta, extr, step, newMin, newMax, axis = chart.xAxis[0];

            e = chart.pointer.normalize(event);
            // Firefox uses e.detail, WebKit and IE uses wheelDelta
            delta = e.detail || (e.wheelDelta / 120);
            delta = delta < 0 ? 1 : -1;

            if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                extr = axis.getExtremes();
                step = (extr.max - extr.min) / 5 * delta;
                axis.setExtremes(extr.min + step, extr.max + step, true, false);
            }

            stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
            return false;
        });
    });
}(Highcharts));

Highcharts.chart('container', ...);

Live demo: http://jsfiddle.net/BlackLabel/wjovscb9/

Yeah i did eventually find that jsfiddle and it was super helpful - i did make a few tweaks so that i would force it to stay within the axis bounds and scroll more smoothly - i was thrown by the syntax and how it differed from what was currently in our files ( we run off dart and have only a few files running pure js ) — Poncher, Dec 21 '18 at 14:50

score 0 · Accepted Answer · answered Dec 21 '18 at 14:53

SELF ANSWER: see additionall logic to only add listener to subset of charts that we specifically want the trackpad behavior on. Additionally i added some logic to force the steps to be whole numbers and not go into the negative or super positive territory. Works awesome ! Highcharts.wrap(Highcharts.Chart.prototype, 'render', function(proceed) { var chart = this;

        proceed.call(chart);

        if (chart.options['chart']['type'] === "xrange" && chart.options['yAxis'][0]['scrollbar']['enabled']) {
            // Add the mousewheel event
            Highcharts.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function (event) {

                var delta, diff, extr, newMax, newMin, step, axis = chart.yAxis[0];

                e = chart.pointer.normalize(event);
                // Firefox uses e.detail, WebKit and IE uses wheelDelta
                delta = e.detail || -(e.wheelDelta / 120);
                delta = delta < 0 ? 1 : -1;
                /* Up or Down */

                if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
                    extr = axis.getExtremes();
                    diff = extr.max - extr.min;
                    step = diff / 5; /* move by fifths */
                    step = step > 1 ? Math.ceil(step) : 1; /* Min step is 1, Move by whole numbers */
                    step = step * delta; /* Up/Down */
                    // todo some logic for refuse to move ?
                    if (step > 0) {
                        /* UP */
                        if (extr.max + step > extr.dataMax) {
                            newMax = extr.dataMax;
                            newMin = extr.dataMax - diff; /* Enforce window not getting too small */
                        } else {
                            newMin = extr.min + step;
                            newMax = extr.max + step;
                        }
                    } else {
                        /* DOWN */
                        if (extr.min + step < 0) {
                            newMin = 0;
                            newMax = diff;
                        } else {
                            newMin = extr.min + step;
                            newMax = extr.max + step;
                        }
                    }
                    axis.setExtremes(newMin, newMax, true, false);
                }

                stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
                return false;
            });
        }
    });
}());

Is there a way to get Highstock Scrollbar to respond to trackpad?

2 Answers2