ChartsChart components are based on Charts.js 2.7.x, an open source HTML5 based charting library.

Charts.js

To begin with, first you must install the charts.js package using npm and then include it in your project. An example with CLI would be;

  2. npm install chart.js --save
  3.  
  2. "scripts": [
  3.     "../node_modules/chart.js/dist/Chart.js",
  4.     //..others
  5. ],
  6.  

Chart Component

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

Import

  2. import {ChartModule} from 'primeng/chart';
  3.  

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.

  2. <p-chart type="pie" [data]="data"></p-chart>
  3. <button type="button" pButton (click)="update($event)"></button>
  4.  
  2. update(event: Event) {
  3.     this.data = //create new data
  4. }
  5.  

Properties

NameTypeDefaultDescription
typestringnullType of the chart.
dataanynullData to display.
optionsanynullOptions to customize the chart.
pluginsany[]nullArray of per-chart plugins to customize the chart behaviour.
widthstringnullWidth of the chart.
heightstringnullHeight of the chart.
responsivebooleantrueWhether the chart is redrawn on screen size change.
onDataSelectfunctionnullCallback to execute when an element on chart is clicked.

Methods

NameParametersDescription
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.

  2. <p-chart type="line" [data]="data"></p-chart>
  3.  
  2. export class LineChartDemo {
  4.     data: any;
  6.     constructor() {
  7.         this.data = {
  8.             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  9.             datasets: [
  10.                 {
  11.                     label: 'First Dataset',
  12.                     data: [65, 59, 80, 81, 56, 55, 40]
  13.                 },
  14.                 {
  15.                     label: 'Second Dataset',
  16.                     data: [28, 48, 40, 19, 86, 27, 90]
  17.                 }
  18.             ]
  19.         }
  20.     }
  21. }
  22.  

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.

  2. <p-chart type="line" [data]="data" [options]="options"></p-chart>
  3.  
  2. export class LineChartDemo {
  4.     data: any;
  6.     options: any;
  8.     constructor() {
  9.         this.data = {
  10.             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  11.             datasets: [
  12.                 {
  13.                     label: 'First Dataset',
  14.                     data: [65, 59, 80, 81, 56, 55, 40]
  15.                 },
  16.                 {
  17.                     label: 'Second Dataset',
  18.                     data: [28, 48, 40, 19, 86, 27, 90]
  19.                 }
  20.             ]
  21.         }
  23.         this.options = {
  24.             title: {
  25.                 display: true,
  26.                 text: 'My Title',
  27.                 fontSize: 16
  28.             },
  29.             legend: {
  30.                 position: 'bottom'
  31.             }
  32.         };
  33.     }
  34. }
  35.  

Events

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

  2. <p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>
  3.  
  2. selectData(event) {
  3.     //event.dataset = Selected dataset
  4.     //event.element = Selected element
  5.     //event.element._datasetIndex = Index of the dataset in data
  6.     //event.element._index = Index of the data in dataset
  7. }
  8.  

Responsive

Charts are responsive by default and vw-vh units should be used when customizing the width and height of the chart.

  2. <p-chart type="line" [data]="data" width="40vw" height="80vh"></p-chart>
  3.  

If the chart is not responsive, other units should be preferred.

  2. <p-chart type="line" [data]="data" width="400px" height="400px" [responsive]="false"></p-chart>
  3.