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

She founded Bet365 - an online gambling firm. Who would have guessed that gambling could be so profitable?! Ok perhaps everyone in the world! Personally though, if a company that I started earned just (?) five million pounds - I'd retire!

The chart itself is quite straight-forward with a single solid color for the bars, a small marginInner setting and large text. Being like this though makes the clarity of the chart quite good.

It also uses the labelsAbove setting to show the exact figures that the bars represent.

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:

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [6,5,13,30,54,199,220],
        options: {
            labelsAbove: true,
            labelsAboveSize: 16,
            labelsAboveUnitsPre: '£',
            labelsAboveUnitsPost: 'm',
            labelsAboveColor: '#1280A1',
            labelsAboveBold: true,
            colors: ['#1280A1'],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['2012','2013','2014','2015','2016','2017','2018'],
            textSize: 18,
            marginLeft: 85,
            yaxisScaleUnitsPost: 'm',
            yaxisScaleUnitsPre: '£'
        }
    }).draw();
</script>