Chart component is used to display a chart on page. The classname is UIChart and element tag is p-chart.
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 type is defined using the type property. Currently there are 6 options available; pie, doughtnut, line, bar, radar and polarArea.
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]
}
]
}
}
}
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'
}
};
}
}
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
}