A Bar chart showing Google's power usage

Summary: An example of a stacked Bar chart that's been configured to look quite different to a standard Bar chart. It uses custom labels so that the top label has custom text added.

[No canvas support]

Here's a chart that was recently shown on Googles blog and I decided it would be a great one to recreate with RGraph. It uses the canvas library but it should be equally as simple to use the SVG libraries.

It's a stacked Bar chart which uses the labelsAboveSpecific option so that the labelsAbove labels can be specified explicitly.

The Y labels are specific, enabling the top label to have some text appended to it.

There's a key that's positioned on the left-hand-side and also a title that's positioned in the same place.

Also the Y axis is disabled, the X axis is colored gray and its tickmarks are disabled.

The responsive() function changes the size of the chart, changes the size of text on the chart and changes the key to be in the bottom right corner of the chart. It gives the key a semi-transparent white background too so that it's easier to read.

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="400">
    [No canvas support]
</canvas>

This is the code that generates the chart: