Angular 17 Chart JS using ng2-charts Example

By Hardik Savani May 2, 2024 Category : Angular

Hi Developer,

I am going to explain to you example of angular 17 charts example. let’s discuss about angular 17 chart js using ng2-charts. I explained simply step by step angular 17 chart js. you can understand a concept of angular 17 ng2 charts examples. Alright, let’s dive into the steps.

The ng2-charts package offers a chart js for line charts, pie charts, Bar charts, Doughnut charts etc. in this example, we will create simple like charts using ng2-charts package. so, let's follow the following steps:

Step for How to Add Charts in Angular 17

  • Step 1: Create Angular 17 Project
  • Step 2: Install ng2-charts Package
  • Step 3: Update Ts File
  • Step 4: Update HTML File
  • Run Angular App

Let's follow the steps:

Step 1: Create Angular 17 Project

You can easily create your angular app using below command:

ng new my-new-app

Step 2: Install ng2-charts Package

Now in this step, we need to just install ng2-charts in our angular application. so let's add as like bellow:

npm install ng2-charts --save

Step 3: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';

import { NgChartsModule } from 'ng2-charts';

import { ChartConfiguration, ChartOptions, ChartType } from "chart.js";

@Component({

selector: 'app-root',

standalone: true,

imports: [CommonModule, NgChartsModule],

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'ng2-charts-demo';

public lineChartData: ChartConfiguration<'line'>['data'] = {

labels: [

'January',

'February',

'March',

'April',

'May',

'June',

'July',

'August',

'September',

'October',

'November',

'December'

],

datasets: [

{

data: [ 40, 45, 50, 55, 60, 65, 70, 75, 70, 60, 50, 45 ],

label: 'Angular',

fill: true,

tension: 0.5,

borderColor: 'black',

backgroundColor: 'rgba(255,0,0,0.3)'

},

{

data: [ 45, 50, 60, 70, 75, 65, 50, 60, 55, 50, 45, 45 ],

label: 'React',

fill: true,

tension: 0.5,

borderColor: 'black',

backgroundColor: 'rgba(0,255,0,0.3)'

}

]

};

public lineChartOptions: ChartOptions<'line'> = {

responsive: false

};

public lineChartLegend = true;

}

Step 4: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>Angular 17 Chart JS using ng2-charts Example - ItSolutionStuff.com</h1>

<div style="display: block;">

<canvas baseChart width="800" height="400"

[type]="'line'"

[data]="lineChartData"

[options]="lineChartOptions"

[legend]="lineChartLegend">

</canvas>

</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Preview:

now you can check it.

I hope it can help you...

Shares