Get XAxisLabel value on clicking on it

Hi I am using RGraph in my angular 7 application. all working as expected. But i need a feature as below.

I want to get the value of xaxislabel on clicking on it. Please let me know if anyone has answer.

Thanks in advance

I have tried below but not working

document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0].addEventListener('click', function(){
  alert('text'+ document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0].nodeValue);
  });

Solution

You were close - I've made a demo with a few alterations:

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
    <script src="https://www.rgraph.net/libraries/RGraph.bar.js"></script>
</head>
<body>

    <h1>Clickable labels</h1>

    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>

    <script>
        new RGraph.Bar({
          id:'cvs1',
          data: '8,4,6,3,5,4,2'.split(','),
          options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            textAccessiblePointerevents: true
          }
        }).draw();





        label = document.getElementsByClassName('rgraph_accessible_text_xaxis_labels')[0];





        // Add a mousemove listener that changes the mouse cursor to the hand
        label.addEventListener('mousemove', function(e)
        {
            e.target.style.cursor = 'pointer';
        }, false);





        // Add a click listener that shows an alert
        label.addEventListener('click', function(e)
        {
            alert('Text: '+ label.innerHTML);
        }, false);
    </script>
    

</body>
</html>

There's a codepen here that demonstrates it:

https://codepen.io/rgraph/pen/yLaEQWb