RGraph: HTML5 canvas graph library - Horizontal bar chart documentation

The horizontal bar graph is minor variation on the bar chart which can be useful when you have larger labels, since you have more space available to you for them.

The example file is here.

<script>
    window.onload = function ()
    {
        var data = [280,45,133,166,84,259,266,960,219,311];
    
        var hbar = new RGraph.HBar('myCanvas', data);
        hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']);
        hbar.Set('chart.gutter', 45);
        hbar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
        hbar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
        hbar.Set('chart.background.grid', true);
        hbar.Set('chart.colors', ['rgba(255,0,0,1)']);
        hbar.Draw();
    }
</script>

Available properties

You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg:

myHBar.Set('name', 'value');