Angular 13 Line Chart Tutorial with Example

Angular 13 line chart example; Through this tutorial, i am going to show you how to implement line chart using charts js library in the angular 13 apps.

Angular 13 Line Chart Tutorial with Example

Use the below given steps to make line chart in angular 13 apps:

  • Step 1 – Create New Angular App
  • Step 2 – Install Charts JS Library
  • Step 3 – Import Code on App.Module.ts File
  • Step 4 – Add Code on View File
  • Step 5 – Import Code On line-chart.Component ts File
  • Step 6 – Start the Angular Line 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 NPM package called ng2-charts chart.js –save for implement line chart in angular app:

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 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 Line Chart on View File

Go to src/app/ and line-chart.component.html and add 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 – Import Code On line-chart.Component ts File

Go to the src/app directory and open line-chart.component.ts. Then import 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

Run the following command on command prompt to start angular line chart app:

ng serve

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.