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';

@NgModule({

 declarations: [

   AppComponent

 ],

 imports: [

   BrowserModule,

   NgApexchartsModule

 ],

 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';

@Component({

 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:

<div>

 <apx-chart

   [series]="chartOptions.series"

   [chart]="chartOptions.chart"

   [title]="chartOptions.title"

   [xaxis]="chartOptions.xaxis">

 </apx-chart>

</div>

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.

ABOUT EXPLO

Explo, the publishers of Graphs & Trends, is an embedded analytics company. With Explo’s Dashboard and Report Builder product, you can a premium analytics experience for your users with minimal engineering bandwidth.
Learn more about Explo →