React-chartjs-2: Zooming

Created on 2 Mar 2017 · 8Comments · Source: reactchartjs/react-chartjs-2

Hello! Can I zoom any chart, like line?

Source

morozovcookie

Most helpful comment

any idea how to implement the chart.resetZoom() method from the plugin?

Answering my own question, hope it helps someone out there.
Basically you need to create a ref inside the chart object and call the resetZoom from the ref.chartInstance
you can use the local state or a let variable, doesn't really matter

class TestLineChart extends Component{
constructor(props){
    super(props)
    this.state={
    data:{},
    options:{}
    }
    this.ref={
        lineChart:React.createRef()
    }
    }
    render(){
        return(
        <div>
        <Button onClick={()=>{
            this.ref.lineChart.chartInstance.resetZoom()
            }}>
        Reset Zoom
        </Button>
        <Line 
            data={this.state.data} 
            options={this.state.options} 
            ref={(reference)=>(this.ref.lineChart=reference)}  />
        </div>
        )
    }
}

silvercondor on 15 Jun 2020

👍3

All 8 comments

Could you maybe use a plugin like this one? https://github.com/chartjs/chartjs-plugin-zoom

AdeelK93 on 9 Mar 2017

did anyone get https://github.com/chartjs/chartjs-plugin-zoom to work ?

Niraj-Fonseka on 13 Jul 2017

👍2

Yes !

import * as zoom from 'chartjs-plugin-zoom';

see : https://github.com/chartjs/chartjs-plugin-zoom/issues/64#issuecomment-281764889

jibees on 5 Sep 2017

👍2

any idea how to implement the chart.resetZoom() method from the plugin?

silvercondor on 15 Jun 2020

any idea how to implement the chart.resetZoom() method from the plugin?

class TestLineChart extends Component{
constructor(props){
    super(props)
    this.state={
    data:{},
    options:{}
    }
    this.ref={
        lineChart:React.createRef()
    }
    }
    render(){
        return(
        <div>
        <Button onClick={()=>{
            this.ref.lineChart.chartInstance.resetZoom()
            }}>
        Reset Zoom
        </Button>
        <Line 
            data={this.state.data} 
            options={this.state.options} 
            ref={(reference)=>(this.ref.lineChart=reference)}  />
        </div>
        )
    }
}

silvercondor on 15 Jun 2020

👍3

FYI in case you end here like me but need to use hooks...

function Chart() {
    const chartRef = useRef(null)
    const resetZoom = () => {
       chartRef.current.chartInstance.resetZoom()
    }
    return (
       <Button onClick={resetZoom} />
       <Line ref={chartRef} data={{ ... }} options={{ ... }} />
    )
}

dopry on 2 Mar 2021

@dopry - just a heads up, you should be able to call resetZoom() right on the chartRef.current object i.e. chartRef.current.resetZoom()- not any chartInstance object - guess it was just a copy-paste error from above 👍

princefishthrower on 30 Mar 2021

@princefishthrower, not a typo at all. here is what happens if I do as you recommend.

ReadingsLineChart2.js:94 Uncaught (in promise) TypeError: lineChartRef.current.resetZoom is not a function
    at resetZoom (ReadingsLineChart2.js:94)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at HTMLUnknownElement.sentryWrapped (helpers.ts:87)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
    at HTMLDivElement.sentryWrapped (helpers.ts:87)

dopry on 31 Mar 2021

Was this page helpful?

0 / 5 - 0 ratings