Angular Signals with Highcharts

In this article, I will show you how to create an interactive chart using angular signals along with the official Highcharts Angular wrapper.

But, what is Angular signals? Well, think of it as your app’s detective. It meticulously tracks how and where your app’s state is being used. This means Angular can now work its optimization magic when rendering updates and make your change detection techniques smarter. In simpler terms, it’s a performance boost for your Angular app.

For those of you who like to get into the nitty-gritty details, you can read all about Signals in this comprehensive guide Angular signals.

Let’s get started 🙂
For this project, we are using:

• Angular 16.2.2.
• Highcharts V10.3.3.
• Highcharts-Angular. V3.1.2.

To initiate a project using the most up-to-date Angular version, begin by updating the angular-cli package with the following commands:
Uninstall the existing Angular CLI package:

npm uninstall -g @angular/cli

Install the latest version of Angular CLI:

npm install -g @angular/cli@latest

These steps will ensure you’re working with the latest and greatest Angular tools for your project.

Now, it is time to set up an Angular project with Highcharts.

Btw, if you’re new to this environment, you can refer to the official Angular documentation for guidance on setting up your local workspace and gaining a deeper understanding of the standalone component.

To install the highcharts-angular package along with the Highcharts library, simply execute the following command:

npm install highcharts-angular --save

To create Highcharts charts, you’ll need to install Highcharts as well. You can do so by running the command:

npm install highcharts --save

For a comprehensive working example complete with code, click on the “signal-highcharts” link. Here, you’ll find the end result of the process.