How to create a horizontal or vertical progress bar

Summary
Creating Horizontal or Vertical Progress Bars can be done by using the Horizontal and Vertical Bar charts (or rather two of them - one for the background and one for the foreground).

There isn't a dedicated SVG horizontal or vertical progress bar but it's easy to emulate one by using the Horizontal or vertical Bar charts. There are two chart objects used - one for the foreground and one for the background. Because they are regular Bar charts it means that you can use any of the Bar chart properties such as tooltips.

1. The background to the progress bar

The first thing to do is create the background of the progress bar. This is a regular Bar chart that has a single value of 10. This leads to a scale generated for you of 0 - 10.

<script>
    vprogress1 = new RGraph.SVG.Bar({
        id: 'chart-container1',
        data: [10],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            hmargin: 0,
            colors: ['#eee'],
            attributionText: 'Charts by RGraph'
        }
    }).draw();
</script>

2. After the red bar has been added

<script>
    vprogress2 = new RGraph.SVG.Bar({
        id: 'chart-container2',
        data: [10],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            hmargin: 0,
            colors: ['#eee'],
            attributionText: 'Charts by RGraph'
        }
    }).draw();

    vprogress3 = new RGraph.SVG.Bar({
        id: 'chart-container2',
        data: [8],
        options: {
            xaxis: false,
            yaxis: false,
            backgroundGrid: false,
            hmargin: 7,
            colors: ['Gradient(red:#faa)'],
            shadow: true,
            attributionText: 'Charts by RGraph'
        }
    }).grow({frames: 60});
</script>

3. A Horizontal Progress Bar

To create a Horizontal Progress Bar the methodology is very much the same but instead of using the regular Bar chart you would use the Horizontal Bar chart. Here's an example of it along with some sample code.

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

    new RGraph.SVG.HBar({
        id: 'chart-container3',
        data: [7],
        options: {
            gutterLeft: 15,
            gutterRight: 15,
            gutterTop: 5,
            xaxisMax: 10,
            shadow: true,
            shadowOffsetx: 1,
            shadowOffsety: 1,
            shadowBlur: 1,
            colors: ['Gradient(#fcc:red)'],
            backgroundGrid: false,
            vmargin: 15,
            xaxis: false,
            xaxisUnitsPost: '%',
            yaxis: false
        }
    }).grow();
</script>
    

See also

RGraph on social media