Angular PrimeNG Line Chart Multi Axis
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:
HTML
< div id = "GFG" > < h1 style = "color:green" >w3wiki</ 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:
Javascript
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:
Javascript
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:
HTML
< div id = "GFG" > < h1 style = "color:green" >w3wiki</ 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:
Javascript
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:
Javascript
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