RGraph demo page: An orange/blue SVG Bar chart

RGraph demo: An orange/blue SVG Bar chart

An orange/blue SVG Bar chart

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>
This is the code that generates the chart:
    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',
                'Recreation and culture',
                '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 =;

            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

« Back