

In this article, I’m going to use Chart.js 2.0 and it’s updated syntax. It recently reached version 2.0, which came with a few fundamental syntax changes to make code more consistent, as well as offer mobile support. It comes with eight different chart types that will cover almost all of your data visualization needs.Ĭhart.js is actively maintained to a high standard by the open source community. Chart.js is one of the quickest and easiest libraries to learn that doesn’t heavily limit your options. In my experience, charting libraries fall onto a spectrum of complexity, where more complex libraries offer deeper customization, but have steeper learning curves. It’s designed with simplicity in mind, yet is extremely customizable. I chose Chart.js because it can be learned and leveraged quickly.

Using six stylish examples, I’ll demonstrate how you can use Chart.js to visualize data on your website, as well as configure it to meet your needs. In this article I’ll introduce you to a JavaScript charting library called Chart.js. Using charts when it’s beneficial, will make your website easier to understand and visually more appealing. Everyone understands basic charts at the same speed, the same can’t be said for paragraphs rife with technical jargon.

That’s where charts and graphs come in - they can make complicated statistical relationships obvious and intuitive, as well as more accessibile to non-English speakers.

Humans, after all, are not wonderful at understanding long lists of raw numbers. If your website is data-intensive, then you will need to find a way to make that data easy to visualize. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! This article was peer reviewed by Tim Severien and Simon Codrington. If you want everything in one place to get up to speed on modern JavaScript, sign up for SitePoint Premium and download yourself a copy. This article is included in our anthology, Modern JavaScript.
