access-chart-from-ref.js

import React from 'react'
import {render} from 'react-dom'
import {Chart} from 'react-google-charts'


export default class App extends React.Component {
 constructor(props) {
   super(props)
   this.state = {
     data: [],
     options: {}
   };
 }
 componentDidMount() {
   let options = {
     title: 'Age vs. Weight comparison',
     hAxis: {title: 'Age', minValue: 0, maxValue: 15},
     vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
     legend: 'none',

   };

   let data = [
     ['Age', 'Weight'],
     [ 8,      12],
     [ 4,      5.5],
     [ 11,     14],
     [ 4,      5],
     [ 3,      3.5],
     [ 6.5,    7]
   ];
   let chart_events = [
      {
          eventName : 'ready',
          callback  : (Chart) => {
              // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
              this.setState({chartImageURI: Chart.chart.getImageURI()})
          }
      }
    ];
   this.setState({
     'data' : data,
     'options' : options,
     'chart_events' : chart_events
   });

 }
 render() {

   return <div>
     <h2>Welcome to React</h2>
     <Chart chartType = "ScatterChart"
     data = {this.state.data}
     options = {this.state.options}
     graph_id = "ScatterChart"
     width={"100%"}
     height={"400px"}
     legend_toggle={true}
     chartPackage= {['controls']}
     chartEvents = {this.state.chart_events}
     ref={(ref) => this.GoogleChart = ref}
     />
   <div onClick={()=>{
       this.setState({chartImageURI: this.GoogleChart.chart.getImageURI()});
     }}> <h1>CLICK ME TO TURN CHART INTO PNG </h1> </div>

   <div>
     Chart image in base64 :
     {this.state.chartImageURI}
   </div>
   <div>
     <h2>Chart as png</h2>
      <img src={this.state.chartImageURI} />
   </div>

   </div>
 }
}

clearly, this example is outdated.
line 32 -> 40 should be:

let chart_events =  [
      {
        eventName: 'ready',
        callback: (ChartRef) => {
          // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
          this.setState({
            chartImageURI: ChartRef.chartWrapper.getChart().getImageURI(),
          });
        },

      },
    ];

@

clearly, this example is outdated.
line 32 -> 40 should be:

let chart_events =  [
      {
        eventName: 'ready',
        callback: (ChartRef) => {
          // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
          this.setState({
            chartImageURI: ChartRef.chartWrapper.getChart().getImageURI(),
          });
        },

      },
    ];

Thank you very much. I was wondering why I kept getting can get getImageURI of undefined.

it worked like champ
let chart_events = [ { eventName : 'ready', callback : (rcatChart) => { console.log(rcatChart.chartWrapper.getChart()) // Returns Chart so you can access props and the ChartWrapper object from chart.wrapper setChartURI(rcatChart.chartWrapper.getChart().getImageURI()) } } ];
I also saved the image using file-saver library

`<Button
type='button'
size='small'
variant='contained'
fullWidth
onClick={(e)=>{
saveAs(chartURI, 'rcat-chart.png')
}}

Save Graph

`

Thank you everyone here.

It doesn't work like this anymore, where do I find getImageURI?