Bar Chart in Angular 12 using Chart.js

Bar chart in angular 12 using chart.js; In this tutorial, i will guide you on how to integrate and use bar chart using charts js library in angular 12 app.

Chart. js is an open source JavaScript library that makes it easy to include charts in your website. The charts are animated and responsive so we can show it on any device. And It’s similar to Chartist and Google Charts. It supports 8 different chart types (including bars, lines, & pies), and they’re all responsive.

Angular 12 bar Chart using Chart JS Tutorial

• Step 1 – Create New Angular App
• Step 2 – Install Charts JS Library
• Step 3 – Import Module on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On bar-chart.Component ts File
• Step 6 – Start the Angular Bar Chart App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Then install NPM package called ng2-charts chart.js –save for implement bar chart in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js --save

After that, open angular.json file and update the following code into it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Step 3 – Import Module on App.Module.ts File

Go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { ChartsModule } from 'ng2-charts';
@NgModule({
  declarations: [...],
  imports: [
    ChartsModule
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Step 4 – Add Code on View File

Create bar chart in angular 11 app. So, visit src/app/ and bar-chart.component.htmland update the following code into it:

<div class="chart-wrapper">
    <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

Step 5 – Add Code On bar-chart.Component ts File

Go to the src/app directory and open bar-chart.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {
  barChartOptions: ChartOptions = {
    responsive: true,
  };
  barChartLabels: Label[] = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];
  barChartData: ChartDataSets[] = [
    { data: [45, 37, 60, 70, 46, 33], label: 'Best Fruits' }
  ];
}

Step 6 – Start the Angular Bar Chart App

Execute the following command on terminal to start angular bar chart app:

ng serve

Recommended Angular Tutorials