7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. ChartJS

Build a Dynamic Dashboard With ChartJS

Scroll to top
Read Time: 15 mins

Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. Best of all, it's easy for designers to get up and running. We'll be focusing on the pieces of the library that get you up and running with beautiful and functional charts fast. We will build a mobile-friendly dashboard from start to finish.

Looking for a Quick Solution?

If you're looking for a quick solution, there's a great collection of chart and graph scripts over at Envato Market. Starting from just a few dollars, they're a quick way to get this functionality in your website or app. Here's one of our favourites — "Chartli" — for creating interactive graphics (that look gorgeous!)

Getting Started

We're going to build our dashboard on top of HTML5 Boilerplate. Download the zip file, or clone the repository via Git. We're going to name our project directory "chartjs_dashboard", and drop all of the files directly there.

Next, we'll grab ChartJS. Go to the uminified version at raw.github.com/nnnick/Chart.js/master/Chart.js, and copy the contents into your js/plugins.js file. Having the unminified version will make errors more readable if you run into them.

Tip: in production, you would use the minified version of the JavaScript, to make the dashboard more performant.

Your file structure should look like this:

Note: this does not include some of the files included in H5BP that we won't be using.

Color Palette

Before we get into the coding of the site, let's start by setting up a color palette that we will use throughout the design. By doing this, we can establish a future "style guide" of sorts; this is a common practice for basically any given design.

If you are building the dashboard with a particular brand in mind, start by using the brand's colors. Today, we will define two main colors and two ancillary colors. We will also use shades or faded out versions of these colors.

  • dark blue: #637b85
  • green: #2c9c69
  • yellow: #dbba34
  • red: #c62f29

We will also use a lighter shade of the dark blue, #d0dde3. Lastly, we will be utilizing grayscale colors.

ChartJS Basics

ChartJS uses the canvas element. The canvas element provides a JavaScript-only interface to draw pixels to a given rectangle area. It is often compared to SVG, which offers a DOM node based solution to creating vector graphics in the browser. However, pixels drawn to the canvas element are not kept in memory and thus don't respond to JavaScript events.

But enough with the tech talk - how do we get started quickly with ChartJS?

Luckily, the ChartJS homepage has plenty of examples to get us started quickly. The basic pattern is to create the canvas element in HTML, select it with JavaScript, and create the Chart while passing in the data the chart is built from.

The above example would assume that you had defined `data` and `options` as objects, and would produce a line graph accordingly.

In our example, we will use the Doughnut graph, the Line graph, and the Radar graph. These graphs will represent different business-oriented metrics, but of course you can take this and adapt it to your needs.

Page Markup

Let's start by defining some basic HTML for the layout of our page.

Here, we can see that we have a basic header, middle, and footer section. We are using the .wrapper class and .push class to create a sticky footer (see here for more info). We will be creating our layout to be mobile friendly first, and to scale up from there. There are a few tricks we will pull along the way, but this structure will do a lot of the work for us.

Before We Go Too Far...

Note that canvas doesn't play extremely well with media queries. For this tutorial, we will be creating a workaround to allow the charts to be redrawn at different sizes in the JavaScript.

Inside our main.js file, we will need to have a sizing function that is triggered by a window resize. We will also need a "redraw" function to fire after the resizing function fires. Finally, when we redraw the charts, we don't want them to animate in, as if this is the first time they are being drawn.

If this seems a little daunting, don't worry! Ask a question in the comments, and we and the Tuts+ community will help you understand fully!

Some CSS to Get Us Started

We want to set up some basic CSS structures to get us started. HTML5 Boilerplate of course includes normalize and some other defaults that you can change, but for the sake of the tutorial, we will write our CSS after the line "Author's custom styles".

Here, we define the necessary CSS for the sticky footer, as well as a button class, a self-centering container class, a class for containing our canvas elements inside of our widgets, and our widgets themselves. We will also need to add the Google font we are defining for the body by including this in our head tag.

The Doughnut Graph

Doughnut graphs are a lot like pie graphs, except they have part of the middle cut out. By default, ChartJS defines that 50% of the area of the graph should be left out; we will stay with this default. The code to create the doughnut graph is shown below.

