Highcharts with Angular V14

With the release of angular version 14, standalone components have been introduced, and NgModule became optional; facilitating a new way of building and structuring the codebase.

In this article, we will create a chart and see how to use and integrate angular standalone components along with the official Highcharts Angular wrapper.

Let’s get started 🙂

To create a project with the latest version of Angular, for starters update the angular-cli package with the following commands:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

For this project, we are using:

• Angular 14.
• Highcharts V10.1.0.
• Highcharts-Angular.

The project is set up using an Angular application environment and workspace with the following settings:

• Node: 14.17.0
• npm 8.3.1
• Angular CLI: 14.0.2.

Set up an Angular project with Highcharts

1. If you are unfamiliar with this type of environment, the official Angular documentation describes how to set up a local environment workspace, and more about the standalone component.

2. To install highcharts-angular and the Highcharts library run the following instruction: npm install highcharts-angular --save.

3. To import the package go to app.module.ts file and import the module HighchartsChartModule from the highcharts-angular package.

4. To build Highcharts charts, install Highcharts: npm install highcharts --save.

5. We are declaring app.compoent.ts as a standalone component and importing the HighchartsChartModule inside imports array instead of NgModule (optional). Application level dependencies such as routes, dependency injection configure in the main.ts and component level in app.component.ts or any other component.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

6. Bootstrap the app from main.ts.

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

7. Click on this Stackblitz project to find the complete working example with code. Here is the final result:

Feel free to share your thoughts and questions in the comments below.

Check our blog and learn more about the best tips to use Highcharts.

Author: Haroon Ansari

Haroon Ansari is a computer science engineer. He has many years of experience in javascript, Angular, and .NET. He loves data visualization and contributes to open source projects. Follow Haroon on twitter @haroonansari1 and LinkedIn