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