A 3D Bar chart

View the bare-bones, stripped-down version of this demo

This style of 3D chart is not supported natively but is pretty easy to achieve - especially as all of the source code is shown below and you can just copy it!

First, some variables are defined that are used in the configuration - this is so that they're easier for you to edit and manage.

Each row of bars is actually a separate chart object and they're drawn inside a dedicated function. The 3D variant options turn off the 3D axes and the regular axes are also turned off. Slight shadows are set which add to the 3D effect.

The background grid is turned off for the second and third charts but is enabled for the first - the chart at the back.

The margins are set to those defined in the variables along with the Y-axis scale max value. The Y axis labels are turned off.

Finally, a drawing API Y-axis object is used to draw a Y-axis on the right-hand side. The color of this Y-axis is transparent so the only part of it that you can see is the labels.

Previously this chart was animated and the second and third charts were drawn using the animation callback functions of the grow() effects. Now, however, there is no animation so the charts can be drawn without using any callback functions.

Like the code for the rest of this chart, the responsive section is not inconsiderable. It reduces the size of the canvas, changes the X-axis labels to the three-letter variations of the weekday names, changes the margin sizes on all three objects and changes the textSize on the main Bar chart and the Y-axis object.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="float: right">
    <canvas id="cvs" width="650" height="300">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):