Angular 16 Line Chart Tutorial with Example

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

Angular 16 Line Chart Tutorial with Example

Use the below given steps to make line chart in Angular 16 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

Angular 16 Line Chart Tutorial with Example