Building charts with ApexCharts and Angular
By: Darshan Theerth
Tags: Apexcharts, Web Development, Angular, Charts, JavaScript

This blog gives you the information to start Apexcharts with Angular.

There are several libraries, where you can build different charts based on your need like D3, chart.js, highcharts. And as I have tried different libraries and now I am exploring this library to know it more. According to my experience, the Apexchart library gives more features and visualization to build your graph.

Apexchart has its integrations with Angular, React, and Vue frameworks. ApexCharts is a free and open-source charting library that helps to build charts for your website. This library has beautiful and interactive charts. This link provides the demo of the ApexCharts.

Let us learn how to integrate ApexCharts with Angular to create some charts. Also, let us build an application that reads the data from an XLSX file.

Initiating A New Angular Project

So, let’s create an Angular project with the name “chartMania” with the help of the following command.

ng new chartMania

You choose the proper options to create a project folder.

Let’s go inside the “chartMania” project folder

cd chartMania

Installing apexcharts and ng-apexcharts

Now install ApexCharts library from the npm by executing the following command.

npm install apexcharts ng-apexcharts — save

And also to use apexcharts, you need to save the path “node_modules/apexcharts/dist/apexcharts.min.js” to scripts in angular.json file.

Now add NgApexchartsModule to imports.

import { NgApexchartsModule } from 'ng-apexcharts';

...

imports: [

BrowserModule,

NgApexchartsModule

]

Adding Basic HTML structure

First, let us create a button on click of which reads an XLSX file. We need to read the data inside the .xlsx sheet and then convert it into the JSON data. So let’s add a basic button to read .xlsx file.

<input type=”file” value=”Upload” (change)=”parseExcel($event)” accept=”.xlsx”/>

And we need a method to read the data from the .xlsx sheet and convert the data to a JSON object format. So let's add it.

declare let XLSX: any;

.....

async parseExcel(file) {

let fileData = [];

let reader = new FileReader();

reader.onload = (e:any) => {

let data = e.target.result;

let workbook = XLSX.read(data, {

type: ‘binary’

});

workbook.SheetNames.forEach((sheetName) => {

let XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

let json_object = XL_row_object;

fileData.push(json_object);

});

};

reader.onerror = function(ex) {

console.log(ex);

};

reader.readAsBinaryString(file.target.files[0]);

this.chartData = fileData;

};

I have used google sheets for data. here’s the link. Download the google sheet and use it for this application.

let us create one more button for loading the chart and we create an HTML element for loading apex charts. Here’s the code.

<input type="button" value="Load Chart" (click)="loadJSONChart(chartData)"/> <div *ngIf="fileOnLoad" style="text-align:center">

<apx-chart [series]="chartOptions.series [chart]="chartOptions.chart"

[xaxis]="chartOptions.xaxis"

[title]="chartOptions.title">

</apx-chart>

</div>

and let’s configure the chart options in your component.ts file. So let's add it.

Importing necessary imports in your copmponent.ts file.

import {

ChartComponent,

ApexAxisChartSeries,

ApexChart,

ApexXAxis,

ApexTitleSubtitle

} from "ng-apexcharts"; export type ChartOptions = {

series: ApexAxisChartSeries;

chart: ApexChart;

xaxis: ApexXAxis;

title: ApexTitleSubtitle;

};

....

fileOnLoad:boolean = false;

chartData = [];

chartType = "bar"; @ViewChild("chart", {static: false}) chart: ChartComponent;

public chartOptions: Partial<any>; loadJSONChart(chartData) {

this.fileOnLoad = true;

let dataArray = [];

let dataLabel = [];

chartData[0].map(data => {

dataArray.push(data.Units);

dataLabel.push(data.OrderDate);

});

this.chartOptions = {

series: [{

name: "My-series",

data: dataArray

}],

chart: {

height: 500,

type: this.chartType

},

title: {

text: `My First ${this.chartType} Chart from xlsx file`

},

xaxis: {

type: "datetime",

categories: dataLabel

}

};

}

That’s all. Now let us see the results.

Checking the Result

After selecting a .xlsx file

After clicking on the “Load Chart” button

Surprise

So let us provide an option to change the chart type on the fly. We know there are different types of charts and we might wish to change the graph type in real-time. ApexCharts and Angular provide an easy option to change the type of graph.

So here’s the code.

<input type="button" value="Change Chart" (click)="changeChart()"/>

.....

changeChart(){

if(this.chartType == "bar"){

this.chartType = "line";

} else if(this.chartType == "line") {

this.chartType = "radar";

} else if(this.chartType == "radar") {

this.chartType = "bar";

} else {

this.chartType = "area";

}

this.loadJSONChart(this.chartData);

}

See the result now.

Line chart:

Click on “Change Chart” button to see this

Area Chart:

Click on “Change Chart” button to see this

Conclusion

ApexCharts is an awesome library that provides responsive charts with some of the default options. The options are zoom-in, zoom-out, panning, the menu for downloading the chart in PNG, SVG, and CSV formats. The ng-ApexCharts is an Angular wrapper component for ApexCharts ready to be integrated into your Angular application to create stunning Charts.

Try this out and let me know your feedback in the comment section.

Thank you.