Y Axis Unit Label Above

by duarteleao

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) {

    // def.setDebug(20);
    new pvc.LineChart({
        canvas: "cccExample",
        width:      500,
        height:     400,

        axisGrid: true,

        // Reserve space for the unit label

        // a) Use axis offset, a %
        //axisOffset: 0.02,

        // b) use chart margins (absolute)
        axisOffset: 0,
        margins: {top: 15},

        // Add the unit label
        orthoAxisLabel_add: function() {
            return new pv.Label()
                // Show only at the last tick
                .visible(function(scene) {
                    return !scene.nextSibling;
                })
                .font("bold 12px sans-serif")
                .top(-5)
                .textBaseline('bottom')
                .text("m²");
        }
    })
    .setData(relational_04, {crosstabMode: false})
    .render();
});