A Vertical Progress Bar using a customised 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 Bar chart can be customised to appear like a vertical progress bar. This means that all of the Bar chart properties are available to you.

The Bar chart can be customised to appear as a vertical progress bar. This means that all of the properties that pertain to the 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>
        // This Bar chart becomes the background of the progress bar
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [100],
            options: {
                colors: ['Gradient(#eee:white)'],
                gutterLeft: 45,
                gutterRight: 5,
                backgroundGrid: false,
                strokestyle: '#ccc',
                hmargin: 10,
                yaxis: false,
                yaxisScale: false,
                xaxis: false,
                linewidth: .5,
                shadow: true,
                shadowOpacity: .1
            }
        }).draw();
    
        // This Bar chart becomes the inner bar of the progress bar
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [73],
            options: {
                yaxisMax: 100,
                yaxisTextColor: '#666',
                shadow: true,
                shadowOffsetx: 1,
                shadowOffsety: 1,
                shadowBlur: 1,
                titleColor: '#666',
                colors: ['Gradient(red:#fcc)'],
                colorsSequential: true,
                backgroundGrid: false,
                tooltips: ['Monday was an average day'],
                gutterLeft: 45,
                gutterRight: 5,
                hmargin: 15,
                xaxis: false,
                yaxisUnitsPost: '%',
                yaxis: false
            }
        }).grow();
</script>