An animated Bar chart

View the bare-bones, stripped-down version of this demo

[No canvas support]

This is a grouped Bar chart with two bars per group which uses red and blue graduated fills. The background grid has been customised and the background itself is a dark color (so the text has been changed to white). Also, the chart is using the Bar chart wave() effect. This grows sequentially from the left-hand side with a small delay between each group of bars.

The two gradients that are used here (Gradient(white:#ccf:#ccf:#ccf:#ccf) and Gradient(white:#faa:#faa:#faa:#faa)) are created by using the RGraph specific gradient syntax. This is an easy way to produce gradients (it's certainly easier than the canvas API method!) and can be utilised to produce gradients for your own charts.

If you wanted to add further information to the chart to identify the meaning of the two bars you could add a key in either the graph or margin modes or you could perhaps use the labelsAbove option.

For smaller screens, the responsive() function reduces the size of the chart, reduces the size of the text on the chart and reduces the size of the margins.

This demo shows the new highlighting style - invert. This reverses the highlighting from adding a rectangle over the focused bar to adding rectangles to every rectangle except the focused bar.

The tooltips have no fade effect and are positioned at the top right of the canvas tag by using the tooltip event. This runs a snippet of code that gets the canvas tag x/y coordinates and sets the position of the tooltip accordingly.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="500" height="250" style="background-color: #333; border-radius: 5px; box-shadow: 2px 2px 2px #999; float: right">[No canvas support]</canvas>

<!-- Center align the tooltip key -->
<style>
    /*
    * .RGraph_tooltip table {
    *    margin-left: auto;
    *    margin-right: auto;
    * }
    */
</style>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):