Angular 12 Line Chart with ng2-charts Example

Line chart using chart js in angular 12 example; In this tutorial, i am going to show you how install chart js and create line chart in angular 12 app.

Chart.Js is a well-recognized JavaScript library, and It is used to represent the data using the HTML5 canvas. It allows us to build dynamic as well as static charts, and it comes with full animation support for the various charts. It takes data in the JSON form, so it is merely simple to use it with any programming language.

 Line Chart Example in Angular 12

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

Step 1 – Create New Angular App

Execute the following command on terminal 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 line chart in angular 11 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 – Import Modules on App.Module.ts File

Import modules; so 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 – Add Code on View File

Create line chart in angular 11 app. So, visit src/app/ and line-chart.component.htmland update the following code into it:

<div class="chart-wrapper">
    <canvas baseChart 
        [datasets]="lineChartData" 
        [labels]="lineChartLabels" 
        [options]="lineChartOptions"
        [colors]="lineChartColors" 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        [plugins]="lineChartPlugins">
    </canvas>
</div>

Step 5 – Add Code On line-chart.Component ts File

Go to src/app directory and open line-chart.component.ts. Then add the following code into component.ts file:

import { Component, } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {
  lineChartData: ChartDataSets[] = [
    { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  ];
  lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
  lineChartOptions = {
    responsive: true,
  };
  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];
  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';
  
}

Step 6 – Start the Angular Line Chart App

Execute the following command on terminal to start angular line chart app:

ng serve

Recommended Angular Posts