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>

« Back