Bar Chart with Two-Line Tick labels

HTML

<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:  800,
        height: 400,
        animate:    false,
        selectable: true,
        hoverable:  true,
        /*readers: [
          "customers", 
          "territory", 
          "productLine", 
          "quantity", 
          "sales"
        ],
        visualRoles: {
          "category": "customers",
          "series": "productLine",
          "value": "quantity"
        },*/
    
        // Reserve enough space for second-line label.
        // Adjust to actual font and line spacing.
        baseAxisSize: 40,
        baseAxisOverlappedLabelsMode: "leave",
    
        // Leave 30% of space between category bands.
        // Adjust to your needs.
        baseAxisBandSizeRatio: 0.7,
        baseAxisFont: 'normal 10px "Open Sans"',
        
        baseAxisTickFormatter: function(v, label) {
          // Trick the layout procedure, into effectively 
          // not taking labels into account.
          // This defines scene.getTickLabel(), so that later,
          // in extension points, to obtain the original label, 
          // we have to resort to `this.scene.group.absLabel`
          return "";
        },
    
        baseAxisLabel_call: function() {
          var panel = this.sign.panel;
          this
            .localProperty("_textLines_")
            ._textLines_(function(scene) {
              var font = this.font();
              var bandWidth = panel.scale.range().band;
              return pvc.text.justify(
                scene.group.absLabel, 
                bandWidth, 
                font).map(function(line) {
                  return pvc.text.trimToWidthB(
                    bandWidth, line, font, '..');
                });
            })
            .text(function(scene) {
              var lines = this._textLines_();
              return lines.length > 0 ? lines[0] : "";
          ...