Chartjs-How to see labels without losing middle text in doughnut chart

by

1👍

✅

Q1: Does anyone know how to make text permanent without losing the labels?

Just extend the doughnut chart to (always) draw your middle text after the chart draw is complete. Something like 

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function(){
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

        this.chart.ctx.font = Chart.helpers.fontString(14, "normal", "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif");
        this.chart.ctx.fillStyle = "Black";
        this.chart.ctx.textAlign = "center";
        this.chart.ctx.textBaseline = "middle";        
        this.chart.ctx.fillText("Hello World!", this.chart.width / 2, this.chart.height / 2);
    }
});

Fiddle – http://jsfiddle.net/upbcbyfb/

Q2: Does ChartNew working fine with Chrome? I heard that there are
some problems with the latest chrome and opera versions.

A cursory (titles only :-)) glance of the GitHub issue list (https://github.com/nnnick/Chart.js/issues?utf8=%E2%9C%93&q=milestone%3Av2.0+) does not show anything specific to Chrome or Opera.

If there is something specific you want to try out, you can always fiddle your code into the latest (awesomely customizable) version (you have to make a few changes though)

Here is a fiddle to get you started – http://jsfiddle.net/beehe4eg/

That said, the current v2.0.0 (alpha 3) is a pre-release version (see
https://github.com/nnnick/Chart.js/releases), so you probably don’t want to switch your production code to this right now.

Leave a comment