Creating responsive charts with JavaScript

Back in the day when web developers didn’t have to care about responsive layouts, life was easier in some cases. For example – charts. There are quite a lot of types of charts and in the beginnings of responsive web, creating responsive charts surely wasn’t a trivial task. But nowadays, given that there are thousands of different JavaScript libraries, it is no surprise that there are excellent libraries for charts. One of my favorite is Chart.js. In case you want to use it on WordPress, you can code it manually or use a WordPress Charts plugin.

Documentation on the website is quite extensive and explains everything there is about the library, but just in short, this is how it goes:

Load chart.js script, you can download it locally or use CDN link. After that, insert the global chart configuration – this is the code which starts with…

And now you can choose the chart – all you need to do is add data structure for any of the charts:

The next step is to initiate the chart:

And then use HTML canvas element where the script will draw the chart:

And that’s all. Have a look at my CodePen example with a working chart. I used example from the website documentation, with only difference that I activated the responsive mode (you can find it in global settings).