Line Chart: get point value when clicked

[ajamil888]

Unfortunately after going through a day looking for an answer on this issue, I'm not able to find it anywhere. Would appreciate if someone could help me out here:

I would like to obtain the point value of what the user clicks. So, for example in the image below, when the user click as shown, I want to get the value being 'ra_user3'. I'm currently getting ra_user1 which is not correct. I'm getting the correct clickedDate though.

`// LINE QaqcRA_CHART qaqc var QaqcRA_user_color = '["#2E6A2C","#CF55D3","#2C5426"]'; var QaqcRA_user_label = '["ra_user1","ra_user2","ra_user3"]';

var line = new Morris.Line({ element: 'QaqcRA_charts', resize: true, data: '[{"ra_updated_on":"18 May 2020","ra_user1":"7","ra_user2":"9","ra_user3":"6"},{"ra_updated_on":"19 May 2020","ra_user1":"3","ra_user2":"6","ra_user3":"4"},{"ra_updated_on":"20 May 2020","ra_user1":"0","ra_user2":"15","ra_user3":"9"},{"ra_updated_on":"21 May 2020","ra_user1":"8","ra_user2":"7","ra_user3":"8"},{"ra_updated_on":"22 May 2020","ra_user1":"8","ra_user2":"9","ra_user3":"7"}]', parseTime: false, xkey: 'ra_updated_on', xLabels: 'Inspection Date', xLabelAngle: 45, hideHover: 'false', ykeys: QaqcRA_user_label, labels: QaqcRA_user_label, lineColors: QaqcRA_user_color, hoverCallback: function(index, options, content, row) {

var finalContent = content;

return finalContent;

} });

$("#QaqcRA_charts svg").on('click', function(evt) {

var a = evt.target; var target_result = JSON.stringify(a); console.log("target_result: " + target_result); // target_result: {"raphael":true,"raphaelid":139}

var clickedDate = $(".morris-hover-row-label").html().trim(); var clickedPoint = $(".morris-hover-point").html().trim(); var comp = clickedPoint.split(":"); var clickedUser = comp[0];

console.log("clickedDate: " + clickedDate); // clickedDate: 20 May 2020 console.log("clickedUser: " + clickedUser); // clickedUser: ra_user1

});`