2017-09-21
Displaying Multiple Google Charts in React (react-google-charts)
problemsolving, programming
problemsolving, programming
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 graph_id value.
Here is the sample code in Quick Start section.
https://gist.github.com/dance2die/c2419393ab06a98f8207654536c027c5
In my case, I needed to display a line chart so updated chartType to LineChart.
https://gist.github.com/dance2die/0e82a44251dad3a511341b9906bb9f62
So the code for displaying multiple charts is as follows.
https://gist.github.com/dance2die/9c75c883cee40937db79593591f10eab
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 id="LineChart".
Each chart needs to have a unique ID. I chose an easy way out and used shortid NPM package.
https://gist.github.com/dance2die/3c7bd30aa6f54d3dc62ab279fd2a8847
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.