Angular PrimeNG BarChart 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. In this article, we will see the BarChart Multi Axis in the Angular PrimeNG

A Bar Chart or bar graph is a chart representing Grouped data in a rectangular bar form having lengths that are proportional to the values that they represent. In Multi Axis BarChart, dataSets can be assigned a customized axis using the property AxisID.

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:

Example 1: This example describes the basic usage of the BarChart Multi-Axis in Angular PrimeNG. Here, we will give ‘y’ axis to dataset1 and ‘y1’ axis to dataset2.

• app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Bar Chart Multi Axis</h2>
    <div style="width:70%;">
        <p-chart type="bar"
                 [data]="basicData"
                 [options]="multiAxisOptions">
        </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';
    basicData = {
        labels: ['January', 'February', 'March',
                 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'green',
            yAxisID: 'y',
            data: [65, 59, 80, 81, 56, 55, 10]
        }, {
            label: 'Dataset 2',
            backgroundColor: 'pink',
            yAxisID: 'y1',
            data: [28, 48, 40, 19, 86, 27, 90]
        }]
    }

    multiAxisOptions = {
        plugins: {
            legend: {
                labels: {
                    color: '#black'
                }
            },
            tooltips: {
                mode: 'index',
                intersect: true
            }
        },
        scales: {
            x: {
                ticks: {
                    color: '#black'
                },

            },
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                ticks: {
                    min: 0,
                    max: 100,
                    color: '#black'
                },

            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',

                ticks: {
                    min: 0,
                    max: 100,
                    color: 'red'
                }
            }
        }
    };
}

• 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({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        ChartModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we will display 3 datasets and use the indexAxis property to change orientation to vertical.

• app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Bar Chart Multi Axis</h2>
    <div style="width:70%;">
        <p-chart type="bar"
                 [data]="basicData"
                 [options]="multiAxisOptions">
        </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';
    basicData = {
        labels: ['January', 'February', 'March',
                 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'green',
            AxisID: 'x',
            data: [65, 59, 80, 81, 56, 55, 10]
        }, {
            label: 'Dataset 2',
            backgroundColor: 'pink',
            AxisID: 'x1',
            data: [28, 48, 40, 19, 86, 27, 90]
        },
        {
            label: 'Dataset 3',
            backgroundColor: 'yellow',
            AxisID: 'x',
            data: [32, 38, 60, 29, 26, 77, 60]
        }
        ]
    }

    multiAxisOptions = {
        indexAxis: 'y',
        plugins: {
            legend: {
                labels: {
                    color: '#black'
                }
            },
            tooltips: {
                mode: 'index',
                intersect: true
            }
        },
        scales: {
            y: {
                ticks: {
                    color: '#black'
                },

            },
            x: {
                type: 'linear',
                display: true,
                position: 'left',
                ticks: {
                    min: 0,
                    max: 100,
                    color: '#black'
                },

            },
            x1: {
                type: 'linear',
                display: true,
                position: 'right',

                ticks: {
                    min: 0,
                    max: 100,
                    color: 'red'
                }
            }
        }
    };
}

• 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({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        ChartModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/chart/bar