Angular Charts
Using ApexCharts in Angular
ng-ApexCharts is an Angular wrapper component for ApexCharts ready to be integrated into your Angular application to create stunning Charts.
In this post, you will learn how to use ng-ApexCharts to create various charts in your web application with ease.
Download and Installation
1. Install using npm
npm install apexcharts ng-apexcharts --save
2. Open angular.json and under scripts add:"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]
3. Add ng-apexcharts-module to importsimports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgApexchartsModule,
...
]
Usage
In any component you can use the chart using<apx-chart [series]="series" [chart]="chart" [title]="title"></apx-chart>
You need to provide at least the series and chart attribute to make sure the chart can get created.
Creating your first Angular Chart
Once you have installed the library, you are ready to create a basic bar chart in Angular.
So, let’s get started. We start with the app.component.ts
import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexTitleSubtitle
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
title: ApexTitleSubtitle;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial;
constructor() {
this.chartOptions = {
series: [
{
name: "My-series",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: "bar"
},
title: {
text: "My First Angular Chart"
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
}
};
}
}
And, in app.component.html
, put this
<div style="text-align:center">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[title]="chartOptions.title"
></apx-chart>
</div>
As you can see in the above template, the Angular ApexCharts Component <apx-chart> has 4 attributes. Below, all the other options are listed which can be provided as attributes to the component.
All Options
All options of the ng-chart can be inserted using the attributes. This is a list of all available attributes:
@Input() chart: ApexChart;
@Input() annotations: ApexAnnotations;
@Input() colors: string[];
@Input() dataLabels: ApexDataLabels;
@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
@Input() stroke: ApexStroke;
@Input() labels: string[];
@Input() legend: ApexLegend;
@Input() fill: ApexFill;
@Input() tooltip: ApexTooltip;
@Input() plotOptions: ApexPlotOptions;
@Input() responsive: ApexResponsive[];
@Input() xaxis: ApexXAxis;
@Input() yaxis: ApexYAxis | ApexYAxis[];
@Input() grid: ApexGrid;
@Input() states: ApexStates;
@Input() title: ApexTitleSubtitle;
@Input() subtitle: ApexTitleSubtitle;
@Input() theme: ApexTheme;
This will render the following chart. To read more about the options you can configure in a bar chart, check out this plotOptions.bar configuration.

Full Example
The above example can be accessed live at CodeSandboxIn the next section, we will see how we can update the rendered chart dynamically
Updating Angular Chart Data
Updating your Angular chart data is simple. You just have to update the series attribute and it will automatically trigger event to update the chart.
We will see an example below updating the chart data with some random series to illustrate the point.
export class AppComponent {
@ViewChild("chart", { static: false }) chart: ChartComponent;
public chartOptions: Partial;
constructor() {
this.chartOptions = {
series: [{
name: 'series-1',
data: [44, 55, 13, 33]
}],
};
}
public updateSeries() {
this.chartOptions.series = [{
data: [23, 44, 1, 22]
}];
}
}
As you can see in the example above, by just changing the props, we trigger the update event of ApexCharts.
More Charts Examples?
There are several other charts which can be created by changing a couple of options. More than 80+ samples can be found on Angular Chart Demos page.