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.

Rishikesh

Full-stack developer

Rishikesh is a Full-stack developer with 3+ years of experience. He has experience in web technologies like AngularJS, ReactJS. His expertise is building Python integrated web applications, creating REST APIs with well-designed, testable and efficient and optimized code. He loves to learn new technologies.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks