Share RGraph on Facebook Share RGraph on Twitter

A Horizontal Bar chart showing the popularity of various coding languages

[No canvas support]

This Horizontal Bar chart does not use the yaxisLabels option but instead has a minimal marginLeft setting and then uses some custom code in the draw event to manually draw some labels. It also uses the labelsAbove option to indicate the percentages for each bar.

The grow() effect is employed to animate the chart.

If the draw event wasn't used and the labels were simply added after the chart had been drawn then they would disappear when the canvas is cleared for the second frame of the animation. And that happens so fast that it would seem like they just aren't being drawn.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="450">
    [No canvas support]
</canvas>
This is the code that generates the chart: