Time-series Line 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"></div>

<p>
See <a href="https://jsfiddle.net/duarteleao/gbvfjp4m/">Bar Chart with Two-Line Tick labels</a>
for a more generic approach to two line labels.
</p>

JavaScript

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

    new pvc.LineChart({
        canvas: "cccExample",
        width:  600,
        height: 400,

        timeSeries:  true,
        dotsVisible: true,
        // adjust to actual font and line spacing
        baseAxisSize: 40,
        baseAxisDomainRoundMode: 'nice',
        extensionPoints: {
            // for default label
            baseAxisScale_dateTickFormat: '%d/%m',
            baseAxisLabel_add: function() {
                return new pv.Label()
                    // adjust to actual font and line spacing
                    .textMargin(15)
                    .text(function(s) { 
                        return String(s.getTick().getFullYear());
                    });
            }
        },

        animate:    false,
        selectable: true,
        hoverable:  true
    })
    .setData(relational_01, {crosstabMode: false})
    .render();
    console.log(relational_01);
});