Getting Started with Highcharts in Angular

Introduction

Angular is a popular JavaScript framework for building dynamic web applications, while Highcharts is a powerful JavaScript library for creating interactive and visually appealing charts and graphs. Combining the two can result in data visualization that is both functional and aesthetically pleasing. In this blog, we will explore how to use Highcharts in an Angular application step by step.

Prerequisites

Before we dive into using Highcharts in an Angular project, ensure you have the following prerequisites in place:

1. Node.js and npm: Make sure you have Node.js installed on your system, as it comes bundled with npm (Node Package Manager). You can download it from the official website: Node.js Downloads.

2. Angular CLI: Install the Angular CLI globally on your system using npm:

npm install -g @angular/cli

3. Angular Project: Create a new Angular project or use an existing one. If you’re starting a new project, you can generate one using the Angular CLI:

ng new my-highcharts-app

Installing Highcharts

To use Highcharts in your Angular project, you need to install it as a dependency. Open your project folder in the terminal and run the following command:

npm install highcharts

This will add Highcharts to your project’s node_modules folder.

Setting up a Component

Create a new Angular component that will host your Highcharts chart. For example, let’s create a component called chart:

ng generate component chart

This command generates a new folder named chart with the necessary files for your component.

Using Highcharts in the Component

Now, let’s add Highcharts to your Angular component. Open the chart.component.ts file and import Highcharts:

import * as Highcharts from 'highcharts';

Next, you can create a function that initializes and renders a Highcharts chart. For simplicity, let’s create a basic line chart in the chart.component.ts file:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
    this.renderChart();
  }

  renderChart() {
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Sample Line Chart'
      },
      series: [{
        name: 'Data Series',
        data: [1, 3, 2, 4, 6, 5, 8, 7]
      }]
    });
  }
}

In this code, we import Highcharts, create a function renderChart, and use it to render a simple line chart within the container element.

Adding the Chart to the Template

Now, open the chart.component.html file and add an empty <div> element with the id attribute set to ‘container’, which is where your Highcharts chart will be rendered:

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Including Highcharts Styles

Highcharts provides various CSS stylesheets for different chart themes. You can include a theme by adding the corresponding CSS file to your project. For example, to include the Dark Unica theme, add the following line to your angular.json file under the styles array:

"styles": [
  "node_modules/highcharts/css/highcharts.css",
  "node_modules/highcharts/css/themes/dark-unica.css",
  "src/styles.css"
],

Running Your Application

Now that you’ve set up your Highcharts component and included the necessary styles, you can run your Angular application:

ng serve

Visit http://localhost:4200 in your browser to see your Highcharts chart in action.

Conclusion

In this blog, we’ve covered the basics of using Highcharts in an Angular application. You’ve learned how to install Highcharts, set up a component to host your chart and render a basic line chart. You can explore Highcharts’ extensive documentation to create more advanced and interactive visualizations for your Angular projects. Happy charting!

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency