Zooming

[morozovcookie]

Hello! Can I zoom any chart, like line?

[AdeelK93]

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

[Niraj-Fonseka]

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

[jibees]

Yes !

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

see : chartjs/chartjs-plugin-zoom#64 (comment)

[silvercondor]

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

[silvercondor]

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>
        )
    }
}

[dopry]

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={{ ... }} />
    )
}

[princefishthrower]

@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 👍

[dopry]

@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)

[NPKompleet]

@dopry and @princefishthrower both your methods work but on v2 and v3 of ChartJS respectively.

[cwooldridge1]

const chartRef = useRef(null)

//now youll add this in your return statement
<div className='chart'>
  <div className="floatRight">
    <div class='btn active' 
      onClick={() => chartRef.current.resetZoom()}>
      Reset Veiw</div>
  </div>
  <Line data={config} options={config.options}  ref={chartRef}/>
</div>

[TexPowerDat]

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>
        )
    }
}

Absolute life saver