How do i add mouse wheel code in Angular2 highcharts in typescript

Question

I need to add the mouse wheel in the highcharts vertical scrollbar. I got the code in this fiddle http://jsfiddle.net/d3r8pb7c/ but that code written in jQuery format. When i try to add the code in the typescript in the following way mouse wheel not working.

this.options = {
            chart: {

                events: {
                    wheel: function (event) {
                        var delta, extr, step, newMin, newMax, axis = this.xAxis[0];
                        var dataMax = this.xAxis[0].dataMax,
                            dataMin = this.xAxis[0].dataMin,
                            newExtrMin,
                            newExtrMax;

                        e = this.pointer.normalize(event);
                        delta = e.detail || -(e.deltaY / 120);
                        delta = delta < 0 ? 1 : -1;

                        if (this.isInsidePlot(e.chartX - this.plotLeft, e.chartY - this.plotTop)) {
                            extr = axis.getExtremes();
                            step = (extr.max - extr.min) / 5 * delta;

                            if ((extr.min + step) <= dataMin) {
                                newExtrMin = dataMin;
                                newExtrMax = extr.max;
                            } else if ((extr.max + step) >= dataMax) {
                                newExtrMin = extr.min;
                                newExtrMax = dataMax;
                            } else {
                                newExtrMin = extr.min + step;
                                newExtrMax = extr.max + step;
                            }

                            axis.setExtremes(newExtrMin, newExtrMax, true, false);

                        }

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

Please help me if anyone add the mouse wheel event in the Highcharts angular2 typescript.

Try to bind to context like `wheel: (function (event) {}).bind(this)` — User3250, Oct 17 '18 at 05:19

score 2 · Accepted Answer · answered Oct 17 '18 at 17:18

2

First of all, the code is not dependent on jQuery, so it's not necessary to import it.

I tried to include the code from the attached JSFiddle, by creating new module and importing it in within the component file. Actually, I don't know what you're doing wrong, but my example is working well.

import Stock from 'highcharts/modules/stock';
import Wheel from '../plugins/wheel-event'

Stock(Highcharts)
Wheel(Highcharts)

Live example: https://stackblitz.com/edit/highcharts-cloning-chart-s7kztw

answered Oct 17 '18 at 17:18

daniel_s

3,635
1
8
24

Thank you for the answer it look great. But i am using angular2-highcharts wrapper. How do i implemented the code in angular2-highcharts – G Pandurengan Oct 18 '18 at 16:58
It should work the same (or very similar), but I need to see the code of your application to find out the source of that error. Could you try to create minimal working example and provide me with it? Are you sure that the `wheel-event.js` exists? – daniel_s Oct 19 '18 at 09:19
VM550:1 Error: (SystemJS) WheelEvent_1.default is not a function. This error coming. Could you please let me know what is the use of Wheel(Highcharts). – G Pandurengan Oct 19 '18 at 14:47
I added like this import * as Wheel from wheel-event.js it's working. Thankyou. But I found a issue with in the scroll, when we scroll multiple times bar height decreasing. Could you please tell why this happen in your code. – G Pandurengan Oct 19 '18 at 15:13

How do i add mouse wheel code in Angular2 highcharts in typescript

1 Answers1