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 RGraph.SVG.tooltips.style 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="RGraph.svg.bar.js"></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:
<script>
    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__, obj.data);

        tooltip.style.borderColor = '#0f0';
    });

    // Some CSS that gets used for the tooltips
    RGraph.SVG.tooltips.style.fontSize        = '105%';
    RGraph.SVG.tooltips.style.fontFamily      = 'Arial, sans-serif';
    RGraph.SVG.tooltips.style.fontWeight      = 'bold';
    RGraph.SVG.tooltips.style.paddingRight    = '10px';
    RGraph.SVG.tooltips.style.paddingLeft     = '10px';
    RGraph.SVG.tooltips.style.paddingTop      = '10px';
    RGraph.SVG.tooltips.style.paddingBottom   = '10px';
    RGraph.SVG.tooltips.style.textAlign       = 'center';
    RGraph.SVG.tooltips.style.backgroundColor = 'white';
    RGraph.SVG.tooltips.style.border          = '3px #0f0 solid';
    RGraph.SVG.tooltips.style.borderWidth     = '3px';
</script>