Displaying Multiple Google Charts in React (react-google-charts)

I was working on displaying multiple GitHub traffic charts using a Google Chart NPM package for React, react-google-charts.

Problem

Out of many charts, only the first one chart is populated.

Question

How do we fix it?

TL;DR

Use a unique graph_id value.

 

Getting Started by Copying & Pasting

Here is the sample code in Quick Start section.

In my case, I needed to display a line chart so updated chartType to LineChart.

So the code for displaying multiple charts is as follows.

But for some reason, it was populating one graph.

 

Resolution

After hours of researching and debugging, I found the problem.

Here you see that each chart had the same id="LineChart".

 

 

 

 

 

 

 

 

 

 

 

Each chart needs to have a unique ID. I chose an easy way out and used shortid NPM package.

Conclusion

Each chart_id needs to be unique.

I hope you don’t struggle to populate multiple Google Chart graphs.

You can find the commit detail on GitHub in my code.