A 3D Bar chart
View the bare-bones version of this demo with any interactive features or animations enabled

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.
This chart is animated and the second and
third charts are drawn using the animation callback
functions of the grow
effects. So the first
animations callback calls the function to draw the second
chart and the second animations callback calls the function that
draws the third chart and the axes.
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.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):