Cannot render two of the same React component, spe

Question

I can get react google chart to render a single chart without any trouble. However, when I try and add a second chart of a different chart type, it fails to render it. This is because it thinks the second chart type is exactly like the first chart type. Here is a simple example of the problem.

render() {
    return (
        <div>
            <div className="forcastingChart">
                <Chart id="chart1" chartType="ColumnChart" data={this.state.data} width="100%" options={this.state.options}></Chart>
            </div>
            <div className="GanttChart">
                <Chart id="chart2" chartType = "Gantt" columns={this.state.columns} rows={this.state.rows} chartPackages={['gantt']}
                  width="100%" height="9999px"></Chart>
            </div>
        </div>
    );
}

It only successfully renders the chart I have listed first, in this case the ColumnChart. If I were to switch them around, only the Gantt chart would successfully load.

Here is an image of what the previous code renders.

Answer 1

Try to update your react-google-charts node module to make sure that you have proper one with Gantt chart type:

npm update react-google-charts

And you have to use different graph_id properties for each chart:

<div className="forcastingChart">
    <Chart 
        graph_id="chart1" 
        id="chart1" 
        chartType="ColumnChart" 
        data={this.state.data} 
        width="100%" 
        options={this.state.options}>
    </Chart>
</div>
<div className="GanttChart">
    <Chart 
        graph_id="chart2" 
        id="chart2" 
        chartType = "Gantt" 
        columns={this.state.columns} 
        rows={this.state.rows} 
        chartPackages={['gantt']}
        width="100%" height="9999px">
    </Chart>
</div>