A Vertical Progress bar can be created by using the Bar chart.

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 an example in the download archive that you can 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)'],
                marginLeft: 45,
                marginRight: 5,
                backgroundGrid: false,
                colorsStroke: '#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: {
                yaxisScaleMax: 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'],
                marginLeft: 45,
                marginRight: 5,
                hmargin: 15,
                xaxis: false,
                yaxisScaleUnitsPost: '%',
                yaxis: false
            }
        }).grow();
</script>