How can I implement charts in angular ?

Naveenkumar Paramasivam

4y1.3kAngular

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

Any reference?

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rijwan Ansari4y ago
Accepted 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/
+5
satheesh d4y ago
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.
+2
Satya Karki4y ago
You can check this blog with sample code and examples.
https://canvasjs.com/angular-charts/
+2
Sachin Singh4y ago
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">
+5
Jignesh Kumar4y ago
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/
+3
Srinivasan Ramamoorthi4y ago
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/
+3

How can I implement charts in angular ?

Angular Google Line Chart Example - ItSolutionStuff.com