An SVG Bar chart showing the earnings of Britains highest paid boss

Here's a Bar chart that's a mock-up of a chart that was shown on the BBC news website. It shows the earnings of the UKs top earning female boss. She founded Bet365 - an online gambling firm. Who would have guessed that gambling could be so profitable...?

The chart itself is quite straight forward - it incorporates the following configuration:

• The Y scale has had units applied to it using the yaxisScaleUnitsPre and the yaxisScaleUnitsPost options.
• The labelsAbove option is enabled and also uses pre and post units by way of the labelsAboveUnitsPre and the labelsAboveUnitsPost options. They're also set to the same colour as the bars themselves.
• The background grid has had vertical lines turned off and also does not use the border.
• Both the X and the Y axes have been turned off.

As you can plainly see the chart is quite straight forward and far from "fancy". However when you simply want to convey some information to your users in an effective manner this can often be the best method to use.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="padding: 15px">
    <div style="width: 900px; height: 350px" id="chart-container"></div>
</div>

This is the code that generates the chart: