Topic: Get point data on chart click
Expected behavior Clicking on a line chart data point to fire onclick event and provide object in parameter to work with the values of the data point that was clicked on.
Actual behavior Looking at the API / Documentation, there are no examples of how one can actually get this information.
Once the click event is fired, the data passed to the function is the actual event that is emitted. Trying to extract the clicked (selected) data point from this event does not seem possible. (or at least I am missing something)
Nowhere on the MDB Charts section in the documentation, there is an actual implementation of the onChartClick function, only empty functions.
Resources (screenshots, code snippets, etc.)
(chartClick)="onChartClick($event)"
onChartClicked(e: any): void {
// viewing this object in the console to try and extract useful information from it
console.log(e);
// should be able to use this function on chart
// as per chartjs documentation
//https://www.chartjs.org/docs/latest/developers/api.html#getelementatevente
}
Dear @eMD Technologies
I have added new public method getPointDataAtEvent which will return clicked/hovered point data.
This feature will be available with the next version of MDB Angular.
Best Regards,
Damian
eMD Technologies commented 6 years ago
Hi Damian,
Thanks for the response. Any indication on when the next update to MDB will be?
Damian Gemza staff commented 6 years ago
If you're signed up to our newsletter, you'll get desired information via email.
The new version will be shipped on the 22nd of July.
Best Regards,
Damian
kevtheboss commented 4 years ago
Hi Damian
Why you don't have this function in the mdb.js Version?
i have the Same Problem
thanks Kevin
Arkadiusz Idzikowski staff commented 4 years ago
@kevtheboss Which MDB product do you use?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: Desktop
- Browser: chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear @eMD Technologies
Actually I don't see any values emitted from this event. Only Chart config.
Which values would you like to get from the click on the point of the chart?
Best Regards,
Damian
eMD Technologies commented 6 years ago
Hi Damian,
Yes, that is exactly the problem. Here is the scenario:
A line chart is rendered with some data points. When I click on one of the data points it fires an event "onChartClicked($event)", I would expect to see the data point values instead of the chart config.
I did some reading on chart.js documentation and from what I can derive, I need to use a function called "getElementsAtEvent(evt)" in order to get the data for that data point as in their example below:
canvas.onclick = function(evt) { var activePoints = myLineChart.getElementsAtEvent(evt); // => activePoints is an array of points on the canvas that are at the same position as the click event. };Would you be able to provide me with an example of a line chart with some data where you can click on a data point and print out the selected data point values in the console?
Arkadiusz Idzikowski staff commented 6 years ago
We will take a closer look at the problem with this output and provide a fix or workaround.
eMD Technologies commented 6 years ago
Thank you so much. Awaiting your response.