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):