A 3D Bar chart with multiple rows
RGraph can make realistic-looking 3D Bar charts. This demo is a multi-row example of such a chart. There are three rows of bars that are animated sequentially.
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.
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.
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="650" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart: