A stacked SVG 3D Bar chart

An example of a 3D stacked Bar chart. It's animated by using the wave() effect and has a title. There's also tooltips which use the tooltip custom RGraph event in order to change the color of the border of the tooltips (using CSS). It also uses the RGraph.SVG.tooltips.style object to set some defaults for the tooltips.

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:
    data     = [[4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,3],[2,5,1],[1,2,3]];
    tooltips = RGraph.SVG.arrayLinearize(data);

    tooltips.forEach(function (v,k,arr)
        arr[k] = 'Result: {1},000m'.format(

    var bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: data,
        options: {
            variant: '3d',
            grouping: 'stacked',
            colorsStroke: 'rgba(0,0,0,)',
            colors: ['Gradient(#faa:#fbb)','Gradient(#aaa:#bfb)','Gradient(#aaf:#bbf)'],
            marginTop: 30,
            marginLeft: 45,
            marginBottom: 80,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            xaxisColor: '#ddd',
            xaxisTickmarks: false,
            yaxisColor: '#ddd',
            yaxisScaleUnitsPost: 'km',
            yaxisTickmarks: false,
            tooltips: tooltips,
            shadow: false,
            backgroundGridColor: '#eee',
            title: 'Distance run in the past week',
            titleY: 10,
            hmargin: 3
    }).wave().on('tooltip', function (obj)
        var tooltip = RGraph.SVG.REG.get('tooltip'),
            idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data),
            colors  = ['red','#0f0','blue'];

        tooltip.style.borderColor = colors[idx[1]];

    // 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 black solid';
    RGraph.SVG.tooltips.style.borderWidth     = '3px';