Topic: Get point data on chart click

eMD Technologies free asked 5 years ago

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
    // should be able to use this function on chart
    // as per chartjs documentation

Damian Gemza staff commented 5 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,


eMD Technologies free commented 5 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 5 years ago

We will take a closer look at the problem with this output and provide a fix or workaround.

eMD Technologies free commented 5 years ago

Thank you so much. Awaiting your response.

Damian Gemza staff answered 5 years ago

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,


eMD Technologies free commented 5 years ago

Hi Damian,

Thanks for the response. Any indication on when the next update to MDB will be?

Damian Gemza staff commented 5 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,


kevtheboss free commented 3 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 3 years ago

@kevtheboss Which MDB product do you use?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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