RGraph demo page: An SVG 3D Bar chart

RGraph demo: An SVG 3D Bar chart

An SVG 3D Bar chart

A 3D grouped Bar chart that has the X axis at the bottom of the chart. It's animated using the wave effect. It also uses the yaxisUnitsPost option to configure the Y axis labels.

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: 550px; 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',
            strokestyle: 'rgba(0,0,0,)',
            colors: [
            gutterTop: 30,
            gutterLeft: 45,
            gutterBottom: 80,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            xaxisColor: '#ddd',
            xaxisTickmarks: 0,
            yaxisColor: '#ddd',
            yaxisUnitsPost: 'km',
            yaxisTickmarks: 0,
            tooltips: tooltips,
            shadow: false,
            backgroundGridColor: '#eee',
            title: 'Distance run in the past week',
            hmargin: 7
    }).wave().on('tooltip', function (obj)
        var tooltip = RGraph.SVG.REG.get('tooltip'),
            idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__,,
            colors  = ['red','#0f0','blue']; = colors[idx[1]];

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

« Back