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.
Comments
Imran | 1 year ago
I want to send a pm
Exchange
Mustapha Mekhatria | 1 year ago
Hi,
Feel free to get in touch with our tech support 🙂
Samiullah Khan | 11 months ago
When I use highchart directly (without any angular wrapper) I get following warning in cli
“CommonJS or AMD dependencies can cause optimization bailouts”
Will using this package solve them and ensure that es module is used?
Mustapha Mekhatria | 11 months ago
Hi,
Feel free to get in touch with our tech support 🙂
torkil Pedersen | 9 months ago
Is there plan for Angular V 15 support
Mustapha Mekhatria | 8 months ago
Hi,
The highcharts-angular wrapper works with Angular 15. Check the following example: https://stackblitz.com/edit/highcharts-angular-line
Kintela | 4 months ago
Hi
I just installed highchart in my Angular 14 project
“highcharts”: “^11.0.1”,
“highcharts-angular”: “^3.1.2”,
But when I execute ng serve -o I Get this error
node_modules/highcharts-angular/lib/highcharts-chart.component.d.ts:24:18 – error TS2707: Generic type ‘ɵɵComponentDeclaration’ requires between 7 and 8 type arguments.
24 static ɵcmp: i0.ɵɵComponentDeclaration;
Any idea please?
Thanks
Danu Rosca | 4 months ago
try to use
“highcharts”: “^11.0.1”,
“highcharts-angular”: “3.0.0”,
because highcharts-angular have a problem with version 14 of angular
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.