0

Is it possible to insert custom HTML-code as a xaxisLabel of a bar - graph?

Like

xaxisLabels: ['<i class="fa fas fa-check fa-2x"></i>']

In the result, the closing-Tag (</i>) is missing.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Michael
  • 17
  • 4

1 Answers1

0

There's no option to add custom HTML to labels but since the labels are DOM nodes (if you're using DOM text - which is on by default) you can manipulate them to you hearts content that way. Here's an example:

<!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>
        bar = 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,
            
            // If you just want to manipulate the style of the labels
            // there are these five properties

            //xaxisLabelsSize: 16,
            //xaxisLabelsFont: 'Verdana',
            //xaxiLabelsBold: true,
            //xaxisLabelsItalic: true,
            //xaxisLabelsColor: 'red'
          }
        }).draw();
        
        labels = document.getElementsByClassName('rgraph_accessible_text_xaxis_labels');

        // Maniuplate the style
        for (i=0; i<labels.length; ++i) {
            labels[i].style.fontWeight = 'bold';
            labels[i].style.fontStyle  = 'italic';
            labels[i].style.fontSize   = '14pt';
            labels[i].style.color      = 'red';
            labels[i].style.fontFamily = 'Verdana';
        }
        
        // Add a click event listener
        labels[0].addEventListener('click', function (e)
        {
            alert('Label was clicked');
        }, false);
        
        // Add a mousemove event listener
        labels[0].addEventListener('mousemove', function (e)
        {
            e.target.style.cursor = 'pointer';
        }, false);
    </script>
    

</body>
</html>

And on codepen:

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

EDIT:

In addition you could also use the RGraph.text.find() function after you create the chart like this:

labels = RGraph.text.find({
  object: bar,
    text: 'Wed'
});

labels[0].style.fontWeight = 'bold';
labels[0].style.cursor     = 'pointer';
labels[0].addEventListener('click', function (e)
{
    alert('My label!');
}, false);
Richard
  • 4,809
  • 3
  • 27
  • 46
  • In the next release (version 5.28) I'll add a new property called xaxisLabelsClick that you'll be able to set to a function that will make this a whole lot easier. You'll be able to set it to a function that will be called when a label is clicked on. This function will be passed the object and the index of the number. – Richard Jan 12 '21 at 15:27
  • Also, I'll add xaxisLabelsPre and xaxisLabelsPost. These won't be "escaped" so you'll be able to use HTML tags if you wish. – Richard Jan 12 '21 at 19:13
  • Instead of xaxisLabelPre and xaxisLabelsPost it may well be xaxisLabelsClass, xaxisLabelsId and possibly xaxisLabelsStyle. – Richard Jan 14 '21 at 15:45
  • When I edit the label-text like $(element).text('TEST') after the rgraph is drawn, then the new text/label ist not centered under the bar. How can I do this? – Michael Jan 21 '21 at 02:35
  • @Michael You'll habe to adjust the position to center it. You could perhaps use the transform: CSS property for this or relative CSS positioning (one of them works iirc). eg myLabel.style.transform = 'translateX(-10px)'; or with relative positioning you would use this: myLabel.style.position = 'relative'; myLabel.style.left = '-10px'; – Richard Jan 26 '21 at 15:44