How to Create Interactive Charts with Simple HTML

Febrilian
2 min readMay 2, 2022

--

Few days ago, I was asked about how to make interactive graphs and charts, something like this page. I have made something like that but with React. The problem is it will only be used for a short presentation, so a full-blown react project would be an overkill, with consuming more time, energy, and will not be as performant as simple html pages. So I searched for solution and I found Google Charts. It is surprisingly very simple, and if you don’t know anything about programming you would still understand what’s going on inside the data processing JavaScript code.

Inserting labels, values, and colors feels super straightforward

This elegant solution to build an interactive graphs is way better compared to what I used with react, which was reactchartjs.

I could build something like this with just 30 lines of code:

Interactive Donut Chart

Here is the code:

Here is the repo and demo of my exploration, recreating the World Bank Report Website with simple HTML and Google Charts (with a little, ignorable Tailwind layouting).

--

--