Chart JS Video Guide

Always wanted to learn Chart JS but needed to understand the instructions in a more visual way? This website covers Chart JS with a more visual approach. The goal here is to ensure higher level of understanding.

Chart JS is a wonder javascript library with many options while being still quite compact. That makes Chart JS a real treasure. There is a lot possible but if you do not understand how, you might not see it. This site covers as much as possible about Chart JS and all the possibilities. Ready to explore?

What is Chart.js?

Often you will hear that Chart.js is a Javascript library or framework to draw charts in Javascript. However, what is quite surprising is that once people use Chart.js they do not see that connection with Javascript.

Many tend to forget that Chart.js is based on Javascript. What I refer to is that they do not see how to combine Javascript arrays along with Chart.js due to the complexity of the canvas tag that Chart.js uses.

A chart is drawn in a canvas tag. The code that Chart.js uses is basically instructions to draw lines, dots, circles and other shapes in a canvas at a precise x and y coordinates. Once you understand that Chart.js is like a “Bootstrap” for canvas to quickly draw charts you have a better grasp of what it is.

Chart.js saves you time as you do not need to learn canvas API. The Chart.js code is a pre-written template that the canvas API can read and immediately draw the chart you desire. This time saving tool helps you get ahead. Without it you would need to learn how to code Javascript that the canvas API can read (or “parse” in coding term).

So let’s refer back to the question: what is Chart.js? This is how I would define Chart.js

“Chart.js is a pre-written chart template coded in JavaScript that the canvas API can read.”
www.Chartjs3.com

This definition gives you a good starting point to work with. You instantly understand it is Javascript but also see the connection why it is slightly different. It is written to be readable for the canvas tag. The canvas API is written in Javascript but the code is slightly different.

Many struggle because they do not see this relationship and cannot really understand Chart.js from a deeper level. Not understanding how to use the canvas API or how to write it in Javascript is not a bad thing. It will restrict your options and limit the interactivity of your chart. This limitation is what many experience as a stumbling block.

Why you want to use Chart.js and the stumbling block

From many who want to use Chart.js they imagine nice clickable and interactive charts. Where data is abstracted from a database or JSON object and once you click a button it changes into something new and refreshing. It should be more than a standard flat chart which we commonly see in Ms. Excel. Sadly, once they realize that the way to use Chart.js requires a solid understanding of multiple disciplines (Javascript, Chart.js, canvas API, MySQL, PHP, Node JS and more) it becomes a real stumbling block to get the chart interactive.

How to break the stumbling block in Chart.js?

The goal of this book is breaking down the stumbling block you experience in Chart.js. I have many videos and after noticing that most commonly watched video topics are about Chart.js in conjunction with interactivity I decided to cover a book about that.

This book is written to help you get there. This is a visual video book. Meaning you will learn but all topics are also in video format for much better explanation and comprehension. Many programmers are visual orientated which is why they work with websites and coding. Seeing it work and understanding the how and the why is key to learning Chart.js.

Why doesn’t the Chart.js documentation cover interactivity topics?

You might have read the Chart.js documentation and discover they do not go in depth on interactivity. The goal of the Chart.js documentation is to help you learn how to use Chart.js. In other words, it is out of their scope. As they want to explain how to draw charts. They do not cover how to create interactivity as it is considered Javascript, canvas API code, MySQL or other unrelated to Chart.js. They and correctly so expect you to visit their site because you want to learn how to draw a chart in Chart.js.

Chart.js is called a JS Framework. A framework consists of two words, which are frame and work. This means you work within a fixed scope or frame. See it as a picture frame which is like a “border” (think css). Everything outside of that border is out of scope and is not covered in Chart.js.

Why? If you want to learn Chart.js with MySQL they expect you to study the MySQL documentation as they are not here to teach you that. While they are useful combined, Chart.js Documentation avoids covering to keep the documentation concise. Else the documentation would become huge and unmanageable. Think about all the topics that they need to cover, which are many other frameworks and other program languages.

Interactive Chart.js Documentation

You have a solid understanding why the current Chart.js Documentation is written the way it is. Now it is time to add a layer of complexity which is covering the interactive parts of Chart.js.

To create an interactive chart you will need to know multiple languages and topics within Javascript.

