Angular PrimeNG BarChart Component

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 how to use the BarChart Component in 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.

Angular PrimeNG BarChart Component: There are 4 types of Bar Chart that are described below:

• Vertical BarChart: In this bar chart, data sets are oriented vertically
• Horizontal BarChart: In this bar chart, data sets are oriented horizontally
• Multi Axis BarChart: In this bar chart, data sets are oriented vertically with labels on both sides of the Y-axis
• Stacked BarChart: In this bar chart, data sets are represented one above other

Syntax:

<p-chart type="bar" 
         [data]="basicData" 
         [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:

Example 1: This example describes the basic use of the Stacked Bar Chart in Angular PrimeNG, where we will align the bar in a Horizontal Orientation.

• app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Bar Chart Stacked</h2>
    <div style="width:70%;">
        <p-chart type="bar"
                 [data]="basicData"
                 [options]="StackedOptions">
        </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: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
            'Thursday', 'Friday', 'Saturday'],
        datasets: [
            {
                label: 'Orders on Swiggy',
                backgroundColor: 'lightgreen',
                data: [66, 49, 81, 71, 26, 65, 60]
            },
            {
                label: 'Orders on Zomato',
                backgroundColor: 'pink',
                data: [56, 69, 89, 61, 36, 75, 50]
            },
            {
                label: 'Orders on Uber Eats',
                backgroundColor: 'gold',
                data: [52, 59, 99, 71, 46, 85, 30]
            },
            {
                label: 'Orders on Licious',
                backgroundColor: 'skyblue',
                data: [56, 52, 69, 81, 43, 55, 40]
            },

        ]
    };

    StackedOptions = {
        indexAxis: 'y',
        plugins: {
            legend: {
                labels: {
                    color: '#black'
                }
            }
        },
        scales: {
            x: {
                stacked: true,
                ticks: {
                    color: '#black'
                },
                grid: {
                    color: 'rgba(255,255,255,0.2)'
                }
            },
            y: {
                stacked: true,
                ticks: {
                    color: '#black'
                },
                grid: {
                    color: 'rgba(255,255,255,0.2)'
                }
            }
        }
    };
}

• 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: This example describes the basic use of the Horizontal BarChart in Angular PrimeNG.

• app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Bar Chart Horizontal</h2>
    <div style="width:70%;">
        <p-chart type="bar"
                 [data]="basicData"
                 [options]="horizontalOptions">
        </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: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
                 'Thursday', 'Friday', 'Saturday'],
        datasets: [
            {
                label: 'Booked',
                backgroundColor: 'green',
                data: [66, 49, 81, 71, 26, 65, 60]
            },


        ]
    };

    horizontalOptions = {
        indexAxis: 'y',
        plugins: {
            legend: {
                labels: {
                    color: '#black'
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: '#black'
                },
                grid: {
                    color: 'rgba(255,255,255,0.2)'
                }
            },
            y: {
                ticks: {
                    color: '#black'
                },
                grid: {
                    color: 'rgba(255,255,255,0.2)'
                }
            }
        }
    };
}

• 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