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

});`