How can I implement charts in angular ?

Question

I am developing dashbaord in angular, how can i implement donut chart, line chart . Any reference?

Rijwan Ansari · Answer

You can use Chart.js. The ng2-charts module is an open-source JavaScript library, and it is exclusively built for Angular 2+ and available via npm. It helps to create eye-catching charts in Angular with the help of Chart.js. add package in you solution npm install ng2-charts chart.js --save Check this article for step by step implementation https://www.positronx.io/angular-chart-js-tutorial-with-ng2-charts-examples/

Sachin Singh · Answer

There are many Chart libraries are available, but the most famous is google chart. step 1. npm install angular-google-charts step 2. import the GoogleChartsModule in your app.module.ts : import { GoogleChartsModule } from 'angular-google-charts' ; @NgModule({ ... imports: [ ... GoogleChartsModule, ... ], ... }) export class AppModule {} step 3. Specify Type as Pie/Donut etc and data as your Data array and column as column[]. [title]= "chart.title" [type]= "chart.type" [data]= "chart.data" [columns]= "chart.columnNames" [options]= "chart.options" > here is a full example of line chart // app.module.ts import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppComponent } from './app.component' ; import { GoogleChartsModule } from 'angular-google-charts' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GoogleChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } //app.component.ts import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { chartData = { type: 'LineChart' , data: [ [ "Jan" , 500, 600], [ "Feb" , 800, 900], [ "Mar" , 400, 600], [ "Apr" , 600, 500], [ "May" , 400, 300], [ "Jun" , 750, 700], [ "Jul" , 800, 710], [ "Aug" , 810, 720], [ "Sep" , 820, 730], [ "Oct" , 900, 840], [ "Nov" , 910, 850], [ "Dec" , 920, 890] ], columnNames: [ "Month" , "Apple" , "Mi" ], options: { hAxis: { title: 'Month' }, vAxis:{ title: 'Sell' }, }, width: 1000, height: 400 }; //app.component.html Angular Google Line Chart Example - ItSolutionStuff.com [type]= "chartData.type" [data]= "chartData.data" [columns]= "chartData.columnNames" [options]= "chartData.options" [width]= "chartData.width" [height]= "chartData.height" >

Jignesh Kumar · Answer

Hello, Please refer these thread which will help you out to implement step by step, https://www.c-sharpcorner.com/article/create-charts-in-angular-7-application-using-chart-js2/ https://www.c-sharpcorner.com/article/top-10-most-popular-charts-in-angular-with-net-core-api/

satheesh d · Answer

For Creating the charts in the Angular, we can use Chart.js core library and thisis more flexible Javascript charting for designers and developers. This is one of the most popular to create charts for the javascript based applications. This consists of different types of charts and it is animated using different transitions from one state to another. This javascript can be installed through the npm command, npm install chart.js --save You can also get this using the CDN links to include th reference for this library in your HTML page. There are lot of charts are available. First you need to create canvas element and then its references are fetched and charts are initialized by calling the constructor providing the reference of the canvas.

Satya Karki · Answer

You can check this blog with sample code and examples. https://canvasjs.com/angular-charts/

Srinivasan Ramamoorthi · Answer

Check this link https://tudip.com/blog-post/how-to-implement-chart-js-in-angular/ https://www.c-sharpcorner.com/article/create-pie-charts-in-angular-10-application-using-ng2-charts-chart-js/