admin

Please wait...

pie_chart Chart.js Charts

Chart.js provides beautiful charts for Angular based on the popular Chart.js library. In this template, we use ng2-charts wrapper for Angular integration.

info For more detailed information, please check the Official ng2-charts Documentation.
get_appStep 1: Installation

Install the required packages via npm:

npm install chart.js ng2-charts --save
settingsStep 2: Configuration

Include the Chart.js script in your angular.json file: 

"scripts": [
  "node_modules/chart.js/dist/Chart.bundle.js"
]
extensionStep 3: Import Module

Import ChartsModule in your module:

import { ChartsModule } from 'ng2-charts';

@NgModule({
  imports: [
    ...
    ChartsModule
  ]
})
htmlStep 4: Usage

Add the chart component to your HTML template:

<canvas baseChart
  [datasets]="barChartData"
  [labels]="barChartLabels"
  [options]="barChartOptions"
  [colors]="barChartColors"
  [legend]="barChartLegend"
  [chartType]="barChartType">
</canvas>
settings_ethernetStep 5: Component Configuration

Define the chart data and options in your component:

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

@Component({
  selector: 'app-chartjs',
  templateUrl: './chartjs.component.html'
})
export class ChartjsComponent {
  public barChartOptions: any = {
    responsive: true,
    scales: {
      xAxes: [{
        ticks: { fontFamily: "Poppins", fontColor: "#9aa0ac" }
      }],
      yAxes: [{
        ticks: { beginAtZero: true, fontFamily: "Poppins", fontColor: "#9aa0ac" }
      }]
    }
  };
  public barChartLabels: string[] = ['2001', '2002', '2003', '2004', '2005', '2006', '2007'];
  public barChartType = 'bar';
  public barChartLegend = true;

  public barChartData: any[] = [
    { data: [58, 60, 74, 78, 55, 64, 42], label: 'Series A' },
    { data: [30, 45, 51, 22, 79, 35, 82], label: 'Series B' }
  ];

  public barChartColors: Array<any> = [
    {
      backgroundColor: 'rgba(109, 144, 232, 0.8)',
      borderColor: 'rgba(109, 144, 232, 1)'
    },
    {
      backgroundColor: 'rgba(255, 140, 96, 0.8)',
      borderColor: 'rgba(255, 140, 96, 1)'
    }
  ];
}