Angular 12 Bar Chart Using ng2-Charts

npm install - g @angular/CLI

Note: If you are facing any issues related to npm, you need to download and install the active LTS, or maintain the LTS version of Node.js.

ng update @angular/core @angular/cli --force

ng update @angular/material --force

Now, we need to create a new angular project.

Create a new angular project

Create an open package manager console for a new angular project from Visual Studio, type the following command and press Enter.

Here, Codingville Is the name of our Angular project.

Install the ng2-charts npm package in Angular Project

To install the ng2-charts npm package, you can use the following command:

npm install ng2 - charts@2.2.3 --save
npm install chart.js@2.9.3 --save

{
  "name": "codingvila",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.2",
    "@angular/common": "~12.0.2",
    "@angular/compiler": "~12.0.2",
    "@angular/core": "~12.0.2",
    "@angular/forms": "~12.0.2",
    "@angular/platform-browser": "~12.0.2",
    "@angular/platform-browser-dynamic": "~12.0.2",
    "@angular/router": "~12.0.2",
    "chart.js": "^2.9.3",
    "ng2-charts": "^2.2.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.2",
    "@angular/cli": "~12.0.2",
    "@angular/compiler-cli": "~12.0.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

explanation

As you can see in the package.json file, look at the dependency that indicates the npm chart.js package, as well as the ng2-charts, have been successfully installed.

Now, we need to import the chart module, for that, you need to open the app.module.ts The Witch file is in the following directory Codingvila >> src>> App >> app.module.ts.

Now, write the following code to the app.module.ts file.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

explanation

As can be seen in the code of the app.module.ts file as written above, here we will import a ChartsModule M e ng2- Charts And imported a FormsModule M e @ Angular / Shapes.

Similarly, we need to update our app.component.ts file, which is in the following directory Codingvila> src> app> app.component.ts.

Write the following code into app.component.ts

app.component.ts

import { Component } from '@angular/core';
import { ChartDataSets } from 'chart.js';
import { ChartOptions, ChartType } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Codingvila';
  public chart_Options: ChartOptions = {
    responsive: true,
  };
  public chart_Labels: Label[] = ['Nikunj Satasiya', 'Hiren Dobariya', 'Vivek Ghadiya', 'Shreya Patel', 'Pratik Pansuriya', 'Keval Patel'];
  public chart_Type: ChartType = 'bar';
  public chart_Legend = true;
  public chart_Plugins = [];

  public chart_Data: ChartDataSets[] = [
    {
      data: [65, 67, 70, 75, 80, 90],
      label: 'Mathematics'
    },
    {
      data: [50, 48, 47, 49, 44, 40],
      label: 'Science'
    },
    {
      data: [43, 30, 28, 25, 22, 20],
      label: 'English'
    },
    {
      data: [40, 32, 40, 30, 28, 22],
      label: 'Drawing'
    },
    {
      data: [70, 38, 28, 27, 23, 19],
      label: 'Chemistry'
    },
  ];

  constructor() { }

  ngOnInit() {
  }
}

explanation

<style>
  :host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #223c88;
    color: white;
    font-weight: 600;
  }
  .logo{padding-left:20px;
        font-size: large;
  }
 
  .chart {
    width: 800px;
    height: 1100px;
    display: block;
    padding-top:100px;
    padding-left:30px;
  }

  @media screen and (max-width: 575px) {
    svg#rocket-smoke {
      display: none;
      visibility: hidden;
    }
  }
</style>

<div class="toolbar" role="banner">
  <span class="logo">Codingvila | Angular 12</span>
  <div class="spacer"></div>
</div>

<div class="chart">
  <canvas baseChart
          [datasets]="chart_Data"
          [labels]="chart_Labels"
          [options]="chart_Options"
          [plugins]="chart_Plugins"
          [legend]="chart_Legend"
          [chartType]="chart_Type">
  </canvas>
</div>

When you press Enter your angular project will continue to run URL: http: // localhost: 4200 /

Productivity