# A Bar chart with a 3D effect

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.key.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <div style="display: inline-block; margin: 35px">
        <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
    </div>

This is the code that generates the chart:

    <script>
        new RGraph.Bar({
            id: 'cvs',
            data: [ [4,8,3],[5,2,1], [8,4,2],[3,6,1],[5,1,0],[2,5,1],[1,2,2] ],
            options: {
                textAccessible: true,
                variant: '3d',
                variantThreedAngle: 0.1,
                strokestyle: 'rgba(0,0,0,0)',
                colors: ['Gradient(#fbb:red)', 'Gradient(#bfb:green)','Gradient(#bbf:blue)'],
                gutterTop: 5,
                gutterLeft: 5,
                gutterRight: 15,
                gutterBottom: 50,
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                shadowColor:'#ccc',
                shadowOffsetx: 3,
                backgroundGridColor: '#eee',
                scaleZerostart: true,
                axisColor: '#ddd',
                unitsPost: 'km',
                title: 'Distance run in the past week',
                key: ['John','Kevin','Lucy'],
                keyShadow: true,
                keyShadowColor: '#ccc',
                keyShadowOffsety: 0,
                keyShadowOffsetx: 3,
                keyShadowBlur: 15
            }
        }).draw();
    </script>

« Back