Search code examples
javascripthighchartsscrollbarxrange

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


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


Solution

  • 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;
                });
            }
        });
    }());