I was working on displaying multiple GitHub traffic charts using a Google Chart NPM package for React, react-google-charts.
Out of many charts, only the first one chart is populated.
How do we fix it?
Use a unique
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
So the code for displaying multiple charts is as follows.
But for some reason, it was populating one graph.
After hours of researching and debugging, I found the problem.
Here you see that each chart had the same
Each chart needs to have a unique ID. I chose an easy way out and used shortid NPM package.
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.