Thursday, October 2, 2025
HomeLanguagesAngularAngular 14 Bar Chart Example

Angular 14 Bar Chart Example

Angular 14 charts js bar chart; In this tutorial, we will learn how to create a bar chart using charts js library in angular 14 apps with the help of chart.js library.

Chart. js is a community maintained open-source library (it’s available on GitHub) that helps you easily visualize data using JavaScript. It’s similar to Chartist and Google Charts. It supports 8 different chart types (including bars, lines, & pies), and they’re all responsive.

Angular 14 Bar Chart Example

Use the following steps to implement bar chart using charts js in agnular 14 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install Charts JS Library
  • Step 3 – Add Modules in Module.ts File
  • Step 4 – Create Bar Chart 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

First of all, open your terminal and execute the following command on it 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 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 -Add Modules in Module.ts File

In this step, visit 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 – Create Bar Chart on View File

In this step, create bar chart in angular 14 apps. 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

In this step, visit 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

In this step, execute the following command on terminal to start angular bar chart app:

ng serve

Recommended Angular Tutorials

RELATED ARTICLES

Most Popular

Dominic
32331 POSTS0 COMMENTS
Milvus
85 POSTS0 COMMENTS
Nango Kala
6703 POSTS0 COMMENTS
Nicole Veronica
11867 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11926 POSTS0 COMMENTS
Shaida Kate Naidoo
6818 POSTS0 COMMENTS
Ted Musemwa
7079 POSTS0 COMMENTS
Thapelo Manthata
6775 POSTS0 COMMENTS
Umr Jansen
6776 POSTS0 COMMENTS