Bar Chart - Horizontal - Value Labels aligned to plot frame

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>

JavaScript

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

    // debug layout

    // def.setDebug(16);

    new pvc.BarChart({
        canvas: "cccExample",
        width:   600,
        height:  600,
        title:   "Horizontal Bar Chart com labels aligned with the panel",
        orientation: 'horizontal',
        animate:    false,
        selectable: true,
        hoverable:  true,

        valuesVisible: true,

        // Adjusts left and right plot paddings to 8% of domain
        // so that labels have some reserved space
        orthoAxisOffset: 0.07,

        extensionPoints: {
            // >= 0 -> left=-padding and right=null
            // <  0 -> left=null     and right=-padding
            // Unfortunately, this requires access to the panel private field: _layoutInfo.
            label_right: function(scene) { 
                return scene.vars.value.value >= 0 ? 
                       -this.panel._layoutInfo.paddings.right : 
                       null; 
            },
            label_left: function(scene) { 
                return scene.vars.value.value <  0 ? 
                       -this.panel._layoutInfo.paddings.left : 
                       null; 
            },
            label_textAlign:    function(scene) {
                return scene.vars.value.value >= 0 ? 'right' : 'left';
            },
            label_textBaseline: 'middle',

            // make as close as possible to the panel
            label_textMargin: 20,

            // Prevent hiding the text when values are too small
            label_visible: true
        }
    })
    .setData(relational_01_neg /* relational_01*/, { crosstabMode: false })
    .render();
});