React-chartjs-2: Accessing chart instance

Created on 23 May 2016 · 9Comments · Source: reactchartjs/react-chartjs-2

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?

Source

ayozebarrera

All 9 comments

Hey @ayozebarrera,

Looking into it, thanks for contributions

gor181 on 23 May 2016

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

ayozebarrera on 23 May 2016

👍1

Hey @ayozebarrera ,

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

gor181 on 23 May 2016

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

gor181 on 30 May 2016

👍1

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

ayozebarrera on 31 May 2016

is this now possible?

rycastaneda on 1 Aug 2016

Hey @ayozebarrera @rycastaneda,

It should work now.

Apologies for the delay.

Cheerio,
Goran

gor181 on 6 Aug 2016

👍1

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

ayozebarrera on 9 Aug 2016

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>
...