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://primefaces.org/primeng/chart/line