HTML input fields: Input fields is the starting point of interactivity on a chart.
JavaScript arrays: Without the understanding this you would be able to manipulate data in any way or format.
JavaScript functions: Functions are needed to create a response once a button has been clicked or a hover effect has been triggered.
Chart.js API: Chart.js covers some advanced topics which helps you with canvas tag related items.
Database (MySQL, MongoDB etc): For database connection there are many options possible. Many people are moving towards a fullstack JS programming language. Meaning frontend and backend is JS.
Server Side Scripting Languages (PHP, Nodejs etc): These are essential middleman “communicating” frontend with backend (database or servers).

Let’s cover these topics in the following chapters.

Chapter 1: Creating a fixed chart in Chart.js

Creating a chart with Chart.js is quite straightforward. The Chart.js documentation has a nice demo code. However they tend to leave out some additional explanation. The crucial part are the blocks which are chunks of code that eventually are nicely connected. They have a old demo which originates from Chart.js 2 and I do not recommend that specific code to use. Learn the new method.

These blocks are commonly structured into 3 separate parts but often there might be more if the chart has some custom adjustments. These blocks can be considered the skeleton or base of the Chart.js code. In the videos I often refer to them as:

Setup or Data block
Config or Configuration block
Render or Initialisation block

Setup block

The setup or data block consist of all the default data that we use in our chart. Everything from labels, datasets, data(points) and more.

Config block

The config block consist of the data block reference, the options and the type of chart.

Render block

The render or init (initialisation) block start or activate the process to draw the chart in the canvas tag that it is referring to.

Chart.js skeleton block code video

This video covers how to grab the old demo code from the Chart.js documentation and convert it into the latest version as Chart.js start to move toward this structure.

If you are interested on getting the exact source code. You can find the complete page with more explanation on this specific page.

Chart.js Getting Started Page and Source Code

Which includes the same video but also extra information about the Chart.js blocks and source code.

Chapter 2: Exploring the render, config and data block.

While the render block covers the drawing of chart. Which explains which it is referred to as render or the initialisation block. As initialisation would refer to the beginning, so it starts drawing the chart from the beginning. This becomes more important once you use the chart.destroy API. Which is essential if you want to switch different chart type on a click of a button.

Different chart types in config block

Chart js 3 has many different chart types out of the box. Such as the following chart types.

Bar chart
Line chart
Pie chart
Doughnut chart
Scatter chart
Bubble chart
Radar chart
Polar area chart

Besides the default type of charts there are also more options such as combo chart but those are just the basic options which are build in features in Chart js. Of course if you are like most you always to play around with more advanced charts which are more custom build. For example a histogram chart and more which is a bit more advance and we will cover that later.

However, changing basic chart types is quite easy to do. Looking at Chart.js all you need to do is go to the config block and insert the type of chart you desire.

    // config block
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    };

In here you can see the bold coloured item which should be adjusted. However, what do you need to do if you want to create a layer of interactivity?

While the types is an interesting item, it is quite straightforward. Most chart types have many similarities but some are different and might or may not have an axis such as the pie and doughnut chart. Or they contain a different structure such as a radar chart. We will cover more deeper regarding to this soon but first lets move into how to modify data.

Data block and datasets

The most important part where most of the attention goes is regarding to the dataset. The dataset is the block that covers the drawing of the data points. The goal of the chart is to convey a story of numbers into a picture. Which makes numbers easily digestible for the mind.

While hard-coded the numbers is quite easy making them more soft-coded is a challenge. Main reason for this is due to array manipulation. Being able to manipulate array data helps you showing only the values that needs to be seen.

Many people who work with Chart.js tend to not truly grasp this part. Main reason is they see Chart.js differently. Often, when they discover how big part of Chart.js is based on arrays they realise that Chart.js is truly Javascript but with a huge amount of canvas API code attach along.

How do you modify an array?

Modifying an array usually uses the 4 most common ones but Javascript has an entire list of array methods for you to use. If you want to truly understand this make sure to explore the Chart.js Array Series. It covers many different items.

However, for now giving you the 4 common ones is a good introduction to it. If you want more make sure to explore the series covering 19 different videos for array manipulation.

Push Array Method, adds value to the end of array.
Pop Array Method, removes last array value.
Unshift Array Method, adds value to the beginning of array
Shift Array Method, removes first array value

With these four basic array methods you can do a lot. So how to use them? Let’s grab an example here.

const colors = ['red', 'blue', 'green'];

colors.push('yellow')   // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop()            // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift()          // colors = ['red', 'blue', 'green'];

As you can see each array method does and how to do it is just by attaching the array item which in this case is ‘colors’ and add the array method at the end. If you add a value like with push or unshift you need to define the value that will be added to the array.

