How to add text inside the doughnut chart using Chart.js?

How to render Text inside the doughnut chart, I am using ChartJs.

You have to modify the code like: in chart.Doughnut.defaults

labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"

and then in function drawPieSegments

ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

See this pull: https://github.com/nnnick/Chart.js/pull/35

here is a fiddle http://jsfiddle.net/mayankcpdixit/6xV78/ implementing the same.

How to add text inside the doughnut chart using Chart.js, In this article I will demonstrates that how can you use the pluginServices to display the text in the center of the doughnut chart. In this article I will demonstrates that how can you use the pluginServices to display the text in the center of the doughnut chart. Pie and doughnut charts are probably the most commonly used charts. Sometimes you would like to create a doughnut chart with a label in the center of it. Start with the simple html which contains the canvas element:

None of the other answers resize the text based off the amount of text and the size of the doughnut. Here is a small script you can use to dynamically place any amount of text in the middle, and it will automatically resize it. http://jsfiddle.net/nkzyx50o/

It will take any amount of text in the doughnut sized perfect for the doughnut. To avoid touching the edges you can set a side-padding as a percentage of the diameter of the inside of the circle. If you don't set it, it will default to 20. You also the color, the font, and the text. The plugin takes care of the rest.

The plugin code will start with a base font size of 30px. From there it will check the width of the text and compare it against the radius of the circle and resize it based off the circle/text width ratio.

This is the plugin code

 Chart.pluginService.register({
  beforeDraw: function (chart) {
    if (chart.config.options.elements.center) {
      //Get ctx from string
      var ctx = chart.chart.ctx;

      //Get options from the center object in options
      var centerConfig = chart.config.options.elements.center;
      var fontStyle = centerConfig.fontStyle || 'Arial';
      var txt = centerConfig.text;
      var color = centerConfig.color || '#000';
      var sidePadding = centerConfig.sidePadding || 20;
      var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
      //Start with a base font of 30px
      ctx.font = "30px " + fontStyle;

      //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      var stringWidth = ctx.measureText(txt).width;
      var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

      // Find out how much the font can grow in width.
      var widthRatio = elementWidth / stringWidth;
      var newFontSize = Math.floor(30 * widthRatio);
      var elementHeight = (chart.innerRadius * 2);

      // Pick a new font size so it will not be larger than the height of label.
      var fontSizeToUse = Math.min(newFontSize, elementHeight);

      //Set font settings to draw it correctly.
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
      ctx.font = fontSizeToUse+"px " + fontStyle;
      ctx.fillStyle = color;

      //Draw text in center
      ctx.fillText(txt, centerX, centerY);
    }
  }
});

And you use the following options in your chart object

options: {
  elements: {
      center: {
      text: 'Desktop',
      color: '#36A2EB', //Default black
      fontStyle: 'Helvetica', //Default Arial
      sidePadding: 15 //Default 20 (as a percentage)
    }
  }
}

Credit to @Jenna Sloan for help with the math used in this solution.

How to add text inside the doughnut chart using Chart.js , How to render Text inside the doughnut chart, I am using ChartJs. Answers: You have to modify the code like: in chart.Doughnut.defaults Add text inside the Doughnut chart of the React-Chartjs-2 box to react Hot Network Questions Cheap and safe way to dim 100+ 60W Incandescent bulbs

Here is cleaned up and combined example of above solutions - responsive (try to resize the window), supports animation self-aligning, supports tooltips

https://jsfiddle.net/cmyker/u6rr5moq/

Chart.types.Doughnut.extend({
    name: "DoughnutTextInside",
    showTooltip: function() {
        this.chart.ctx.save();
        Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
        this.chart.ctx.restore();
    },
    draw: function() {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

        var width = this.chart.width,
            height = this.chart.height;

        var fontSize = (height / 114).toFixed(2);
        this.chart.ctx.font = fontSize + "em Verdana";
        this.chart.ctx.textBaseline = "middle";

        var text = "82%",
            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
            textY = height / 2;

        this.chart.ctx.fillText(text, textX, textY);
    }
});

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}];

var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')).DoughnutTextInside(data, {
    responsive: true
});
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<body>
    <canvas id="myChart"></canvas>
</body>
</html>

Chart.js version 2 responsive doughnut with text inside, 23. var promisedDeliveryChart = new Chart(document.getElementById('myChart')​, {. 24. type: 'doughnut',. 25. data: data,. 26. options: {. 27. responsive: true,. 28. I'm using a doughnut chart in Angular Chart. I want to place some text in the center of the doughnut. I've read this question's answers but none of them works for me, because I have tooltips and for some reason the text disappears when you hover the chart. Moreover, I need to provide this text from "outside" - custom text, e.g. a title.

I'd avoid modifying the chart.js code to accomplish this, since it's pretty easy with regular CSS and HTML. Here's my solution:

HTML:

<canvas id="productChart1" width="170"></canvas>
<div class="donut-inner">
    <h5>47 / 60 st</h5>
    <span>(30 / 25 st)</span>
</div>

CSS:

.donut-inner {
   margin-top: -100px;
   margin-bottom: 100px;
}
.donut-inner h5 {
   margin-bottom: 5px;
   margin-top: 0;
}
.donut-inner span {
   font-size: 12px;
}

The output looks like this:

ChartJs - Doughnut Chart with Text and Legend, Would you please advise how to approach? What I am think is Have a next to the //p-chart is how Angular4+primeNG wraps chart.js. Label inside donut chart of the doughnut not be a better solution than adding more to chart.js to achieve this? the chart - the text keeps on adding on and

This is also working at my end...

<div style="width: 100px; height: 100px; float: left; position: relative;">
<div style="width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; line-height:19px; text-align: center; z-index: 999999999999999">
    99%<Br />
    Total 
</div>
<canvas id="chart-area" width="100" height="100" />

Write text in donut chart center. · Issue #36 · chartjs/chartjs-plugin , I saw this options before but I am using react-chartjs component and haven't found any configuration for showing data in the center of the donuts  HTML5 & JS Doughnut Charts A doughnut Chart is a circular chart with a blank center. Chart is divided into sectors, each sector (and consequently its central angle and area), is proportional to the quantity it represents.

How to write the custom label inside donuts chart · Issue #108 , Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage . This equates what percentage  Hi, I'm not very familiar with the canvas, I'd like to write something in the center of the doughnut and I've tried to use the ctx.fillText() without success, once I call the chartjs API it erases my text, and if I try to fillText after the call it output nothing.

Doughnut & Pie · Chart.js documentation, You can use title or subtitles to display text at center of the chart by title & subtitle can be positioned in the center of the pie/doughnut by  Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts. They are also registered under two aliases in the Chart core. Other than their different default

Pie chart, add text in the middle?, A doughnut (or donut) chart is a pie chart with a "hole" - a blank circular area <​script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js"></​script> To create a Doughnut chart, use the anychart.pie() chart constructor and the To put some text in the center of a Doughnut chart, create a label and assign it  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.

Comments
  • Is there anyone else who cannot find this drawPieSegments function?
  • Worth mentioning that it doesn't work with v2. Use included jsfiddle code for easy of use
  • How to add the % in a new line? is this supported?
  • Still this is the solution?
  • @ArunC.B - scroll down
  • Works great! Most other options break when the legend is on the right or left.
  • @Azimuth the text is set by text: 'Desktop', so change Desktop to what you want.
  • Awesome solution!
  • I updated your fiddle and added a maximum font size: jsfiddle.net/nkzyx50o/3059
  • Possible to split the text onto multiple lines? My text has 6 words and its overflowing between the bounds of the cutout