Uploaded February 2023 | Updated September 2026, 2 weeks ago

---

In this tutorial I teach you how to implement a chart using JavaScript and HTML Canvas. Our javascript chart app will allow to drag and zoom the data with the mouse and style the points using transparency, colors, emojis and I’ll even teach you some image processing techniques to recolor the emojis. This custom chart supports hovering over and selecting items as well.

We implement the chart using vanilla JavaScript (without using libraries). But we will use some math, especially interpolation quite a lot. If you understand what I do, great! Otherwise, maybe watch my math-related videos first:

Interpolation:
youtu.be/J_puRs40GhM

Linear Algebra:
youtu.be/nzyOCd9FcCA

Trigonometry:
youtu.be/xK3vKWMFVgw

A good chart component is a useful tool and customizing it can be very important depending on the task at hand. We use this chart in the Machine Learning Course where we plot our feature values but later we'll customize it to do other things as well:
youtube.com/playlist?list=PLB0Tybl0UNfYe9aJXfWw-Dw_4VnFrqRC4

Today's video also teaches how to generate fake data.

💻 Code
github.com/gniziemazity/javascript_chart

⭐️TIMESTAMPS⭐️
00:00 Intro
00:01:36 Generating Fake Data
00:19:35 Creating the Chart class
00:25:28 Extracting data and pixel bounds
00:29:50 Drawing the data
00:37:20 Drawing the axes
00:52:59 Mouse interaction
01:06:32 Zooming the data
01:16:56 Styling the points
01:27:51 Recoloring the emojis
01:38:30 Emphasizing points on hover
01:45:30 Selecting points on click
01:48:05 Connecting the chart with the list
01:54:25 Fine tuning
01:56:32 Debugging and fixing issues
02:04:32 Outro and Homework