A grouped Bar chart

A straightforward Bar chart with a nice aesthetic to it. This style (ie the colors) of chart is frequently used by the BBC news website.

It's a grouped Bar chart with three data pieces per segment (the third data pieces are quite small when compared to the other two).

The background grid vertical lines are disabled (there's still a border around the edge of the grid) and there's a key that's positioned in the margin, on the left-hand-side.

If you like this style of chart, then you could also try a slightly larger font size.

The responsive function alters the text sizes of the chart and changes the css value of the float property so that on smaller screens it's not aligned to the right.

There now some tooltips on the chart which use both the tooltipsCss property and the formatted tooltips feature. These use a white-on-black theme and are left aligned - both using css. As a result they have a nice aesthetic to them.

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.common.key.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<div style="margin: 35px">
    <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
</div>

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

<script>
    // Create a Bar chart with a 2D array as the data. Each group
    // has three elements even though the chart gives the
    // impression that there's only two values.
    new RGraph.Bar({
        id: 'cvs',
        data: [
            [1075000,910000,10000],
            [900000,980000,15000],
            [970000,1050000,30000],
            [1100000,1120000,40000],
            [1190000,1230000,50000],
            [1270000,1260000,70000],
            [1300000,1150000,75000]
        ],
        options: {
            marginTop: 50,
            colors: ['#024E4E','#009997','#9ECECD'],
            xaxisLabels: ['2010','2011','2012','2013','2014','2015','2016'],
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridHlinesCount: 7,
            
            // The Y-axis on this chart has seven values (eight if you
            // include zero) instead of five and the maximum value is
            // specifically set to 1,400,000
            yaxisLabelsCount: 7,
            yaxisScaleMax: 1400000,
            
            // The key is specified to appear in the margin and is aligned to
            // the left-hand-side of the main chart area.
            key: ['Petrol','Diesel','All AFVs'],
            keyPosition: 'margin',
            keyPositionX: 100,

            titleY: '+5',
            titleBold: true,
            
            // Use formatted tooltips to show tooltips
            tooltips: '<i>Results for <b style="font-size: 14pt">%{property:key[%{index}]}</b> in <b style="font-size: 14pt">%{property:xaxisLabels[%{dataset}]}</b>:</i><br /><span style="font-size: 20pt">$%{value_formatted}',
            
            // Add some CSS values that are applied to the tooltip
            tooltipsCss: {
                textAlign: 'center'
            },
            responsive: [
                {maxWidth: null, width: 600, height: 300,options:{title: 'New car registrations in the UK, 2010-2016',textSize: 14, marginInner: 5,marginLeft: 100}, parentCss: {'float':'right',textAlign:'none'}},
                {maxWidth: 900, width: 400, height: 200,options:{title: 'New car registrations in the UK',textSize: 10, marginInner: 2,marginLeft: 100}, parentCss: {'float':'none',textAlign:'center'}}
            ]
        }
    }).grow().on('beforedraw', function (obj)
    {
        RGraph.clear(obj.canvas, 'white');

    });
</script>