Implementing Different Types Of Charts In Angular

A chart is a graphical representation that shows the data visualization of large amounts of data in an easy-to-understand and interactive way. It represents tabular numeric data, functions or some kinds of quality structure and provides different info, so In this article, we will cover step-by-step process as follows-

1. Different types of Charts
2. Library required to integrate Charts in angular
3. Importing chart module and Adding chart format data in ts file
4. Implementation of the vertical bar chart
5. Implementation of pie chart
6. Implementation of advanced pie chart
7. Implementation of pie chart grid
8. Adding Animation
9. Advantages

1. Different types of Charts

The chart consists of different types, But in this tutorial, we will be learning about the below types.

Bar chart: A bar chart is a graphical representation of data in the form of different heights or, we can say, a building-like structure.

Pie chart: A pie chart is a graphical representation of data in the form of a circle divided into different parts to represent different types of data.

After Knowing the basics about the above topics, From the next topic, we will be learning about the Implementation of types with library required and other things.

2. Library required to integrate Charts in angular

To integrate charts with Angular, you need to install ngx-charts with latest version 17.0.0

Below commands are used to install ngx-charts in your project.

npm install ngx-charts

After installing ngx-charts we are also required to add @angular/CDK using the below command.

npm install @angular/cdk --save

3. Importing chart module and Adding chart format data

After installing the required libraries, we need to import ngx chart module in the project and adding it in imports as follows-

import { NgxChartsModule } from "@swimlane/ngx-charts";

imports: [ NgxChartsModule]

After importing chart module in our project we need to set input data in ts file as follow

saleData = [

    { name: "Mumbai", value: 105000 },

    { name: "Pune", value: 55000 },

    { name: "Nagpur", value: 15000 },

    { name: "Delhi", value: 150000 },

    { name: "Chennai", value: 20000 },

  ];

4. Implementation of the vertical bar chart

In the bar chart, we have a vertical bar chart type to implement the vertical bar chart; we need to add the ngx component of the vertical bar chart in the HTML file.

In this, we will start with properties of the vertical bar chart as follows-

• Views: It represents the height and width of the graph
• Results: Results will be the final object which consists of all array data
• X and Y-axis label: Both labels will represent the x and y-axis representation
• Legend: It will be the summarized view to represent all chart information and it is boolean
• Legend Title: It represents the title of that summarized view
• Animation: It is also a boolean field it will enable animation

After knowing the properties of this component we need to add this component as follows

 <ngx-charts-bar-vertical

  [view]="[1000, 400]"

  [results]="saleData"

  [xAxisLabel]="'Products'"

  [legendTitle]="'Product Sale Chart'"

  [yAxisLabel]="'Sale'"

  [legend]="true"

  [showXAxisLabel]="true"

  [showYAxisLabel]="true"

  [xAxis]="true"

  [yAxis]="true"

  [gradient]="true"

>

</ngx-charts-bar-vertical>

After implementing this, we will get the result as below-

5. Implementation of pie chart

In the chart, we have a pie chart type, so we will be implementing the pie chart for that, we need to add ngx components of the pie chart in the HTML file.

In this, we will start with the properties of the pie chart as follows-

• Views: It represents the height and width of the graph
• Results: Results will be the final object which consists of all array data
• X and Y axis label: Both labels will represent the x and y axis representation
• Legend: It will be the summarized view to represent all chart information and it is boolean

After knowing the properties of this component, we need to add this component as follows –

<ngx-charts-pie-chart

  [results]="saleData"

  [legend]="true"

  [legendTitle]="'Product Sale Report'"

  [view]="[1000, 300]"

  [labels]="true"

>

</ngx-charts-pie-chart>

After implementing this we will get the result as below

6. Implementation of advanced pie chart

In the pie chart, we have an advanced pie chart type, so we will be implementing the advanced pie chart; we need to add the ngx component of the advanced pie chart in an HTML file.

In this, we will start with properties of the advanced pie chart as follows

• results: To render salesData chart we need to assign this data object to the results
• gradient: set it to true to show a bar with a gradient background.

After knowing the properties of this component, we need to add this component as follows

 <ngx-charts-advanced-pie-chart 

      [results]="saleData"

      [gradient]="true" >

</ngx-charts-advanced-pie-chart>

After implementing this we will get a result as below-

7. Implementation of pie chart grid

In the pie chart, we have a pie chart grid chart type, so we will be implementing the pie chart grid chart; for that, we need to add ngx component of the pie chart grid chart in an HTML file.

In this, we will start with the properties of the vertical bar chart as follows

• results: To render a sales data chart, we need to assign this data object to the results

After knowing the properties of this component, we need to add this component as follows

<ngx-charts-pie-grid [results]="saleData"> </ngx-charts-pie-grid>

After implementing this we will get the result as below

8. Adding Animation

Ngx charts also provide the animation property; when the map starts rendering, the chart shows the animation, so we need to add an animation key in the chart component. For example, if we add animation in the vertical bar chart, we need to add an animation chart; we can check in the following code block.

<ngx-charts-bar-vertical

  [animations]="true"

  [view]="[1000, 400]"

  [results]="saleData"

  [xAxisLabel]="'Products'"

  [legendTitle]="'Product Sale Chart'"

  [yAxisLabel]="'Sale'"

  [legend]="true"

  [showXAxisLabel]="true"

  [showYAxisLabel]="true"

  [xAxis]="true"

  [yAxis]="true"

  [gradient]="true"

>

</ngx-charts-bar-vertical>

In the above block of code, we have added an animation key to animation while rendering the chart, as shown below.

9. Advantages

• ngx-charts makes it so much easier to render charts.
• It provides other possibilities that the Angular platform offers, such as IoT, Universal, etc.
• It uses Angular to render and animate SVG elements.

Code snippet:

Ts file

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

@Component({

  selector: "app-home",

  templateUrl: "./home.component.html",

  styleUrls: ["./home.component.scss"],

})

export class HomeComponent {

  saleData = [

    { name: "Mumbai", value: 105000 },

    { name: "Pune", value: 55000 },

    { name: "Nagpur", value: 15000 },

    { name: "Delhi", value: 150000 },

    { name: "Chennai", value: 20000 },

  ];

}

Html file

 <!-- Vertical bar chart -->

<ngx-charts-bar-vertical

  [view]="[1000, 400]"

  [results]="saleData"

  [xAxisLabel]="'Products'"

  [legendTitle]="'Product Sale Chart'"

  [yAxisLabel]="'Sale'"

  [legend]="true"

  [showXAxisLabel]="true"

  [showYAxisLabel]="true"

  [xAxis]="true"

  [yAxis]="true"

  [gradient]="true"

>

</ngx-charts-bar-vertical>

<!-- pie chart -->

<ngx-charts-pie-chart

  [results]="saleData"

  [legend]="true"

  [legendTitle]="'Product Sale Report'"

  [view]="[1000, 300]"

  [labels]="true"

>

</ngx-charts-pie-chart>

<!-- advanced pie chart -->

<ngx-charts-advanced-pie-chart [results]="saleData" [gradient]="true">

</ngx-charts-advanced-pie-chart>

<!-- pie chart grid -->

<ngx-charts-pie-grid [results]="saleData"> </ngx-charts-pie-grid>

Conclusion

In this tutorial, we learned about data visualization with ngx-charts in angular applications, installing ngx-charts and implementing different types of charts in angular. In the end, we learned about the advantages of ngx-charts.