A customised and adjustable Horizontal Bar chart

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="800" height="200">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    // Create the Horizontal Bar chart
    hbar = new RGraph.HBar({
        id: 'cvs',
        data: [75,25],
        options: {
            yaxisLabels: ['Johnny','Meredith'],
            adjustable: true,
            marginLeft: 150,
            xaxisScaleMax: 100,
            labelsAbove: true,
            labelsAboveSize: 18,
            labelsAboveUnitsPost: '%',
            labelsAboveDecimals: 1,
            textSize: 14,
            textAccessiblePointerevents: false,
            xaxis: false
        }
    }).draw().on('adjust', function (obj)
    {
        var shape = RGraph.Registry.get('chart.adjusting.shape');

        // Get the value of the bar that's just been adjusted
        var index = shape.index,
            value = hbar.data[index],
            other = 100 - value;
        
        // Now adjust the other value
        hbar.data[index ? 0 : 1] = other;
        
        RGraph.redraw();
    });
</script>