An SVG Bar chart showing a bar-in-bar effect

There's a canvas version of this chart here. Here we have two Bar charts; one on top of the other depicting the production of cars versus that which is then sold. This is quite an effective visualisation as it allows you to see both statistics easily and conveys that the sold figure is going to be less than the produced figure.

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="width: 750px; height: 300px" id="cc"></div>
This is the code that generates the chart:
<script>
    data = {
        shipped: [88000,88000,105000,105000,116000,116000,126000],
        sold:    [30000,54000,54000,62000,63000,68000,68000]
    };

    bar1 = new RGraph.SVG.Bar({
        id: 'cc',
        data: data.shipped,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginLeft: 75,
            colors: ['rgba(0,0,255,0.2)'],
            xaxisLabels: ['Mini','Ford','Mercedes','BMW','Fiat','Renault','Honda'],
            labelsAbove: data.shipped,
            labelsAboveSize: 8,
            title: 'Total cars produced vs sold',
            colorsStroke: 'rgba(0,0,0,0)',
            yaxis: false
        }
    }).grow();

    bar2 = new RGraph.SVG.Bar({
        id: 'cc',
        data: data.sold,
        options: {
            yaxis: false,
            yaxisScaleMax: bar1.scale.max,
            yaxisScale: false,
            xaxis: false,
            marginLeft: bar1.get('marginLeft'),
            colors: ['pink'],
            labelsAbove: true,
            labelsAboveSize: 8,
            hmargin: 20,
            backgroundGrid: false,
            colorsStroke: 'rgba(0,0,0,0)',
            shadow: true
        }
    }).grow();
</script>