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