Visualize your data in Angular with Apexcharts

All the organizations nowadays are focusing on collecting and analyzing a huge number of data , but presenting it in an attractive way is quite difficult.

Data visualization is the graphic representation of data. It involves producing images that communicate relationships among the represented data to viewers of the images. One of those famous data visualization libraries in Javascript.

There are many libraries available now to help visualizing the data like D3, highcharts etc. One among those libraries is Apex charts, a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

In this article, we are going to learn how to create a responsive data chart in angular.

Create a new Angular project

Start your angular web project ‘angular-apex’ using the below command.

ng new angular-apex

Yeah, your project is created now. Navigate to your project by using this command.

cd angular-apex

Install apex charts from npm

Install apex charts into your project by giving this command.

npm install apexcharts ng-apexcharts --save

And add ‘ “node_modules/apexcharts/dist/apexcharts.min.js”’ under scripts in angular.json like below.

"scripts": [
   "node_modules/apexcharts/dist/apexcharts.min.js" 
]

And add NgApexchartsModule in package.json.

import { NgApexchartsModule } from 'ng-apexcharts';
imports: [ 
      BrowserModule, 
      FormsModule, 
      ReactiveFormsModule, 
      NgApexchartsModule, 
      … 
    ]

Start your first apex chart

Lets start with app.component.ts by importing the required imports.

import {   
        ChartComponent,   
        ApexAxisChartSeries,   
        ApexChart,   
        ApexXAxis,   
        ApexTitleSubtitle 
    } from "ng-apexcharts";
export type ChartOptions = {   
       series: ApexAxisChartSeries;   
       chart: ApexChart;   
       xaxis: ApexXAxis;   
       title: ApexTitleSubtitle; 
    };

Initialize your chart with the following code in AppComponent class in app.component.ts

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"]      
                   }    
                };  
       } 
 }

Use your chart in any desired component like this

<apx-chart [series]="series" [chart]="chart" [title]="title"></apx-chart>

Make sure to provide atleast one series and chart attribute

Yes, your apex chart is rendered in the application.

You can also create other types of apexchart such as line, area, mixed, timeline, candlestick etc. You can find various types of chart in https://apexcharts.com/angular-chart-demos/.

Do try this chart in your angular application and make your visualization an attractive one.

And dont forget to leave your views and queries in the comment section.

Merci d’avance.