Backslider
Posts: 2
Joined: Mon May 21, 2018 4:04 pm

Scroll with mouse wheel

I am using highstock and have the x-axis scroll bar enabled. It is strange behavior for my customers that the scroll bar does not respond to the mouse wheel, as every other scroll bar does. Is there a way to enable this?
daniel_s
Posts: 737
Joined: Fri Sep 01, 2017 11:01 am

Re: Scroll with mouse wheel

hi Backslider,

Unfortunately, there is no such feature implemented in Highstock (and also in Highcharts), but you could add a mouse wheel event function and inside of it use setExtremes function for axis. Please take a look on example below:

Live example: http://jsfiddle.net/3q79ey8h/1/

API Reference: https://api.highcharts.com/class-refere ... etExtremes

Best regards!
Daniel Studencki,
Highcharts Developer
Backslider
Posts: 2
Joined: Mon May 21, 2018 4:04 pm

Re: Scroll with mouse wheel

Actually, in my case I don't want to scroll the y-axis or change the extents. I just want to scroll within the scrollable area created by Highstock.

For example, on this chart
https://www.highcharts.com/stock/demo/n ... r-disabled

How could i make the scrollwheel scroll left/right within the scrollable area?

thanks
daniel_s
Posts: 737
Joined: Fri Sep 01, 2017 11:01 am

Re: Scroll with mouse wheel

hi Backslider,

Sorry for missunderstand, but as I said before there is no built-in functionality like that in Highstock. However, you can simply use scrollbar mousedown, mousemove, mouseup functions to handle mousewheel events on your scrollbar. Please take a look at code below:

Code: Select all

var scrollbar = chart.scrollbar
  var track = scrollbar.track.element
  var bar = scrollbar.scrollbar.element
  var moveScrollbar = function(e) {
    var normalizedEvent = scrollbar.chart.pointer.normalize(e),
      options = scrollbar.options,
      direction = options.vertical ? 'chartY' : 'chartX',
      initPositions,
      scrollPosition,
      chartPosition,
      change = e.deltaY / 1000; // Define scroll step

    // Run fake mouseDown event
    scrollbar.mouseDownHandler(e)

    // Initialize scrollbar positions again
    initPositions = scrollbar.initPositions

    // Call mouseMove handler function
    if (scrollbar.grabbedCenter && (!e.touches || e.touches[0][direction] !== 0)) { // #4696, scrollbar failed on Android
      chartPosition = scrollbar.cursorToScrollbarPosition(normalizedEvent)[direction];
      scrollPosition = scrollbar[direction];

      scrollbar.hasDragged = true;
      scrollbar.updatePosition(initPositions[0] + change, initPositions[1] + change);

      if (scrollbar.hasDragged) {
        Highcharts.fireEvent(scrollbar, 'changed', {
          from: scrollbar.from,
          to: scrollbar.to,
          trigger: 'scrollbar',
          DOMType: e.type,
          DOMEvent: e
        });
      }
    }
    // Run fake mouseUp event
    scrollbar.mouseUpHandler(e)
  }

  track.onmousewheel = moveScrollbar
  bar.onmousewheel = moveScrollbar
Live example: http://jsfiddle.net/v0n3ctfL/

Best regards!
Daniel Studencki,
Highcharts Developer
down
Posts: 7
Joined: Sun Aug 06, 2023 1:13 am

Re: Scroll with mouse wheel

Is the example from previous comment still the best way to simulate wheel events?
Thank you.
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Scroll with mouse wheel

Hi!

As from Highcharts v11.1.0, the mouseWheelZoom feature is already bundled inside Highcharts Stock package, so there's no need to simulate wheel event with this custom code: https://www.highcharts.com/blog/changel ... ts-v11.1.0.

In case of any other questions, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer
down
Posts: 7
Joined: Sun Aug 06, 2023 1:13 am

Re: Scroll with mouse wheel

Hi, I'm not looking for zoom, I'm looking for scroll only. And I was hoping for an up-to-date example if possible of simulating such events.
Thank you.
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Scroll with mouse wheel

Apologies for my misunderstanding!

As far as I know, this approach is still up-to-date and since there isn't any built in mouse wheel scrollbar event (except for using scrollablePlotArea: https://api.highcharts.com/highcharts/c ... lePlotArea), I'd stick with this solution.

In case of any other questions related to Highcharts, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer
down
Posts: 7
Joined: Sun Aug 06, 2023 1:13 am

Re: Scroll with mouse wheel

Hi,
I'm not sure what was going on with that example (mousewheel zooming seemed to still be turned on) but I have a working example based on that if anyone is interested: https://stackblitz.com/edit/highcharts- ... e=index.js
Thank you

Return to “Highcharts Stock”