RGraph - custom-HTML in labels

Question

RGraph - custom-HTML in labels

106 views Asked by Michael At 11 January 2021 at 04:21

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.

Original Q&A

There are 1 answers

**Richard** · Accepted Answer · 2021-01-11T14:55:32+00:00

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

TechQA.

RGraph - custom-HTML in labels

There are 1 answers

Related Questions in RGRAPH

Popular Questions

Popular Tags

Trending Questions