About
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 »

 

License
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 »

 

Download
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 »

A Horizontal Bar chart with formatted tooltips

[No canvas support]

Here's a Horizontal Bar chart indicating the 2016 UK referendum results. Let's not dwell on the disastrous nature of the vote though and look at the chart, shall we?

It has a high marginInner setting - though the bars are still quite thick due to the height of the chart and the fact that there are only two values that are being represented.

It uses the labelsAbove setting, has tooltips and the number of x-axis labels has been increased. The number of vertical background grid lines has been increased to match the number of labels.

The responsive function reduces the size of the chart, the text that's on the chart, slightly reduces the marginInner and reduces the number of x-axis labels that you see. It also removes the css float on the canvas tag.

This demo shows the new formatted tooltips feature - which allows you to specify the tooltips as a string instead of an array of tooltips:

...
tooltips: '%{function:getTooltip(%{dataset})}'
...

The getTooltip function is called with the group ID given as an argument and that function looks like this:

// Format and return the correct tooltip
function getTooltip(group)
{
    var results = [
        [408,'The "Leave" campaign won a significant<br />majority with a total of 408 seats.'],
        [242, 'The "Remain" campaign fought valiantly<br />but, alas, it was to no avail.']
    ];

    return 'Seats: <b>{1}</b><br /><span style="color: #666">{2}</span>'.format(
        results[group][0],
        results[group][1]
    );
}

This function returns the correct text based on the group ID that is given and that text is then used as the tooltip.

And finally, it's animated using the grow effect - which is a linear growing effect.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<div style="float: right">
    <canvas id="cvs" width="600" height="275">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    //
    // This the function that builds and returns the
    // correct tooltip based on the group ID that is
    // passed to it
    function getTooltip(group)
    {
        var results = [
            [408,'The "Leave" campaign won a significant<br />majority with a total of 408 seats.'],
            [242, 'The "Remain" campaign fought valiantly<br />but, alas, it was to no avail.']
        ];

        return 'Seats: <b>{1}</b><br /><span style="color: #ccc">{2}'.format(
            results[group][0],
            results[group][1]
        );
    }

    // A pretty standard Horizontal Bar chart which has two bars that are
    // showing the results of the 2016 UK Europe referendum/disaster. The
    // tooltips have HTML in them which is fine because tooltips are
    // actually just &lt;div&gt; tags.
    new RGraph.HBar({
        id: 'cvs',
        data: [408,242],
        options: {
            xaxisLabelsSize: 10,
            yaxisLabels: ['Leave','Remain'],
            marginTop: 70,
            xaxis: false,
            yaxisColor: '#ccc',
            backgroundGridBorder: false,
            backgroundGridHlines: false,
            backgroundGridVlinesCount: 18,
            labelsAbove: true,
            tooltips: '%{function:getTooltip(%{dataset})}',
            tooltipsCss: {
                fontFamily: 'Arial',
                fontSize: '14pt'
            },
            
            // Use the newer highlight inverting so that the bars that aren't highlighted
            // are faded out.
            highlightStyle: 'invert',
            highlightFill: 'rgba(255,255,255,0.85)',

            titleBold: true,
            titleY: '-10',
            titleHalign: 'center',
            titleColor: 'gray',
            responsive: [
                {maxWidth: null, width: 600,height: 275,options: {titleSize: 18,textSize: 14,marginInner: 25,xaxisLabelsCount: 18, title: 'Leave vs Remain - General election seats won\r\nbased on EU referendum results',},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 700, width: 400,height: 225,options: {titleSize: 14,textSize: 12,marginInner: 15,xaxisLabelsCount: 9,title: 'Leave vs Remain - General election seats\r\nbased on EU referendum results',},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }

    // Use the grow() animation effect
    }).grow();
    
    // This is a way to specify CSS values for the tooltips. You
    // should use the JavaScript versions of the CSS names (ie
    // hyphens are replaced with capital letters as shown below).
    // A few names are significantly different (eg "float"
    // becomes "cssFloat")
    RGraph.tooltips.style.textAlign = 'left';
</script>