Accessing chart instance

[ayozebarrera]

Hi

I tried to access to the chart_instance of ChartComponent but I couldn't... I tried to pass a ref to my component but they are stateless... any advice?

[gor181]

Hey @ayozebarrera,

Looking into it, thanks for contributions

[ayozebarrera]

Great, I tried to give a ref to the chart but they are stateless components and they doesn't accept ref prop.

Just changing components to have state, I could ref them and access chart_instance like this:

...
<Bar ref="myChart" .... />
....

let chart = this.refs.myChart.chart_instance;
chart.update();
//and whatever we need ;)

If I'm wrong on anything tell me to know

[gor181]

Hey @ayozebarrera ,

do you have time for PR? Otherwise I may fix it by EOD or tomorrow morning./

[gor181]

Apologies for delaying this fix, was a pretty though week. On it.

[ayozebarrera]

@gor181 never saw your previous comment. I could try but maybe thursday or friday!

[rycastaneda]

is this now possible?

[gor181]

Hey @ayozebarrera @rycastaneda,

It should work now.

Apologies for the delay.

Cheerio,
Goran

[ayozebarrera]

Dont worry @gor181

I just updated the npm package and I still have the same problem, components are stateless... I guess is a version issue or something

react-chartjs-2  ^1.1.0  →  ^1.2.3 

Edited: Nvm, was my mistake :p

[guifeliper]

It is working for me guys.
I am new to React, so I don't if I should use the createRef in that case, let me know if anyone has a better method.

My code is like that:

...
 const myChartRef = React.createRef();
  const handleResetZoom = () => {
    let chart = myChartRef.current.chartInstance;
    chart.resetZoom();
  };
...

...
     <div className={classes.chartContainer}>
          <Line
            ref={myChartRef}
            data={chartData}
            options={options}
          />
        </div>
...