An SVG 3D Vertical Progress chart

This is a demo of a 3D Bar chart that's configured to look like a vertical progress bar - ie which has just a single bar. It has a tooltip, uses the tooltip RGraph event to set the border color and uses the object to set some default styles. Because there's only a single bar/dataset there's actually no need to use the tooltip event - you could just set the border color as a default instead.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src=""></script>
Put this where you want the chart to show up:
<div style="width: 350px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
    value = 89;

    vprogress = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [value],
        options: {
            variant: '3d',
            grouping: 'stacked',
            colorsStroke: 'rgba(0,0,0,)',
            colors: ['Gradient(#aaa:#bfb)'],
            marginTop: 30,
            marginLeft: 65,
            marginRight: 35,
            marginBottom: 35,
            xaxisLabels: ['Result'],
            xaxisColor: '#ddd',
            xaxisTickmarks: false,
            yaxisColor: '#ddd',
            yaxisScaleUnitsPost: 'km',
            yaxisTickmarks: false,
            shadow: false,
            backgroundGridColor: '#eee',
            titleY: 10,
            hmargin: 3,
            tooltips: ['Result: {1},000m'.format(value)],
            yaxisScaleMax: 100
    }).draw().on('tooltip', function (obj)
        var tooltip = RGraph.SVG.REG.get('tooltip'),
            idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__,; = '#0f0';

    // Some CSS that gets used for the tooltips        = '105%';      = 'Arial, sans-serif';      = 'bold';    = '10px';     = '10px';      = '10px';   = '10px';       = 'center'; = 'white';          = '3px #0f0 solid';     = '3px';