Question

24

Inserting percentage charts.js doughnut

rated 0 times [ 25] [ 1] / answers: 1 / hits: 31193 / 9 Years ago, fri, february 13, 2015, 12:00:00

i'm, using charts.js librarie and would like to know how could I add some mark to the hole of a doughnut chart (sth like a percentage)-

enter

My js

 jQuery(document).ready(function(){



var data = [

            {

                value: 5,

                color:#A1638C,

                highlight: #BF7AAF,

                label: Días Completados 1/21

            },

            {

                value: 95,

                color: #07659A,

                highlight: #4190BA,

                label: Días pendientes 20/21

            },



        ]





 var ctx = jQuery(#myChart).get(0).getContext(2d);

 var myDoughnutChart = new Chart(ctx).Doughnut(data);











});

My canvas:

<canvas id=myChart width=264px></canvas>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 9 Years ago alessandrol · Accepted Answer

enter

The donut chart is centered in the canvas, so you can calculate the center of the donut like this:

// get the canvas element and its context

var canvas = document.getElementById(myChart);

var ctx = canvas.getContext(2d);



// calculate the center of the canvas (cx,cy)

var cx=canvas.width/2;

var cy=canvas.height/2;

Then you can tell canvas to draw text vertically & horizontally centered around cx,cy like this:

// horizontally align text around the specified point (cx)

ctx.textAlign='center';



// vertically align text around the specified point (cy)

ctx.textBaseline='middle';



// draw the text

ctx.font='14px verdana';

ctx.fillStyle='black';

ctx.fillText(Text Here,cx,cy);

But you must wait for any animations to complete before drawing your centered text.

To do that you must tell ChartJS that you want a callback function triggered when it completes its animation. You can set the callback by setting the onAnimationComplete property of the chart options:

var myDoughnutChart = new Chart(ctx).Doughnut(data, {

    responsive : true,



    // when ChartJS has completed all animations then call the addText function

    onAnimationComplete: addText

});

Here's a demo putting it all together:

var doughnutData = [{

    value: 300,

    color: #F7464A,

    highlight: #FF5A5E,

    label: Red

  }, {

    value: 50,

    color: #46BFBD,

    highlight: #5AD3D1,

    label: Green

  }, {

    value: 100,

    color: #FDB45C,

    highlight: #FFC870,

    label: Yellow

  }, {

    value: 40,

    color: #949FB1,

    highlight: #A8B3C5,

    label: Grey

  }, {

    value: 120,

    color: #4D5360,

    highlight: #616774,

    label: Dark Grey

  }



];



window.onload = function() {

  var canvas = document.getElementById(chart-area);

  var ctx = document.getElementById(chart-area).getContext(2d);

  window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {

    responsive: true,

    onAnimationComplete: addText

  });



};



var myDoughnutChart = new Chart(ctx).Doughnut(data);

var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {

  responsive: true,

  onAnimationComplete: addText

});





function addText() {



  var canvas = document.getElementById(chart-area);

  var ctx = document.getElementById(chart-area).getContext(2d);



  var cx = canvas.width / 2;

  var cy = canvas.height / 2;



  ctx.textAlign = 'center';

  ctx.textBaseline = 'middle';

  ctx.font = '14px verdana';

  ctx.fillStyle = 'black';

  ctx.fillText(Text Here, cx, cy);



}

body {

  padding: 10px;

  margin: 0;

}

#canvas-holder {

  width: 30%;

}

canvas {

  border: 1px solid red;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js></script>

<div id=canvas-holder>

  <canvas id=chart-area width=500 height=500 />

</div>