Three things you can learn in chart.js from mimicking Nyan cat

ChartJS is a great javascript framework to customise your own charts. It is so flexible and powerful, that in this blog you will mimic the viral Nyan cat to learn to:

  1. Update data sets in a graph with .
  2. Replace a data point with an image using (this is where the Nyan cat will be placed)
  3. Create a filled line chart with multiple gradient colours

You can find the live demo in codepen or in jsfiddle .

Let’s start with the basics

Installing Chart.js

Install chart.js by adding its CDN link to the of your code.

Creating the container for your graph in the HTML

Chart.js uses canvases to add the graphs. Start by including a tag in your . with an id attribute. In this example, we’ll set the height to 300px, but feel free to set it to any other value that suits you.

Selecting the data points

To give the impression that the waves are moving, we’ll need to alternate between two data sets. The x-axis position of the data points in both datasets are identical. We will only change the y-axis position, so that certain data points go up and down.

For this example, we’ll use these two data sets in the file:

Creating the colourful gradient of the chart

In my previous blog, we created a gradient chart that changed in colour from from left to right. In this new chart, we’ll create a gradient that changes colour from top to bottom.

We first need a variable to store our gradient, so let’s add the following:

will return an object that provides methods and properties for drawing on our canvas with the id nyancat.

We will now add the colours for the stroke and the fill:

The createLinearGradient(x0, y0, x1, y1) method creates a linear gradient object. It has four parameters: , the coordinates of the start point of the gradient and , the coordinates for the end point.

We use for the start point, as the graph starts at the top and , as the graph finishes at the height of its canvas (That’s why used in the canvas tag)

The addColorStop(stop, colour) method specifies the colours and their position (0–1) in the gradient object.

Formatting the data

We currently have JSONs for both our data sets, but we need to map it to the following arrays:

Creating the cat image for the last data point

Use to create a new object and set its to the link of your image.

Plugins are a way to modify a chart as it is being created. We’ll use the following plugin to set our object as the image of our last data point (that’s why we have .

Creating the chart

We now need to add all the details defined above to our chart:

At this point, we’ll be able to see the static chart:

Animating the graph

One way to animate the graph is to alternate between the two defined datasets indefinitely.

Let’s start by transitioning from one data set to another with the following code:

The function updates chart to use the new dataset.

To call this function continuously, we’ll set an interval that calls the function every 500ms:

… and finally the last touch: the blinking stars

Michał Budzyński created and animated the Nyan cat using pure CSS for a Mozilla Demo Party.

I used the code of the stars from his original work.

As Michał mentioned earlier, the blinking stars are not trivial! We will therefore not cover them in this tutorial, but you can see the code in the live demo in codepen or jsfiddle.

The final result

I hope you enjoyed this tutorial ❤.

If you have any questions, please use the comments section below.

Thanks!

About the author

I’m Valeria and I am passionate about data discovery via beautiful visualisations and analytics. I hope you enjoyed this post!

You can find me on Twitter and Instagram, or visit my page at valeria.io.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Valeria Cortez

Data Scientist at Monzo Bank || Prev. Lloyds Banking Group working on Responsible AI || Advocate for ethical AI and diversity in tech || T: @ValeriaCortezVD