A "Who wants to be a millionaire?" style Bar chart
View the bare-bones version of this demo with any interactive features or animations enabled
This is an example of a Bar chart that has been customised to have an
appearance similar to the "Who wants to be a millionaire?" "Ask the
audience" results bar chart. It uses the draw event in conjunction with
the API to draw the text above the bars. The background gradient
is done with a CSS linear gradient - it's not drawn on the canvas. The
background grid is customised in linewidth and colors, the axes are disabled
and the text color is customised too.
The CSS gradient that's used in the canvas tag's style attribute is a
straightforward linear gradient but achieves a nice effect for the
background of the chart. The relevant CSS is this:
background-image: linear-gradient(45deg, black, blue, black);
It's made up of three parts - an angle for the gradient (which in this case is
45 degrees) and the colors that the gradient uses.
There's a whole HOWTO document about CSS gradients here
that shows you the various options that are available to you.
There's also an SVG version of this chart in
the download archive.
<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="300" height="250" style="border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px; float: right">[No canvas support]</canvas>This is the code that generates the chart - it should be placed AFTER the
canvas tag(s):