Chart.js is a popular library that produces fast, elegant, and interactive charting and data visualization solutions using HTML and JavaScript. The API is very straightforward and easy to use. Chart.js has been widely deployed in admin dashboards and other user-friendly metrics-driven applications, working seamlessly with responsive web design libraries such as Bootstrap 4.

Chart.js also appears in statistics and data analytics oriented applications, though it is less known in the data science community compared to the more heavyweight D3.js. While no tool alone can solve all data visualization problems, I argue that Chart.js (together with its rich set of plugins) is able to handle most of the data visualization requests during the exploratory data analysis (EDA) phase of everyday data science practices. Chart.js is especially useful when such tasks are performed in a web application that is accessible to various stakeholders—who simply want to discover useful information from data to support their decision-making processes—regardless of their level of coding in a programming language.

For univariate data visualization, Chart.js is very handy for plotting summary statistics and distributions via the bar chart (histogram of a numerical variable as well as frequency counts of a categorical variable), the pie chart or the doughnut chart (relative frequencies of a categorical variable), and the line chart (values of a time series variable). The tooltip element of Chart.js makes it convenient for the user to instantly locate the exact number behind a bar or a slice of pie.

For multivariate data visualization, in many cases, the user can simply add a second, third, … variable to the one-variable chart by appending data to the value for the datasets key, if it is appropriate to compare these variables with each other. Chart.js creates a “dataset” label for each new variable and shows it in a different color. (See official examples here and here.) When the user clicks on such labels/legends, Chart.js will toggle the visibility of the clicked variables, which essentially performs a select/filter operation.

Chart.js is also good for presenting some important features of a two-way table with an intuitive interface. Here I give two examples (here and here) of two-variable data visualization for EDA in Chart.js. My first example uses the scatter chart to plot a y variable against an x variable, where y is categorical. My second example utilizes the bubble chart to plot a categorical y against a similarly categorical x. The flexibility of Chart.js makes it simple to customize configurations using callbacks, and data can be freely manipulated through the API itself. In my second example, the raw data numbers in the r dimension (radius of the bubbles) are correctly squared and rounded as they are displayed in the tooltips:

I am sure there are numerous other ways in Chart.js to play with the data and the charts, and hopefully, this article will help us get started.