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

👍 this really came in handy, however, had to add shouldComponentUpdate function to prevent endless loop where re-rendering the chart registers event again and fires it.

According to this, Chart.chart should be Chart.getChart(). Apparently, they changed the API since the last time this gist was updated.

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.