CODEWITHSUNDEEP
reactjshighcharts
Drew Scatterday
Drew Scatterday

Reputation: 377

HighCharts zoom with mouse wheel in react

Intro

Hi I'm new to react and new to Highcharts but have worked with js before. I have a zoom function, I'd like to convert this to react code. I'm having hard time figuring out how to use Highcharts.Chart.prototype.callbacks.push in the context of react.

What I'm trying to do

I'm trying to create a zoom function that is smooth with the mouse wheel on a stock chart. The popular platform trading view has a very smooth zoom and I'm trying to do something similar to that.

The code:

I have the code working decently in a js fiddle https://jsfiddle.net/drewscatterday/84shran6/ but I'm having hard time converting this to react.

I have tried doing this in my react code but had no luck:

 const handleScroll= (e) =>{
        e.preventDefault();
        var chart = Highcharts.chart;
        var xAxis = chart.xAxis[0],
        extremes = xAxis.getExtremes(),
        newMin = extremes.min,
        output = [];

        if (e.deltaY < 0) {
            xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
        }
        else {
            xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
        }
    }

<div className="Chartdisplay__chart" id="chart" onScroll={handleScroll}>
                <StockChart options={stockOptions} highcharts={Highcharts} />
</div>

I have also just tried adding the function straight up like this but also had no luck:

let ar = [];
  (function(H) {
    Highcharts.Chart.prototype.callbacks.push(function(chart) {
      H.addEvent(chart.container, 'mousewheel', function(e) {
        var xAxis = chart.xAxis[0],
        extremes = xAxis.getExtremes();

        if (e.deltaY < 0) {
            xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
        }
        else {
            xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
        }
      });
    });
  }(Highcharts));

Thank you for anyone who takes the time to read this and help me :)

Upvotes: 0

Views: 967

Answers (1)

Sebastian Hajdus
Sebastian Hajdus

Reputation: 1560

To extend Higstock in React.js put the code that you want to wrap before the configuration object (options).

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'

  (function(H) {
    Highcharts.Chart.prototype.callbacks.push(function(chart) {
      H.addEvent(chart.container, 'wheel', function(e) {
        var xAxis = chart.xAxis[0],
        extremes = xAxis.getExtremes(),
        newMin = extremes.min;
        
        console.log(extremes); 
        console.log(newMin);
        
        if (e.deltaY < 0) {
            xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
        }
        else {
            xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
        }
      });
    });
  }(Highcharts)); 

const options = {
  title: {
    text: 'My chart'
  },
  plotOptions: {
    series: {
        enableMouseTracking: true
    }
}

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

Live demo: https://stackblitz.com/edit/react-hmvz2z?file=index.js

Upvotes: 1

Related Questions