score:5

with 2.1.x, you can write a plugin to do this


preview

enter image description here


script

chart.pluginservice.register({
    afterdraw: function (chart) {
        if (chart.config.options.elements.center) {
            var helpers = chart.helpers;
            var centerx = (chart.chartarea.left + chart.chartarea.right) / 2;
            var centery = (chart.chartarea.top + chart.chartarea.bottom) / 2;

            var ctx = chart.chart.ctx;
            ctx.save();
            var fontsize = helpers.getvalueordefault(chart.config.options.elements.center.fontsize, chart.defaults.global.defaultfontsize);
            var fontstyle = helpers.getvalueordefault(chart.config.options.elements.center.fontstyle, chart.defaults.global.defaultfontstyle);
            var fontfamily = helpers.getvalueordefault(chart.config.options.elements.center.fontfamily, chart.defaults.global.defaultfontfamily);
            var font = helpers.fontstring(fontsize, fontstyle, fontfamily);
            ctx.font = font;
            ctx.fillstyle = helpers.getvalueordefault(chart.config.options.elements.center.fontcolor, chart.defaults.global.defaultfontcolor);
            ctx.textalign = 'center';
            ctx.textbaseline = 'middle';
            ctx.filltext(chart.config.options.elements.center.text, centerx, centery);
            ctx.restore();
        }
    },
})

and then

    ...
    options: {
        elements: {
            center: {
                text: 'hello',
                fontcolor: '#000',
                fontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif",
                fontsize: 24,
                fontstyle: 'normal'
            }
        }
    }
};

fiddle - http://jsfiddle.net/a1r1kszb/


Related Query