ApexCharts Angular Tutorial

What is ApexCharts?

ApexCharts offers a great level of interactivity out-of-the-box. It is highly customizable, with responsive design built-in. Additionally, it can work across most javascript libraries without additional work required. It is a newer library and may have a steeper learning curve than other library offerings.

What is Angular?

Angular is a popular open-source framework developed by Google for building dynamic web applications. It's part of a broader ecosystem that includes tools and libraries designed to work together to enable efficient development of high-quality applications. Angular is known for its robustness, scalability, and ability to create single-page applications (SPAs) that offer a smooth, native-like user experience. Angular has a component-based architecture, enabling great modularity. Additionally, it is great at syncing data between a view and a model. It can have a steep learning curve, but has a great community and high performance.

ApexCharts Angular Code Example

To integrate ApexCharts with Angular, ensure you have Angular CLI installed on your system. This example will guide you through creating a basic line chart using ApexCharts within an Angular project. If you haven't already set up an Angular project, you can create one by running ng new my-apexchart-app in your terminal.

Step 1: Install ApexCharts and Angular-ApexCharts

Navigate to your Angular project directory in the terminal and run the following commands:

npm install apexcharts --save

npm install ng-apexcharts --save

Step 2: Import NgApexchartsModule

Open the app.module.ts file and import NgApexchartsModule from ng-apexcharts. Add NgApexchartsModule to the imports array of your NgModule:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { NgApexchartsModule } from 'ng-apexcharts';

import { AppComponent } from './app.component';


 declarations: [



 imports: [




 providers: [],

 bootstrap: [AppComponent]


export class AppModule { }

Step 3: Create a Chart Component

In your Angular application, you may now create a component that will render the ApexChart. Here's how to generate a new component named chart:

ng generate component chart

Step 4: Define the Chart Options

In your chart.component.ts, first import ApexOptions from ng-apexcharts to define the type of your chart options. Then, define your chart's options like series, chart type, title, etc., as shown below:

import { Component } from '@angular/core';

import { ApexOptions } from 'ng-apexcharts';


 selector: 'app-chart',

 templateUrl: './chart.component.html',

 styleUrls: ['./chart.component.css']


export class ChartComponent {

 public chartOptions: ApexOptions;

 constructor() {

   this.chartOptions = {

     series: [


         name: "Sample Series",

         data: [10, 41, 35, 51, 49, 62, 69, 91, 148]



     chart: {

       height: 350,

       type: "line"


     title: {

       text: "My First Angular Chart"


     xaxis: {

       categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]





Step 5: Add the Chart to Your Component's HTML

Modify the chart.component.html file to include the apx-chart tag, which renders the chart. Set its [series], [chart], [xaxis], and [title] inputs to the chartOptions you defined:









Now, when you serve your Angular application using ng serve, you should see a beautiful line chart rendered on the page, based on the data and configuration you provided in your Angular component.

This is a basic example to get you started with ApexCharts in Angular. ApexCharts offer a wide range of chart types and options for customization, so be sure to explore the library's documentation for more advanced features and capabilities.

Explo: The Best Javascript Charting Option on the Market

Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.