Categorical base axis with ticks beside horizontal 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"></div>
<p>
<a href="http://jsfiddle.net/duarteleao/bkvcf78m/" target="top">See related example for vertical labels</a>

JavaScript

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

    // def.setDebug(20);
    new pvc.BarChart({
        canvas: "cccExample",
        height: 400,
        crosstabMode: false,
        animate: false,

        // This doesn't deal well with labels being skipped, 
        // due to little space.
        // So, give the chart enough width, or
        // use the example that is finetuned for vertical labels.
        width: 900,
        baseAxisOverlappedLabelsMode: 'leave',

        // All the folllowing are not needed. 
        // They affect the resulting layout, though.
        panelSizeRatio: 0.5,
        barSizeRatio:   0.8,
        baseAxisOffset: 0.02,

        baseAxisGrid: true,
        baseAxisGrid_strokeStyle: 'lightgray',
        baseAxisGrid_antialias: false,
        baseAxisTicks_height: 10,

        // This is required.
        baseAxisLabel_call: function() {
            var pvLabel = this;
            pvLabel.top(6)
            var pvDotLeft = this.add(pv.Dot)
            .left(function() {
                var baseScale = this.getContext().chart.axes.base.scale;
                return -baseScale.range().step / 2;
            })
            .top(function() {
                // We're placed at the label's anchor point position
                // We still need to add the textMargin and half the 
                //  text height (actually a tighter text height is used).
                return this.delegate() +
                    pvLabel.textMargin() +
                    (1.5* pv.Text.fontHeight(pvLabel.font()) / 2);
            })
            .shape('bar')
            .shapeRadius(function() {
                var ems = 3.4; // Change to your liking!
                var h = ems * pv.Text.fontHeight(pvLabel.font());
                //var h = this.parent.height();

                return Math.sqrt(h);
            })
            .antialias(false)
            .lineWidth(1)
            .strokeStyle('black');

            //...