How to use highCharts angular in Angular 11

The HighCharts and D3js are the JavaScript library for data visualization. Unleash the power of data visualization in your Angular applications with Highcharts. In this comprehensive tutorial, we’ll explore how to seamlessly integrate Highcharts with Angular to create stunning, interactive charts that bring your data to life. Whether you’re a seasoned developer or just starting with Angular, this guide will equip you with the skills to implement eye-catching line, bar, and pie charts in your projects.

In this tutorial, we’ll learn how to use the Highcharts library and the Highcharts-Angular library in Angular 18. First, we’ll use only the Highcharts library to demonstrate charts like pie, line, and more. In the second example, we’ll use the Highcharts-Angular library to demonstrate different charts.

Getting Started with Angular and Highcharts

Highcharts is a product created by the Norway-based company Highsoft, and this charting library is written in pure JavaScript. Highcharts is an SVG-based, multi-platform charting library that has been actively developed since 2009. It makes it easy to add interactive, mobile-optimized charts to your web and mobile projects. It features robust documentation, advanced responsiveness, and industry-leading accessibility support. Highcharts is used by large corporations like Yahoo, Facebook, Visa, and more. Highcharts-Angular is the official minimal Highcharts wrapper for Angular. We can also use the Highcharts library in other frameworks like Vue and React

Before we dive into creating charts, let’s set up our Angular environment and install the necessary packages.

First, ensure you have Angular CLI installed: npm install -g @angular/cli
Create a new Angular project:

ng new angular-highcharts-demo
cd angular-highcharts-demo

3. Install Highcharts and the Angular wrapper:

npm install highcharts highcharts-angular --save

Implementing Charts

We’ll first implement some basic charts using Highcharts, starting with a bar chart and a pie chart. Later, we’ll explore more advanced features such as data-driven updates, custom theming, and responsive design.

First Chart: Angular highchartLine Graph Example

With Angular 18, we’ll use standalone components. Let’s create a simple line chart to visualize monthly temperature data. Here is the screenshot of our first example

Update your app.component.ts to add the line chart

import { Component } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HighchartsChartModule],
  template: `
    <highcharts-chart
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>
  `,
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    title: { text: 'Monthly Average Temperature' },
    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
      ],
    },
    yAxis: { title: { text: 'Temperature (°C)' } },
    series: [
      {
        name: 'Tokyo',
        type: 'line',
        data: [
          7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
        ],
      },
    ],
  };
}

This code creates a basic line chart showing monthly temperature data for Tokyo using a standalone component.

Advanced Chart Types: Bar and Pie Charts

Let’s start by creating a basic bar chart and pie chart using Highcharts. We’ll update the template (app.component.html) and logic (app.component.ts) to render these charts.

Step 1: Create the Template

In your app.component.html, create two divs to hold the bar chart and pie chart. You can use Bootstrap for layout (optional):

Angular highCharts example — Angular highCharts charts example

Bar Chart Example

Let create component called BarChart by running : ng c BarChart and edit bar-chart.component.ts:

import { Component } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-bar-chart',
  standalone: true,
  imports: [HighchartsChartModule],
  template: `
    <highcharts-chart
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>
  `,
})
export class BarChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: { type: 'bar' },
    title: { text: 'Fruit Consumption' },
    xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
    yAxis: { title: { text: 'Fruit eaten' } },
    series: [
      {
        name: 'Jane',
        type: 'bar',
        data: [1, 0, 4],
      },
      {
        name: 'John',
        type: 'bar',
        data: [5, 7, 3],
      },
    ],
  };
}

For example, a line graph or one set of columns. All data plotted on a chart comes from the series object. The type of series, for example, line or column. By default, the series type is inherited from the chart.type, so unless the chart is a combination of series types, there is no need to set it on the series level.

Angular high Chart example Pie Chart

Let first generate the pie chart by running ng g c PieChart and let add the code in pie-chart.component.ts:

import { Component } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-pie-chart',
  standalone: true,
  imports: [HighchartsChartModule],
  template: `
    <highcharts-chart 
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;">
    </highcharts-chart>
  `
})
export class PieChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: { type: 'pie' },
    title: { text: 'Browser Market Share' },
    series: [{
      name: 'Browsers',
      type: 'pie',
      data: [
        { name: 'Chrome', y: 61.41 },
        { name: 'Internet Explorer', y: 11.84 },
        { name: 'Firefox', y: 10.85 },
        { name: 'Edge', y: 4.67 },
        { name: 'Safari', y: 4.18 },
        { name: 'Other', y: 7.05 }
      ]
    }]
  };
}

HighCharts Angular pie Chart example — Angular highCharts pie example

Customizing Highcharts in Angular

Highcharts offers extensive customization options. Here’s an example of a customized chart using a standalone component:

import { Component } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-custom-chart',
  standalone: true,
  imports: [HighchartsChartModule],
  template: `
    <highcharts-chart 
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;">
    </highcharts-chart>
  `
})
export class CustomChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'line',
      backgroundColor: '#f0f0f0',
    },
    title: {
      text: 'Monthly Sales',
      style: { color: '#333', fontSize: '24px' }
    },
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'],
    plotOptions: {
      series: {
        animation: {
          duration: 2000
        }
      }
    },
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            enabled: false
          }
        }
      }]
    },
    series: [{
      name: 'Sales',
      type: 'line',
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  };
}

Performance Optimization and Best Practices

For performance optimization in Angular 18 with Highcharts:

Use standalone components for better tree-shaking.
Implement lazy loading for chart components.
Use the Highcharts boost module for charts with thousands of data points.

Example of using the boost module in a standalone component

import { Component } from '@angular/core';
import { HighchartsChartModule } from 'highcharts-angular';
import * as Highcharts from 'highcharts';
import HC_boost from 'highcharts/modules/boost';

HC_boost(Highcharts);

@Component({
  selector: 'app-boosted-chart',
  standalone: true,
  imports: [HighchartsChartModule],
  template: `
    <highcharts-chart 
      [Highcharts]="Highcharts"
      [options]="chartOptions"
      style="width: 100%; height: 400px; display: block;">
    </highcharts-chart>
  `
})
export class BoostedChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    boost: {
      useGPUTranslations: true,
      usePreAllocated: true
    },
    // ... other options
  };
}

Conclusion

By mastering Angular 18 Highcharts integration using standalone components, you’ve unlocked a powerful tool for data visualization in your web applications. Remember to explore Highcharts’ extensive documentation to discover even more chart types and customization options. Start implementing these interactive charts in your Angular projects today and watch your data come to life!

Related posts

Angular Highcharts Tutorial: Mastering Data Visualization

Table of Contents