Legend Items with % size

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", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.BarChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        title:  "Legend Items with % size",
        titleFont: "bold 16px sans-serif",
        animate:    false,
        selectable: true,
        hoverable:  true,
        stacked:    true,

        contentMargins: '5%',

        legend: true,
        legendPaddings: 0,
        legendMargins:  '5 -10 0 -10',
        legendItemPadding: {width:'4%', height: '2%'},
        legendItemSize:    {width:'14.28%'},
        extensionPoints: {
            legendMarkerPanel_left: function(s) {
                return Math.max(0, 
                        (s.vars.itemClientSize.width -
                         s.vars.itemContentSize.width) / 2);
            }
        }
    })
    .setData(crosstab_02)
    .render();
});