Basic Data Visualization with Javascript

Data increasingly permeates every aspect of our lives. It’s increasingly used to inform decisions and add evidence to arguments in both the public and private sector. Consumers are becoming more and more data savvy as more data becomes available to them, but, realistically, most people don’t really care about some numbers in a table. Who’s got the time or attention span for that? Thus the importance of incorporating data visualizations in persuasion or convincing people your product is the best.

With so many options out there, it can be hard to choose where to start. In the spirit of keeping it simple let’s take a deeper dive into the details of chart.js and see what it takes to get a chart up and running .

Chart.js is an open source package first released in early 2015 and is currently on version 2.7.1. There are currently six built-in chart types including:

2. bar

3. radar

4. polar area

5. pie

5. bubble

To use charts.js in a webpage, you need to include the following CDN tag in your page:

Charts created live in html canvas tags. They should include an id for easy DOM manipulation, and any height or width properties (note: if height or width properties are not given, charts will expand to the size of the container they are placed in by default via their responsive property). For example:

The charts.js library includes a Chart class used to build objects. The Chart object takes two arguments:

The JSON object with data for the chart includes the following keys across chart types:

Here is syntax for an example line chart with two lines/datasets regarding daily temperature highs and lows:

and it looks like this (note: the background of the chart is transparent and the background of the container the chart is in is blue):

And here is another example of a basic bar chart code and display:

When creating multiple charts, charts.js includes the ability to change default characteristics across charts using Chart.defaults.global.<property> = “value”

I used this syntax to set the font color in the two example charts:

Related posts:

The man smoking in front of me is only about 10 meters away, but there’s three physical barriers and one change of elevation. I’m sitting outdoors at a cafe — normally I’d sit indoors, but I just…