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.