A Horizontal Progress Bar using a customised Horizontal Bar chart.

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

Summary
The SVG Horizontal Bar chart can be customised to appear like a horizontal progress bar. This means that all of the Horizontal Bar chart properties are available to you.

The Horizontal Bar chart can be customised to appear as a horizontal progress bar. This means that all of the properties that pertain to the Horizontal Bar chart, such as tooltips, can be used as well. There's a demo in the download archive that you can also see here.

 

Example

The code below produces a chart like this:

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [10],
        options: {
            colors: ['#eee'],
            gutterLeft: 15,
            gutterRight: 15,
            backgroundGrid: false,
            strokestyle: '#ccc',
            vmargin: 10,
            xaxis: false,
            xaxisScale: false,
            yaxis: false,
            linewidth: .5
        }
    }).draw();

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [7],
        options: {
            xaxisMax: 10,
            shadow: true,
            shadowOffsetx: 1,
            shadowOffsety: 1,
            shadowBlur: 1,
            title: 'Results of the weekends competition',
            titleColor: '#666',
            titleBold: true,
            colors: ['Gradient(#fcc:red)'],
            colorsSequential: true,
            backgroundGrid: false,
            tooltips: ['Monday was an average day'],
            gutterLeft: 15,
            gutterRight: 15,
            vmargin: 15,
            xaxis: false,
            xaxisUnitsPost: '%',
            yaxis: false
        }
    }).grow();
</script>

See also