Apex chart with Angular 13

Apex chart provides a variety of options to present data in a user-friendly way. The library comes with a variety of options including line, bar, area, column, timeline, candle, etc. In this article we will explore how to include pie chart in Angular project.

Prerequisites

Before we proceed with Apex Chart integration in Angular, make sure you have the following things ready

• Generate Angular project (13) with CLI. Use the following command
  ng new apex-ng-13
• Install a code editor like VS Code.

Apex Chart Setup

Configuring Apex chart in Angular project is very easy. Add Apex chart dependency using following command

npm install --save apexcharts@3.33.2

The dependency must be available for runtime and hence the install flag uses "--save". Once the installation is complete, import the Apex chart module into app module using the following statement

import { NgApexchartsModule } from 'ng-apexcharts';

// ... Existing imports

@NgModule({
// ... Existing declarations

imports: [
// ... Existing imports
    NgApexchartsModule
  ],

// ... Rest of the code
})

You can also add NgApexchartsModule to a common module, which is imported in all the components.

New component

To add Apex chart, create a new component using CLI.

ng g c pie-chart

Open pie-chart.component.html file and add following code

<div class="chartContainer">
    <apx-chart [series]="chartSeries" [chart]="chartDetails" [labels]="chartLabels" [title]="chartTitle" [dataLabels]="chartDataLabels"></apx-chart>
</div>

Though it is not mandatory, the apx-chart element is added inside a wrapper div. The apx-chart element requires a few properties to be initialized

• series - Reference of data to be used while plotting chart
• chart - Indicates chart type
• labels - Labels to be rendered inside a chart
• title - Chart title
• dataLabels - Labels to be displayed over data points

Open PieChartComponent.ts file and declare the following variables

chartSeries: ApexNonAxisChartSeries = [40, 32, 28, 55];

chartDetails: ApexChart = {
    type: 'pie',
    toolbar: {
      show: true
    }
};

chartLabels = ["Apple", "Microsoft", "Facebook", "Google"];

chartTitle: ApexTitleSubtitle = {
    text: 'Leading Companies',
    align: 'center'
};

chartDataLabels: ApexDataLabels = {
    enabled: true
};

• chartSeries - Since we will be plotting a pie chart, the chartSeries variable is initialized using one-dimensional array.
• chartDetails - It defines the chart type and any additional configuration that we wish to customize. Refer to Apex chart documentation for details.
• chartLabels - This corresponds to a number of data points defined for chartSeries.
• chartTitle - You can define this variable to display the chart title and set its alignment.
• chartDataLabels - When a user hovers over a slice displayed in pie, a tooltip will be displayed.

Note that the type of each variable is referenced using following import statement

import { ApexChart, ApexDataLabels, ApexNonAxisChartSeries, ApexTitleSubtitle } from 'ng-apexcharts';

Demo time

Save all the files and run the project using following command.

ng serve -o