Events

The chart component provides a click event on datasets to process the selected data using the onDataSelect event callback.
Let's take a line chart example with the onDataSelect event callback by passing an event object as follows:

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

In the component class, an event callback is used to display selected data information in the following message format:

selectData(event: any) {
  this.msgs = [];
  this.msgs.push({
    severity: 'info',
    summary: 'Data Selected',
    'detail': this.linedata.datasets[event.element._datasetIndex]
    .data[event.element._index]
  });
}

In the preceding event callback (onDataSelect), we used an index of the dataset to display information. There are also many other options from an event object:

• event.element: Selected element
• event.dataset: Selected dataset
• event.element._datasetIndex: Index of the...