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 chart data series
  • event.element._index: Index of the data element inside chart series
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.133.160