Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
186
rated 0 times [  190] [ 4]  / answers: 1 / hits: 22822  / 8 Years ago, tue, august 2, 2016, 12:00:00

I want to create a Doughnut graph with two values. Clicking the graphs should print the value in center. I found a solution in stackoverflow similar to my requirement. I would like to use latest Chart.js library from github. Is this feature is available in latest Chart.js?


More From » jquery

 Answers
12

It is certainly possible to do something like this in Chart.js v2.x



I think the nicest way to do it is by using a plugin. In fact, Cmyker awnser to the question you linked to even updated his posts to show how this would work in Charts.js v2.x



See his fiddle: https://jsfiddle.net/cmyker/ooxdL2vj/



and the corresponding plugin definition:



Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;

ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + em sans-serif;
ctx.textBaseline = middle;

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

ctx.fillText(text, textX, textY);
ctx.save();
}
});

[#61174] Saturday, July 30, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shane

Total Points: 239
Total Questions: 91
Total Answers: 114

Location: Faroe Islands
Member since Tue, Jul 7, 2020
4 Years ago
;