Calling Ref from a parent component about react-chartjs-2 HOT 8 CLOSED

Child Component:
Base64 string works

class Child extends React.Component {
  componentDidMount() {
    var pieChart = this.refs.chart.chart_instance.toBase64Image();
    console.log(pieChart);
  }

  render() {
    return(
      <Pie ref='chart' data={data} options={options} />
    )
  }
}

Parent Component
Cannot access ._chart_instance

class Parent extends React.Component {
  componentDidMount() {
    var pieChart = this.refs.chart.chart_instance.toBase64Image();
    console.log(pieChart);
  }
  render() {
    return(
    <Child ref='chart' data={data} options={options} />
    )
  }
}

from react-chartjs-2.

Hey @EmirGluhbegovic ,

Can you make a fiddle or similar, would really help to narrow it 👍

thanks

from react-chartjs-2.

I have a feeling there is a way to refer to the chart_instance in the parent that I am not aware off possibly?

from react-chartjs-2.

So you have a deep structure. What I can see is that you get the reference in the Child componentDidMount.

Try to make the Child as:

class Child extends React.Component {
  componentDidMount() {
    this.chart_instance = this.refs.chart.chart_instance;
  }

  render() {
    return(
      <Pie ref='chart' data={data} options={options} />
    )
  }
}

And the Parent as:

class Parent extends React.Component {
  componentDidMount() {
    var pieChart = this.refs.chart.chart_instance.toBase64Image();
    console.log(pieChart);
  }
  render() {
    return(
    <Child ref='chart' data={data} options={options} />
    )
  }
}

Let me know how it goes.

from react-chartjs-2.

@gor181 Tried exactly as you have said, getting an error
this.refs.lineChart.toBase64Image is not a function.
I made sure I have
import ChartsJS from 'react-chartjs-2';
in the parent also. Unless this.chart is still not providing access to the chart_instance ?

from react-chartjs-2.

@EmirGluhbegovic Yes I did this blindly, please check corrected example.

from react-chartjs-2.

@gor181 Thanks Bro, that works perfectly now. Guess its my lack of React there so not a react-chartjs-2 issue. Thanks for the help again.

from react-chartjs-2.

No problem, glad it's working. It's not your react, we people tend to overcomplicate sometimes 👍 🍺

from react-chartjs-2.