Angular PrimeNG ChartModel 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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG ChartModel Component.

The ChartModel Component is used to create different types of charts and is based on Chart.js, an open-source HTML5-based charting library. The ChartModel provides different types of properties that help us to customize the charts in Angular. We can easily feed data to the charts and also update them.

• Charts.js: Chart.js is an HTML5-based charting library that is widely used by to create static as well as dynamic charts such as bar graphs, pie charts, line graphs, etc.
• Chart Component: The Chart component is used to display a chart on a page. The classname is UIChart and the element tag is p-chart.
• Change Detection: The change in data is not automatically triggered. To redraw itself, a new data object needs to be created. 
• Properties: The properties are used to customize the component according to different needs and structure the component accordingly.
• Methods: The methods are used to perform some actions on the component and change its appearance or functionality. 
• Chart Types: Chart type is defined using the type property. Currently, there are 6 options available; pie, doughnut, line(line or horizontalBar), bar, radar, and polarArea.
• Data: The data of a chart is provided using a binding to the data property, each type has its own format of data
• Options: The general chart options are defined with options property.
• Events: The events are used to trigger some function when some interactions take place with the component.  When data is selected with a click event, the chart component provides an onDataSelect callback to process the selected data.
• Responsive: The Charts are responsive by default and vw-vh units can be used when customizing the width and height of the chart.

Syntax:

• Import Chart Module

import {ChartModule} from 'primeng/chart';

• Use it as follows

<p-chart type="pie" [data]="data"></p-chart>

Creating Angular application & Module Installation:

• Create an Angular application using the following command.

ng new geeks_angular

• After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

• Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save
npm install chart.js --save

• Include it in the project

"scripts": [
    "../node_modules/chart.js/dist/chart.js",
    //..others
],

Project Structure: The project structure will look like the following:

Example 1: In the following example, we have a pie chart with some data.

• app.component.html:

HTML

<h1 style="color: green;
               text-align:center;">
  GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG ChartModel Component
</h3>
<p-chart type="pie"
         [data]="basicData">
</p-chart>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    basicData: any;
    basicOptions: any;
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
    ngOnInit() {
        this.basicData = {
            labels: ['January', 'February', 'March',
                     'April', 'May', 'June'],
            datasets: [
                {
                    label: '2020',
                    data: [65, 59, 80, 81, 56, 55],
                    tension: 0.4,
                    backgroundColor: [
                        '#FF6371',
                        '#36A2EB',
                        '#FFCE45',
                        '#ff6200',
                        '#00ffbf',
                        '#9900ff',
                    ],
                    borderColor: '#42A5F5',
                },
            ],
        };
        this.basicOptions = {
            title: {
                display: true,
                text: 'Article Views',
                fontSize: 32,
                position: 'top',
            },
        };
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
import { ChartModule } from 'primeng/chart';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
        ChartModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the following example, we are showing a toast when the chart component is clicked.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG ChartModel Component
</h3>
<p-toast></p-toast>
<p-chart type="pie"
           [data]="basicData"
           (onDataSelect)="handleClick($event)">
</p-chart>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    basicData: any;
    basicOptions: any;
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }
    ngOnInit() {
        this.basicData = {
            labels: ['January', 'February', 'March',
                     'April', 'May', 'June'],
            datasets: [
                {
                    label: '2020',
                    data: [65, 59, 80, 81, 56, 55],
                    tension: 0.4,
                    backgroundColor: [
                        '#FF6371',
                        '#36A2EB',
                        '#FFCE45',
                        '#ff6200',
                        '#00ffbf',
                        '#9900ff',
                    ],
                    borderColor: '#42A5F5',
                },
            ],
        };
        this.basicOptions = {
            title: {
                display: true,
                text: 'Article Views',
                fontSize: 32,
                position: 'top',
            },
        };
    }
    handleClick(event) {
        this.messageService.add({
            severity: 'success',
            summary: 'GeeksforGeeks',
            detail: 'Data Item Clicked',
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
import { ChartModule } from 'primeng/chart';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule,
        ImageModule,
        ChartModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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