How do I get the xaxisLabels value when clicking on it? Posted by Santhosh at 15:02 on Saturday 9th January 2021 [link]
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);
});
Posted by Richard at 16:31 on Saturday 9th January 2021 [link]
You were close - I've made a demo with a few alterations:
------8<------
<!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>
------8<------
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):
https://codepen.io/rgraph/pen/yLaEQWb
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]