Error when having multiple charts

[maccyber]

I use next.js and react-google-charts - both on latest version.

When i have multiple charts on a page, it throws me the following error

All the charts still work.

Example code in next.js:

import { Chart } from 'react-google-charts'

export default () => (
  <div>
    <Chart
      chartType="ScatterChart"
      data={[['Age', 'Weight'], [8, 12], [4, 5.5]]}
      options={{}}
      graph_id="ScatterChart1"
      width="100%"
      height="400px"
      legend_toggle
    />
    <Chart
      chartType="ScatterChart"
      data={[['Age', 'Weight'], [8, 12], [4, 5.5]]}
      options={{}}
      graph_id="ScatterChart2"
      width="100%"
      height="400px"
      legend_toggle
    />
  </div>
)

And thanks for this awesome wrapper btw, it plays a vital part in our site at https://bigfive-test.com

[oehm-smith]

I get the same error if I have 2 separate pages.

//  App.js
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import ExampleChart01 from "./ExampleChart01";
import ExampleChart02 from "./ExampleChart02";

class App extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
                <div>
                    <h2>Example 1</h2>
                    <div><ExampleChart01/></div>
                    <hr/>
                    <h2>Example 2</h2>
                    <ExampleChart02/>
                </div>
            </div>
        );
    }
}

export default App;

----
ExampleChart01.js
import { Chart } from 'react-google-charts';
import React from 'react';

class ExampleChart01 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: {
                title: 'Age vs. Weight comparison',
                hAxis: { title: 'Age', minValue: 0, maxValue: 15 },
                vAxis: { title: 'Weight', minValue: 0, maxValue: 15 },
                legend: 'none',
            },
            data: [
                ['Age', 'Weight'],
                [8, 12],
                [4, 5.5],
                [11, 14],
                [4, 5],
                [3, 3.5],
                [6.5, 7],
            ],
        };
    }
    render() {
        return (
            <Chart
                chartType="ScatterChart"
                data={this.state.data}
                options={this.state.options}
                graph_id="ScatterChart"
                width="100%"
                height="400px"
                legend_toggle
            />
        );
    }
}
export default ExampleChart01;

// ExampleChart02.js - exactly the same but different name

https://stackoverflow.com/questions/35315203/how-to-solve-google-charts-loader-js-can-only-be-loaded-once#35632917 suggests moving google.charts.load('current', {'packages':['corechart']}); to be only used once. That seems to be wrapped up in <Chart.

NOTE - If you use the same graph_id the 2nd and subsequent graphs won't appear. But if different they do appear (however the error as reported still occurs).

[duanefields]

Fixed by https://github.com/rakannimer/react-google-charts/pull/199

[deepfriedbrain]

Thanks, @rakannimer . I just updated to v1.6.4 and I still get this error with multiple charts. Do I need to change something in my code?

[rakannimer]

Thanks @deepfriedbrain for reporting.

Should be fixed in 1.6.5

Can you give it a try ? Cheers !

[deepfriedbrain]

Unfortunately, I'm still getting the error with 1.6.5.

[rakannimer]

My bad ! I forgot to build the code 😨 !

Latest is on 1.6.6

[deepfriedbrain]

It is better now but I'm still getting the errors in some cases:

Before 1.6.6:

Navigate to Component1, which has 4 charts: I would get the error 4 times. Navigate to Component2, which has 3 charts, I would get 3 more errors. Total 7 errors in the console.

With 1.6.6:

Navigate to Component1, which has 4 charts: No error. Navigate to Component2, which has 3 charts, I get 1 error. Total 1 error in the console.

So it has improved but not completed fixed yet.

[duanefields]

Yes I believe there is still a race condition here somewhere.

[FabianSchuessler]

This issue was only fixed for multiple charts on one page. The issue still persists for charts on different pages.