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).

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Febrilian
Febrilian

Written by Febrilian

Software Engineering & Medicine

No responses yet

Write a response