Charts Chart components are based on Charts.js 2.1.x, an open source HTML5 based charting library.

Chart Component

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

Import


import {UIChart} from 'primeng/primeng';

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.

Chart Types

Chart type is defined using the type property. Currently there are 6 options available; pie, doughtnut, line, 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
}