A Horizontal Bar chart with formatted tooltips

View the bare-bones version of this demo with any interactive features or animations enabled

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(

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>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):