Angular 16 Bar Chart Tutorial

In bar charts, data is shown as bars (vertical or horizontal), where each bar represents a specific range or value. These bars accurately display data values by length, width, yes height. If you want to create bar charts in Angular, you can use some popular data visualization libraries like D3.js, Chart.js, and ng2-chart.

Bar chart in angular 16; In this tutorial, you will learn how to create a bar chart in angular 16 apps using ng2 charts js library.

Angular 16 Bar Chart Tutorial

Steps to create a bar chart using ng2-charts js in agnular 16 apps:

• Step 1 – Create a New Angular Project
• Step 2 – Install Chart.js and ng2-charts
• Step 3 – Import Required Modules
• Step 4 – Create a Component
• Step 5 – Add Chart Data to the Component
• Step 6 – Create the Template
• Step 7 – Use the Component
• Step 8 – Start the Angular Bar Chart App

Step 1 – Create a New Angular Project

Open your terminal or cmd and run the following command to create a new Angular project:

ng new my-new-app

Step 2 – Install Chart.js and ng2-charts

Once you have created new angular project into your system. Now, you need to install chart.js and ng-2 charts into it:

npm install --save bootstrap

npm install chart.js ng2-charts --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 Required Modules

Open the src/app/app.module.ts file and import the necessary modules:

import { ChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [...],
  imports: [
    ChartsModule
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Step 4 – Create a Component

Generate a new component that will display the bar chart. In the terminal, run the following command:

ng generate component bar-chart

Step 5 – Add Chart Data to the Component

Open the src/app/bar-chart/bar-chart.component.ts file and define the data for your bar chart. Here’s an example:

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

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;
  public barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];
}

Step 6 – Create the Template

Open the src/app/bar-chart/bar-chart.component.html file and add the following code to render the chart:

<div style="display: block;">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType"></canvas>
</div>

Step 7 – Use the Component

Open the src/app/app.component.html file and add the <app-bar-chart></app-bar-chart> selector to include your bar chart component in the main app component template.

<div style="text-align:center">
  <h1>
    Welcome to Angular Bar Chart Tutorial!
  </h1>
</div>
<app-bar-chart></app-bar-chart>

Step 8 – Start the Angular Bar Chart App

Run the following command to start the development server:

ng serve

Open your web browser and navigate to http://localhost:4200/ to see your Angular application with the bar chart.

Conclusion

Congratulations! You’ve created a bar chart in an Angular 16 application using Chart.js and ng2-charts. You can further customize and enhance your chart by referring to the Chart.js documentation and the ng2-charts documentation.

Recommended Angular Tutorials