Angular 16 Bar Chart Example

Angular 16 charts js bar chart example; Through this tutorial, i am going to show you how to implement bar chart using charts js library in Angular 16 apps.

Angular 16 Bar Chart Example

Follow the below given steps to create bar chart using charts js in agnular 15/14 apps; as follows:

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

Step 1 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Run the following command on command prompt to install charts js and bootstrap library:

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 Modules in Module.ts File

Go to src/app directory and open app.module.ts file. And then import 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 – Create Bar Chart on View File

Go to src/app/ and bar-chart.component.html and 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 – Import Code On bar-chart.Component ts File

Go to the src/app directory and open bar-chart.component.ts. Then import 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

Run the following command on command prompt to start angular bar chart app:

ng serve

Recommended Angular Tutorials

Leave a Comment