That is the easiest way to go on with the array. There is also another more advanced and powerful way called the data structures in Chart.js.

Data structures an advanced way for datasets

Data structures are one of the most powerful and advance way of doing things. Chart js give this item a tiny section which is pity because data structures can truly simplify array manipulation. In essence data structures are javascript objects which can be read directly in your chart.

Chart.js made this because often we get data from JSON or in an object and modifying the object into multiple arrays would not make any sense. So teaching Chart.js to read an existing structure would be much better. Which they nicely introduced in Chart.js 3.1.

To understand this there are multiple videos covering this topic in a separate page. Make sure to watch all of the data structure video.

However, to make sure you understand the essence this video will give you a basic understanding.

Understanding data structures in Chart js

The more advanced topics related to data structures you can find on the data structure page. Highly recommend!

To use data structures we need to reassign the x and y values as we need to indicate to Chart.js where to get the data point instead of before. For this as you notice in the video we use parsing and xAxisKey and the yAxisKey.

To parse means make something readable for the language we are parsing it into. In this case we parse the new data object to make it readable for Chart.js to draw the chart.

The data structures is one of the best things in Chart.js but it is not really clear as it is more something you will only notice once you need to work with data and charts often. Now we have our understanding of the most important part of the data we should focus on functionality.

Chart.js functionality and interactions

Using colors in Chart.js can be very useful for highlighten something. Color coded datapoints can communicate something without words. For example when we color a negative value red and a positive value green we have communicated without saying a word. However intuitive the user most likely will understand it.

The background color and the border color settings are within the data block within the dataset. The video here controls basic color coded options. With green and red depending on the value.

How to assign colors in a chart based on values in Chart js

These options are luckily not yet complicated as it works with arrays. Once you understand how to push values into an array. You can start to play with colors in a more intuitive way. As you notice every time a new skill as been mastered you can now expand your options in Chart.js.

Everything below are specific concepts that will need to be reorganized into chapters.

Understanding difference between Time and Time Series in Chart JS

In Chart.js we often have to draw charts with specific dates. If you are creating a stock market chart where your chart has data for the weekdays only you will have missing or static data the weekends and public holidays. This might be undesirable and you might want to remove those specific dates to keep the chart clean.

Time Chart JS

The type of time is this case not useful. As this will calculate the space based on the difference of the timeframe. For example if the next datapoint would be a week away from the current datapoint it will calculate 7 segments of space. This creates a big gap in our chart. See the gap in the x scales below.

Time Series Chart JS

Chart.js has a nice build in feature to answer this specific matter which is the timeseries. In it will set every date based on equidistant. Equidistant is derived from the words ‘equal’ and ‘distant’. In otherwords, it will set every next datapoint on equal distant no matter the the timeframe between the years. See the image below:

Of course, by doing this we will need to modify how to scale presents the dates as it might overlap if there is a huge amount data squeezed between a segment.

How to Create a Table From Datasets in Chart JS

Creating a table based on the data from Chart.js requires a fine understanding of JavaScript. Specifically, how to create table elements and building a table object in JS.

With Chart.js we are able to extract the data object which is neatly organized for drawing the chart. That same piece of data is useful for creating the table. The video below will show you exactly how.

How to Create a Table From Datasets in Chart JS

How to Create a Sales Funnel Chart in Chart JS

Creating a sales funnel chart in Chart JS is possible. However, it requires some advance plugin customization to get it working. What we need to understand is how to draw custom shapes which converts the bars into a funnel.

If you are ready for some advance level Chart.js. In that case this video will be a great challenge. It will track the sales funnel and every step of the funnel, the funnel shrinks based on the values of dataset.

How to Create a Sales Funnel Chart in Chart JS

How to Save Chart as Image in Chart JS

To save and download a chart or canvas as an image we will need to do some work. By default on right click you can download and save chart as an image. However, this is not quite obvious for many so creating a special download button is a great alternative.

How to Download Canvas as Image on Button Click in Chart JS.

The video below will show you exactly how to achieve this. We will convert the canvas into a PNG file that we can download and save on our device.

How to Download Canvas as Image on Button Click in Chart JS

Skillshare Course Coming Soon!

I have been working on a few Skillshare courses. If you do not have Skillshare and want to explore their options. You can get a week free of Skillshare by clicking this link below. This is an affiliate link that will give me a commission if you sign up, it will cost you nothing during this free period. And the commission I receive will be reinvested in Chart.js tutorials and R&D: