An example of a Horizontal Bar chart which has the Y axis centered. The chart has an ondraw event attached to it so that when the draw function is called a smll bit of text is added to the bottom right of the SVG tag that serves as a label showing what the X axis axis represents.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.hbar.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 850px; height: 500px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.HBar({ id: 'chart-container', data: [[-.27,-.21],[.06,.07],[0,.07],[.03,.03],[.03,.05],[.04,.06],[-.31,.38],[.09,.08],[-.02,.10],[.12,.11],[.22,.32],[.12,.1]], options: { gutterBottom: 40, gutterRight: 100, hmargin: 20, yaxisLabels: [ 'Food and non-alcoholic beverages', 'Alcohol and tobacco', 'Clothing and footwear', 'Housing and household services', 'Furniture and household goods', 'Health', 'Transport', 'Communication', 'Recreation and culture', 'Education', 'Restaurants and hotels', 'Miscellaneous goods and services' ], title: 'Contributions to the CPI 12-month rate: November 2015 and November 2016', yaxisColor: '#aaa', xaxisMin: 'mirror', xaxisMax: .5, xaxisDecimals: 1, xaxisLabelsCount: 10, backgroundGridHlines: false, backgroundGridBorder: false, xaxis: false, textColor: 'gray', textSize: 9, colors: ['#274796','#F5942F'], titleColor: 'gray', vmargin: 5 } }).on('draw', function (obj) { var prop = obj.properties; RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: 'Percentage points %', x: 840, y: obj.height - 5, halign: 'right', valign: 'bottom', font: prop.xaxisTextFont || prop.textFont, size: prop.xaxisTextSize || prop.textSize, bold: prop.xaxisTextBold || prop.textBold, italic: prop.xaxisTextItalic || prop.textItalic, color: prop.xaxisTextColor || prop.textColor }); }).grow(); </script>