Adding charts using the Highcharts library to an Angular application
Introduction
Angular is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.
highcharts is a rich and interactive charts library based on SVG.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create the Angular application
1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Install the highcharts library.
4. Remove the contents of the AppComponent class from the src/app/app.component.ts file. Import the Highcharts, HighchartsMore and HighchartsSolidGauge services and create the createChartGauge, createChartPie, createChartColumn and createChartLine methods as below.
5. Remove the contents of the src/app/app.component.html file. Add the div tags for each chart as below.
6. Add the style in the src/app/app.component.scss file as below.
7. Run the application with the command below.
8. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.
The application repository is available at https://github.com/rodrigokamada/angular-highcharts.
This tutorial was posted on my blog in Portuguese.
