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" >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:

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" >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:

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