A 3D Bar chart with multiple rows

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 which 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.

The second and third Bar charts are drawn when they're triggered by the previous charts animation callback function (ie the second function is called by the first grow() animations callback and the third function is called by the second grow() animations callback).

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.bar.js"></script>

<canvas id="cvs" width="650" height="300">
    [No canvas support]
</canvas>