A Horizontal Bar chart using formatted tooltips

Here's a Horizontal Bar chart clearly 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's 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(%{group})}'
...

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.

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

<canvas id="cvs" width="600" height="275">
    [No canvas support]
</canvas>