RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »


Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

How do I get the xaxisLabels value when clicking on it?

Posted by Santhosh at 15:02 on Saturday 9th January 2021 [link]

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);

Posted by Richard at 16:31 on Saturday 9th January 2021 [link]
You were close - I've made a demo with a few alterations:


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

    <h1>Clickable labels</h1>

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

        new RGraph.Bar({
         data: '8,4,6,3,5,4,2'.split(','),
         options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            textAccessiblePointerevents: true

        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);



There's a codepen here that demonstrates it (only the first label is clickable - but it's easy to change that to all of the labels):


Posted by Santhosh at 17:21 on Saturday 9th January 2021 [link]
Hi Richard,

Your answers are always helpfull.

Thanks alot.

[Replies are now closed]