Categorical base axis with ticks beside vertical labels

by duarteleao

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"></div>
<p>
<a href="http://jsfiddle.net/duarteleao/uw8fv9t9/" target="top">See related example for horizontal labels</a>

JavaScript

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

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

        // Vertical labels
        baseAxisLabel_textAngle:    -Math.PI/2,
        baseAxisLabel_textAlign:    'right',
        baseAxisLabel_textBaseline: 'middle',

        // 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: true,
        baseAxisTicks_height: 5,
        baseAxisLabel_textMargin: 8,

        // This is required.
        baseAxisLabel_call: function() {
            var pvLabel    = this;
            var pvDotLeft  = this.add(pv.Dot)
                // Maybe hide on scenes with skipped labels?
                //.visible(function(scene) { return !scene.isHidden; })
                .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.
                    return this.delegate() + pvLabel.textMargin();
                })
                .shape('tick')
                .shapeAngle(Math.PI)
                .shapeRadius(function() {
                    // Dunno why, but the tick's height is being accounted both before
                    // and after the label. I thought only the text margin
                    // should affect the opposite side...
                    var tickLength = 
                       // baseAxisTicks_height
 ...