chartist js on action selectors: finding coordinates for the ct-point element

Question

essentially taking inspiration from this topic here (How to show label when mouse over bar) I wanted, as I mouseover onto a LINE chart [the example is with a Bar Chart] (even if I am not directly over the series), I wanted to:

1) get the value of the point of the series (s) I am over

2) get the css selectors of reference

so that I can

1) display the value

2) apply temporary CSS over the element (like enlarging the "point" element)

I tried to inspect the ct-chart object but the task proved to be daunting.

in practice:

var addedEvents = false;
chart.on('draw', function() {
  if (!addedEvents) {
    $('.ct-bar').on('mouseover', function() {
      $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value'));
    });

    $('.ct-bar').on('mouseout', function() {
      $('#tooltip').html('<b>Selected Value:</b>');
    });
  }
});

what is the equivalent for $(this).attr('ct:value') in the Line chart case?

in pictures (forget the line, I will deal with it later):

FROM:

TO:

Answer 1

document.querySelectorAll(".ct-point") //select all points in the chart

Once you have them you can retrieve the values with:

point.getAttribute("ct:value");

Similarly, you can select grid lines and such.