A stacked SVG Waterfall chart using the Bar chart

A waterfall chart where each bar is covered by a stacked Bar chart so it looks like the Waterfall chart is a stacked variation. The chart is using the labelsAbove option which have been given a dark background color in order to make them more readable.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.waterfall.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div style="width: 800px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
    // This is the data for the Waterfall and each of the Bar charts
    data = {
        waterfall: [39,34,33,38],
        bar: [

    // Create the Waterfall chart
    waterfall = new RGraph.SVG.Waterfall({
        id: 'cc',
        data: RGraph.SVG.arrayClone(data.waterfall),
        options: {
            marginLeft: 50,
            xaxisLabels: ['John','Lewis','Pete','Jill','Total'],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false

    // Create the Bar charts
    for (var k=0; k<4; ++k) {

        (function (index)
            new RGraph.SVG.Bar({
                id: 'cc',
                data: [RGraph.SVG.arrayClone(data.bar[index])],
                options: {
                    ColorsStroke: 'rgba(0,0,0,0)',
                    colors: ['red','#eee'],
                    labelsAbove: true,
                    labelsAboveBold: true,
                    labelsAboveBackground: 'gray',
                    labelsAboveBackgroundPadding: 3,
                    labelsAboveColor: 'white',
                    labelsAboveUnitsPost: '%',
                    textSize:         8,
                    colorsSequential: true,
                    backgroundGrid: false,
                    xaxis:          false,
                    yaxis:          false,
                    yaxisScaleMax:       RGraph.SVG.arraySum(data.bar[index]),
                    yaxisScale:     false,
                    marginLeft:     waterfall.coords[index].x,
                    marginRight:    waterfall.width - (waterfall.coords[index].x + waterfall.coords[index].width),
                    marginTop:      waterfall.coords[index].y,
                    marginBottom:   waterfall.height - (waterfall.coords[index].y + waterfall.coords[index].height),
                    hmargin:        -1,
                    grouping:       'stacked'