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 imports

imports: [
  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<ChartOptions>;

  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 CodeSandbox

In 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<ChartOptions>;

  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 that can be created by changing a couple of options. More than 80+ samples can be found on Angular Chart Demos page.