An example of using two bar charts to achieve a bar-in-bar effect

Posted on 1st October 2017 [No canvas support]

This is a noteworthy example of how you can combine two Bar chart objects to achieve a "bar-in-bar" effect. It could be used to represent supply/sales of something (cars in this example). You can find a demo of this type of chart in the demo section.


<script>
    data = {
        shipped: [88000,88000,105000,105000,116000,116000,126000],
        sold:    [30000,54000,54000,62000,63000,68000,68000]
    };

    bar1 = new RGraph.Bar({
        id: 'cvs',
        data: data.shipped,
        options: {
            gutterLeft: 75,
            colors: ['rgba(0,0,255,0.2)'],
            labels: ['Mini','Ford','Mercedes','BMW','Fiat','Renault','Honda'],
            labelsAbove: data.shipped,
            labelsAboveSize: 8,
            title: 'Total cars produced vs sold',
            strokestyle: 'rgba(0,0,0,0)'
        }
    }).grow();

    bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data.sold,
        options: {
            ymax: bar1.scale2.max,
            gutterLeft: bar1.get('gutterLeft'),
            colors: ['pink'],
            noaxes: true,
            labelsAbove: true,
            labelsAboveSize: 8,
            hmargin: 20,
            ylabels: false,
            backgroundGrid: false,
            strokestyle: 'rgba(0,0,0,0)'
        }
    }).grow();
</script>