Donut chart with a total label in the center

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" />

JavaScript

require(["ccc/pvc", "ccc/def"], function(pvc, def) {
    new pvc.PieChart({
        canvas: 'cccExample',
        width:  300,
        height: 300,

        animate:    false,
        selectable: true,
        hoverable:  true,

      //  valuesVisible: true,
     //   valuesLabelStyle: 'inside',
        valuesFont: '35px sans-serif',

        slice_innerRadiusEx: '55%',
        
        label_visible: function() { return !this.index; },
        label_left: null,
        label_top: null,
        label_textAngle: 0,
        label_textAlign: 'center',
        label_textBaseline: 'middle',
        label_strokeStyle: 'black',
        label_text: function() {
         var data = this.scene.group.parent;
          var valueDimName = this.panel.visualRoles.value
                 .firstDimensionName();
          var valueDim = data.dimensions(valueDimName);
          var total = valueDim.sumAbs();
          return valueDim.format(total);
        }
    })
    .setData(relational_04b, {crosstabMode: false})
    .render();
});