Here, you can see that we have defined our doughnut graph's data and colors. This is all that is needed to make the doughnut graph work. However, what are each of the sections representing? Unfortunately, ChartJS does not yet have an easy way to define labels for the doughnut graph; however, we can make our own legend to describe each of the different sections. Modify the doughnut widget's html to include the following.

We use these li's by their classes very simply in the CSS, by leveraging the `:before` pseudo-class.

Next, we want to have a nice "thumbs-up" in the center of the doughnut. This involves some CSS trickery, including a version of Uncle Dave's Ol' Padded Box to get the circle to be responsive. We will use the span with the class of .status to achieve this circle. Add the following rules to main.css:

Perhaps the most glaring element standing out here is the use of the data URI for the background image. This allows us to avoid an extra HTTP request, and is syntactically synonymous with using an actual http url. We are also setting this element to be positioned absolutely inside its .widget element, which we previously set to be position relative.

Let's now go ahead and set up the widget typography. We only use h3 and p elements inside the widget; here is the accompanying css.

The margin and padding rules on the h3 element allow the element to stretch to the edge of the widget element over the top of the widget's 12px of padding. We also set the top margin to 0 on the p element to fit closer to the header of the widget.

The Line Graph

One of the most useful features of ChartJS is that some of the charts allow for multiple datasets. These datasets will be drawn to the same chart sequentially, allowing for one dataset to be compared to another. A perfect example of this being useful is in line graphs. We will use two datasets to explore this functionality.

A few things to note in this new code: first, we are reusing the variables we used to build the doughnut graph. This is completely valid in JavaScript, and actually slightly reduces the memory used by the script overall. However, this may cause confusion in the future, and if you plan to adapt this code to use in production, it may be more effective to use new variables for each new chart you create.

Next, the line graph supports labels. This is important, as it allows us to avoid creating HTML-based legends. However, it is also important that the data points line up with the labels given. In this example, our first data-point in the first dataset, 65, matches to "Mon" in the labels.

Lastly, our fillColors for these datasets are RGBa versions of the colors we previously defined (dark blue and yellow). We found the RGB values by inputting the colors into Photoshop's color picker, but this can be done using any of a number of colorpicker tools.

We will also add markup for a few buttons and a human-readable range. The final line widget html looks like the following.

We can polish the extra HTML and help users connect the dates with the following CSS:

Radar Graph

Radar graphs are useful to distill a selection of variables into a singularly readable graph to get a general perception of the interplay between the different variables. In our example, for instance, we will be exploring the idea of customer service, based on the number of times certain keywords are mentioned. On a radar graph, the points plotted will create a shape. That shape can give us an overall sense of the effectiveness of customer service.

Let's see how this is created! Once again, we will reuse our variables from before.

And the accompanying HTML will look like the following:

Intuitively, we can understand that a shape that is further up and to the right will be better than a shape that is further down and to the left. However, we don't lose the specific data available to us within the graph at a granular, single-variable level. In this case, the word "rude" is being mentioned often, but the overall sense of customer service seems positive based on other keywords.

Making it All Responsive

We've already set up our canvas elements to be responsive with the JavaScript we used to respond to window resizing. Now, we need to make our CSS responsive using media queries. Here is the css we will use to do this.

The first thing to notice about this CSS is that all of the media queries are min-width-based only. This means that we are designing from the lowest width screens and adding new rules as we move up. Our design does not require a lot of changes at each breakpoint, but this pattern is a best-practice in designs of all scales.


We can see some basic layout changes at each breakpoint, including the primary container element's width as well as our treatment of the .third class, which we use on each of the widgets. Below 400, we stack all of the widgets on top of each other. Between 400 and 600, we make the first two widgets half-width columns, and the third widget (the radar graph) full-width. Finally, above 960, we use three columns inline.


This tutorial has taken you through the basic steps for creating a dashboard using ChartJS. The fundamental concepts described here should help you create more involved projects using ChartJS, and should also encourage you to think about responsive design from the perspective of bottom-up.

What experiences have you had with charting libraries? Do you use SVG or canvas for charting data? What things do you wish ChartJS would do that it doesn't? Add your comments below!

Learn JavaScript: The Complete Guide

We’ve built a complete guide to help you learn JavaScript, whether you’re just getting started as a web developer or you want to explore more advanced topics.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.