Chart Component

Chart component is used to display a chart on page. The classname is UIChart and element tag is p-chart.

Import


import {ChartModule} from 'primeng/chart';

Charts.js

In order for chart component to work, include charts.js to your project. An example with CLI would be;


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

Change Detection

In order to chart to redraw itself, a new data object needs to be created. Changing the array contents without creating a new array instance does not trigger change detection.


<p-chart type="pie" [data]="data"></p-chart>
<button type="button" pButton (click)="update($event)"></button>


update(event: Event) {
    this.data = //create new data
}

Attributes of Chart Component.

Name	Type	Default	Description
type	string	null	Type of the chart.
data	any	null	Data to display.
options	any	null	Options to customize the chart.
width	string	null	Width of the chart in non-responsive mode.
height	string	null	Height of the chart in non-responsive mode.
onDataSelect	function	null	Callback to execute when an element on chart is clicked.

Methods

Name	Parameters	Description
refresh	-	Redraws the graph with new data.
reinit	-	Destroys the graph first and then creates it again.
generateLegend	-	Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.

Chart Types

Chart type is defined using the type property. Currently there are 6 options available; pie, doughtnut, line(line or horizontalBar), bar, radar and polarArea.

Data

Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart.


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


export class LineChartDemo {

    data: any;
    
    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
    }
}

Options

While a series can be customized per dataset, general chart options are defined with options property. Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.


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


export class LineChartDemo {

    data: any;
    
    options: any;
    
    constructor() {
        this.data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
                {
                    label: 'First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: 'Second Dataset',
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        }
        
        this.options = {
            title: {
                display: true,
                text: 'My Title',
                fontSize: 16
            },
            legend: {
                position: 'bottom'
            }
        };
    }
}

Events

When data is selected with click event, chart component provides onDataSelect callback to process the selected data.


<p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>


selectData(event) {
    //event.dataset = Selected dataset
    //event.element = Selected element
    //event.element._datasetIndex = Index of the dataset in data
    //event.element._index = Index of the data in dataset
}