Angular PrimeNG ChartModel Events

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 are going to learn Angular PrimeNG ChartModel Events.

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 Events are called when some action is being performed on the component, appropriate action can be taken.

Angular PrimeNG ChartModel Events:

• onDataSelect(event): This event is triggered when we click on a data section of the chart.

Syntax:

<p-chart
    type="pie"
    [data]="basicData"
    (onDataSelect)="handleClick($event)">
</p-chart>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command:

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

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

Steps to run the application: Run the below command to see the output

ng serve --open

Example 1: Below is the example code that illustrates the use of Angular PrimeNG ChartModel Events. In the following example, we are showing a toast on data selection.

app.component.html:

HTML

<h1 style="color: green; text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG ChartModel Events</h3>
<p-toast></p-toast>
<p-chart
    type="pie"
    width="350px"
    [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 { HttpClientModule } from "@angular/common/http";
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: Below is another example code that illustrates the use of Angular PrimeNG ChartModel Events. In the following example, we will show the details of the selected data in the toast.

app.component.html:

HTML

<h1 style="color: green; text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG ChartModel Events</h3>
<p-toast></p-toast>
<p-chart
    type="pie"
    width="350px"
    [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 ClickedIndex:\t" + event.element.index
        });
        console.log(event);
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
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: https://primefaces.org/primeng/chart