Show values in Doughnut Chart and Pie Chart

[fundon]

Pie#defaults and Doughnut#defaults add some options

scaleShowLabels: false,
scaleLabelPaddingX: 35,
scaleFontFamily : "'Arial'",
scaleFontSize : 12,
scaleFontStyle : "normal",
scaleFontColor : "#666",
scaleLabel : "<%=value%>",
...

[arnarstef]

Fantastic! just what I was looking for!

[stevendegroote]

Could be handy to immediately have an option whether or not to rotate the values. I would personally prefer the text to be horizontal, rather than rotated along the pie's centre.

[santiagorojo]

Totally useful.

[mattriddle]

Very nice!

[Mohamed-Abden]

Hello all
I Cannot add text in Pie/Doughnut Chart .
Please give me instructions to be able to add text.

var ctx = document.getElementById("myChart").getContext("2d");

    var data = [
        {
            value: 30,
            color:"#F7464A"
        },
        {
            value : 80,
            color : "#E2EAE9"
        }
    ];

    var options= {
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke : true,

        //String - The colour of each segment stroke
        segmentStrokeColor : "#fff",

        //Number - The width of each segment stroke
        segmentStrokeWidth : 2,

        //The percentage of the chart that we cut out of the middle.
        percentageInnerCutout : 50,

        //Boolean - Whether we should animate the chart
        animation : true,

        //Number - Amount of animation steps
        animationSteps : 100,

        scaleShowLabels : false,

        //String - Animation easing effect
        animationEasing : "easeOutBounce",

        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate : true,

        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale : true,

        //Function - Will fire on animation completion.
        onAnimationComplete : null,

        scaleLabelPaddingX: 35,
        scaleFontFamily : "'Arial'",
        scaleFontSize : 12,
        scaleFontStyle : "normal",
        scaleFontColor : "#666",
        scaleLabel : "<%=value%>"
    };
    new Chart(ctx).Pie(data,options);

[FVANCOP]

use the alternative version available at https://github.com/FVANCOP/ChartNew.js and check issue FVANCOP/ChartNew.js#18

[m19c]

Ping.

[dFelinger]

I use this simple extend function for show values.

Chart.types.Doughnut.extend({
        name: "DoughnutAlt",
        draw: function(){
            Chart.types.Doughnut.prototype.draw.apply(this, arguments);
            console.log(this);
            for(var i = 0; i < this.segments.length; i++){
                var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle) / 2),
                    rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius) / 2 + this.segments[i].innerRadius;

                x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);
                y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);
                ctxMain.textAlign = 'center';
                ctxMain.textBaseline = 'middle';
                ctxMain.fillStyle = '#fff';
                ctxMain.font = 'normal 20px Helvetica';
                ctxMain.shadowColor = 'rgba(0,0,0,.34)';
                ctxMain.shadowOffsetX = 0;
                ctxMain.shadowOffsetY = 2;
                ctxMain.shadowBlur = 2;
                ctxMain.fillText(this.segments[i].value, x, y);
            }
        }
    });

[nnnick]

+1 on @DimonHV's solution there.

Exactly the kind of use I'd planned for the extensions API.

You can actually get the canvas context from this within that function, to keep the chart type object oriented, and not relying on scope variables.

So in the example above you could replace ctxMain with this.chart.ctx.

[mannb1]

I want the labels outside of the pie or doughnut chart however, if I get the coordinates correct, the labels run off the canvas since the pie or donut chart always takes up the full canvas, anyway to add canvas margins or have them account for the labels without a bunch more code or customization?

[kiquenet]

Workgint together FVANCOP and Nick Downie ?

[DaeDeLeon]

Hi all, I'm been trying to edit this fantastic plugin with varying levels of success! Like many i've been trying get % value to show in the centre of each block, and also maintain the tool tip labels. I was happy to find many solutions to help me here and on Stacked but none are currently working for me. My JS skills are admittedly limited and it seems what ever i paste into the Chart.js doc, it results in my chart vanishing. I've tried many methods, i guess i'm just not putting new code in the right place. I'd also like to style the tool tips so they go over two lines as some of my labels are very long. Would be great if someone can help me with a more 'Idiot Proof' explanation as to how i can achieve these edits.

[EeKay]

Too bad that this pull request was killed instantly and no proper documentation (on how to implement this using plugin or something) is provided. This is a very much needed function :(