Angular | Web Workers | Chart.js

Rendering Charts With Web Workers in Angular

How to use OffscreenCanvas to create charts from within a web worker

Angular logo by Angular PressKit / CC BY 4.0

In our previous article, we talked about web workers in Angular. We presented some of the benefits and drawbacks of using one. We also had the chance to see them in action in a demo application.

In this article, we will continue studying web workers. We will use the OffscreenCanvas API to create a chart with a web worker. In the process, we will highlight a few of their limitations and how we can work around them.

Let’s get started!

Disclaimer: As of today, the OffscreenCanvas API is not yet supported by all browsers.

Rendering Charts

We will use Chart.js for rendering our charts. So, we need to install the respective package by running the following command in the terminal:

npm install chart.js

We add a new page to our demo application. This page creates a chart based on the selected number picked via a range input element.