Pie and Donut Charts in Angular Using Highcharts

Introduction

Data visualization plays a crucial role in modern web applications. Pie and donut charts are popular choices when it comes to representing data in a visually appealing and informative way. In this blog, we will explore how to create interactive pie and donut charts in an Angular application using Highcharts, a powerful JavaScript charting library.

Prerequisites

Before we dive into creating pie and donut charts, make sure you have the following prerequisites in place:

1. Node.js and npm installed on your computer.

2. Angular CLI installed globally.

3. An Angular project set up.

If you don’t have these prerequisites, you can install them by following the official documentation for Node.js, npm, and Angular CLI.

Getting Started

Let’s get started by creating a new Angular project or using an existing one. If you’re creating a new project, run the following command:

ng new angular-highcharts-demo

Navigate to your project directory:

cd angular-highcharts-demo

Now, let’s install Highcharts:

npm install highcharts --save

Creating Pie and Donut Charts

In this example, we’ll create two components to display a pie chart and a donut chart. You can follow similar steps for other chart types supported by Highcharts.

1. Pie Chart Component

Generate a new component for the pie chart:

ng generate component pie-chart

Open src/app/pie-chart/pie-chart.component.ts and import Highcharts:

import * as Highcharts from 'highcharts';

Next, configure the pie chart options in the ngOnInit method:

ngOnInit(): void {
  Highcharts.chart('pie-chart-container', {
    chart: {
      type: 'pie',
    },
    title: {
      text: 'Pie Chart Example',
    },
    series: [
      {
        name: 'Categories',
        data: [
          ['Category A', 25],
          ['Category B', 30],
          ['Category C', 45],
        ],
      },
    ],
  });
}

Create an HTML template in src/app/pie-chart/pie-chart.component.html:

<div id="pie-chart-container"></div>

2. Donut Chart Component

Generate a new component for the donut chart:

ng generate component donut-chart

Open src/app/donut-chart/donut-chart.component.ts and import Highcharts:

import * as Highcharts from 'highcharts';
import 'highcharts/modules/variable-pie';

Configure the donut chart options in the ngOnInit method:

ngOnInit(): void {
  Highcharts.chart('donut-chart-container', {
    chart: {
      type: 'variablepie',
    },
    title: {
      text: 'Donut Chart Example',
    },
    series: [
      {
        name: 'Categories',
        innerSize: '50%',
        data: [
          ['Category A', 25],
          ['Category B', 30],
          ['Category C', 45],
        ],
      },
    ],
  });
}

Create an HTML template in src/app/donut-chart/donut-chart.component.html:

<div id="donut-chart-container"></div>

Integrating Components

Now, let’s integrate these components into your Angular application. Open the src/app/app.component.html file and add the following code:

<div style="display: flex; justify-content: space-around;">
  <app-pie-chart></app-pie-chart>
  <app-donut-chart></app-donut-chart>
</div>

Running the Application

You can now run your Angular application using the following command:

ng serve

Visit http://localhost:4200 in your browser to see the pie and donut charts in action.

Conclusion

In this blog, we’ve explored how to create interactive pie and donut charts in an Angular application using Highcharts. You can further customize and enhance these charts to suit your specific data visualization needs. Highcharts offers extensive documentation, making it easy to explore advanced features and options to create stunning data visualizations in your Angular projects.

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