RGraph: 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.

chart.gutter The gutter of the graph. This is the area outside of the X and Y axis - where the labels go. If you're short on space for your labels, try increasing this.
Default: 25 		chart.background.barcolor1 The color of the background bars, (1 of 2).
Default: #dce5fe
chart.background.barcolor2 The color of the background bars, (2 of 2).
Default: #eee		 chart.background.grid Whether to show the background grid or not.
Default: true
chart.xmax (Optional) An optional max figure for the X scale.
Default: none (one is calculated)		 chart.background.grid.color The color of the background grid.
Default: #ddd
chart.colors An array of the colors of the actual bars.
Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']		 chart.labels An array of the labels to be used on the graph.
Default: An empty array
chart.text.style The style (color etc) of the labels.
Default: #000		 chart.text.size The size (in pixels) of the labels.
Default: 12
chart.grouping How the bars are grouped, and it should be one of: grouped or stacked
Default: grouped 		chart.title The title of the graph, if any.
Default: null
chart.background.grid.hsize The horizontal background grid size.
Default: 40		 chart.background.grid.vsize The vertical background grid size.
Default: 18
chart.shadow Whether a small drop shadow is applied.
Default: false		 chart.shadow.color The colour of the shadow.
Default: #666
chart.shadow.offsetx The X offset of the shadow.
Default: 3		 chart.shadow.offsety The Y offset of the shadow.
Default: 3
chart.shadow.blur The severity of the shadow blurring effect.
Default: 3		 chart.yaxispos The position of the Y axis. Works with regular and grouped charts. Can be either center or left.
Default: left
chart.key An array of key information.
Default: [] (An empty array)		 chart.key.background The colour of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
Default: white
chart.key.position Determines the position of the key.Either graph (default), or gutter.
Default: graph		 chart.background.grid.width The width that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 0.5
chart.contextmenu An array of context menu items. You cannot have context menus AND tooltips, only one or the other. More information on context menus is here.
Default: [] (An empty array) 		chart.key.shadow Whether a small drop shadow is applied to the key.
Default: false
chart.units.pre The units that the X axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: none 		chart.units.post The units that the X axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: none
chart.vmargin The vertical margin that is applied to each individual bar.
Default: 3 		chart.strokestyle The colour of the outlines of the bars.
Default: black
chart.tooltips An array of tooltips for the chart.
Default: An empty array 		chart.tooltip.effect The visual effect used when showing tooltips. Can be either fade or expand.
Default: fade
chart.annotatable Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false 		chart.annotate.color If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black
chart.title.vpos This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null 		chart.title.color The color of the title.
Default: black
chart.labels.above This is a boolean which if true, will cause labels to be shown to the right of the bars. (It's called "above" for API compatibility).
Default: false 		chart.background.grid.border Determines whether a border line is drawn around the grid.
Default: true
chart.background.grid.hlines Determines whether to draw the horizontal grid lines.
Default: true		 chart.background.grid.vlines Determines whether to draw the vertical grid lines.
Default: true

You can set these properties by using the Set() method. Eg:

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