# A Bar chart using the labelsAbove option

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="padding: 15px">
        <canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
    </div>

This is the code that generates the chart:

    <script>
        var data = [
            [4,8,6,3],
            [4,5,6,3],
            [1,5,9,6],
            [5,8,4,2],
            [6,9,5,6],
            [4,4,5,3],
            [5,6,3,6]
        ];

        var labels = [
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday',
            'Sunday'
        ];

        var labelsAbove = [];

        // Create the labelsAbove
        data.forEach(function (v, k, arr)
        {
            labelsAbove[k * 4] = '{1}kg'.format(RGraph.arraySum(v))
        });

        var bar = new RGraph.Bar({
             id: 'cvs',
             data: data,
             options: {
                 textSize: 10,
                 textAccessible: false,
                 gutterTop: 35,
                 gutterBottom: 70,
                 textAngle: 45,
                 hmargin: 10,
                 labelsOffsety: 10,
                 labels: labels,
                 colors: ['#aaf', 'rgba(96,128,96,0.5)', '#faa','#afa'],
                 backgroundGridVlines: false,
                 backgroundGridBorder: false,
                 grouping: 'stacked',
                 strokestyle: 'transparent',
                 shadow: false,
                 labelsAbove: true,
                 labelsAboveSize: 12,
                 labelsAboveSpecific: labelsAbove,
                 noxaxis: true,
                 noyaxis: true,
             }
         }).wave();
    </script>