Bar chart with background "bars"

HTML

<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.BarChart({
        canvas: "cccExample",
        width:  400,
        height: 300,

        // Data source
        crosstabMode: false,

        // Interaction
        animate:    true,
        clickable:  true,
        selectable: true,
        hoverable:  true,

        // Bar plot
       stacked: true, // try commenting me
        //barSizeMax: 20, // try uncommenting me

        // Cartesian Axes
        // Activate base grid so that we can anchor on it,
        // but then, hide it
        baseAxisGrid: true,
        baseAxisGrid_lineWidth: 0,

        orthoAxisGrid: true, // try uncommenting me

        // Proportion of occupied vs free space
        baseAxisBandSizeRatio: 0.6,

        baseAxisGrid_add: function() {            
            // Add a Protovis background panel
            return new pv.Panel()
                // Use -20 to send behind ortho gridlines
                .zOrder(-20)
                .visible(function(scene) {
                    // Hide the last band 
                    // cause it is fictitious.
                    return this.index !== scene.parent.childNodes.length;
                })
                .width(function() {
                    // The band excludes empty space
                    var cccContext = this.getContext();
                    var baseScale  = cccContext.chart.axes.base.scale;
                    return baseScale.range().band;
                })
                .left(function() {
                    // The step includes empty space
                    var cccContext = this.getContext();
                    var baseScale  = cccContext.chart.axes.base.scale;
                    return this.delegate() + 
                           baseScale.range().step/2 - 
                           this.width()/2;
                })
                .fillStyle('darkgray');
        },
        
        orthoAxisGrid_add: function()...