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