Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease.
A line chart or line graph is a type of chart that displays information as a series of data points called 'markers' connected by straight line segments.
In Line Chart Multi-Axis, we can define customized axis for each dataset. We will learn more about this using examples
Syntax:
<p-chart type="line"
[data]="..."
[options]="Options">
</p-chart>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save npm install chart.js --save
Project Structure: It will look like the following:
Steps to run the application: Run the below command to see the output.
ng serve --save
Example 1: In this example, we will show 2 datasets, and use 2 types of axis options i.e y and y1.
- app.component.html:
<div id="GFG">
<h1 style="color:green" >GeeksforGeeks</h1>
<h2>Angular PrimeNG Line Chart Multi Axis </h2>
<div style="width:50%;">
<p-chart type="line"
[data]="data"
[options]="chartOptions">
</p-chart>
</div>
</div>
- app.component.ts:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "GFG";
data = {
labels: ["Alpha", "Beta", "Gamma", "Delta", "Pie", "Phi", "Rho"],
datasets: [
{
label: "Dataset 1",
borderColor: "violet",
yAxisID: "y",
tension: 0.4,
data: [45, 69, 40, 61, 76, 35, 20]
},
{
label: "Dataset 2",
borderColor: "orange",
yAxisID: "y1",
tension: 0.4,
data: [48, 28, 60, 39, 65, 47, 50]
}
]
};
chartOptions = {
stacked: false,
plugins: {
legend: {
labels: {
color: "black"
}
}
},
scales: {
x: {
ticks: {
color: "black"
},
grid: {
color: "#ebedef"
}
},
y: {
type: "linear",
display: true,
position: "left",
ticks: {
color: "black"
},
grid: {
color: "#ebedef"
}
},
y1: {
type: "linear",
display: true,
position: "right",
ticks: {
color: "black"
},
grid: {
drawOnChartArea: false,
color: "#ebedef"
}
}
}
};
}
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {ChartModule} from 'primeng/chart';
@NgModule({
imports: [
BrowserModule,
ChartModule
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Example 2: In this example, we will show how can we use different line styles like dashed/filled, with a multi-axis line chart.
- app.component.html:
<div id="GFG">
<h1 style="color:green" >GeeksforGeeks</h1>
<h2>Angular PrimeNG Line Chart Multi Axis </h2>
<div style="width:50%;">
<p-chart type="line"
[data]="data"
[options]="chartOptions">
</p-chart>
</div>
</div>
- app.component.ts:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
title = "GFG";
data = {
labels: ["Alpha", "Beta", "Gamma", "Delta", "Pie", "Phi", "Rho"],
datasets: [
{
label: "Dataset 1",
borderColor: "violet",
yAxisID: "y",
tension: 0.4,
fill: true,
data: [45, 69, 40, 61, 76, 35, 20]
},
{
label: "Dataset 2",
borderColor: "orange",
yAxisID: "y1",
borderDash: [5, 5],
tension: 0.4,
data: [48, 28, 60, 39, 65, 47, 50]
}
]
};
chartOptions = {
stacked: false,
plugins: {
legend: {
labels: {
color: "black"
}
}
},
scales: {
x: {
ticks: {
color: "black"
},
grid: {
color: "#ebedef"
}
},
y: {
type: "linear",
display: true,
position: "left",
ticks: {
color: "black"
},
grid: {
color: "#ebedef"
}
},
y1: {
type: "linear",
display: true,
position: "right",
ticks: {
color: "black"
},
grid: {
drawOnChartArea: false,
color: "#ebedef"
}
}
}
};
}
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {ChartModule} from 'primeng/chart';
@NgModule({
imports: [
BrowserModule,
ChartModule
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Reference: http://www.primefaces.org/primeng/chart/line