Simon Price Simon Price - 11 months ago 166
jQuery Question

Chart.js - Fill Text only appearing when hovering over one part of the doughnut

I am working with Chart.js and have an issue that I need some help with.

The doughnut is created correctly and shows the information I need, however, its only showing the filltext value when I hover over one aspect of the chart.

this is the code I am working with

options = {
cutoutPercentage: 75,
rotation: Math.PI,
//circumference: Math.PI * values[0],
//segmentShowStroke: false,
animation: {
animateScale: true,
onComplete: function () {
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(RpData.datasets[0].data[0] + "%", textX, textY);

legend: {
display: false,
tooltips: {
enabled: false,


var ctx = $("#riskFactorChart").get(0).getContext("2d");

var riskFactorChart = new Chart(ctx, {
type: 'doughnut',
data: RpData,
options: options

which appears like this;

enter image description here

What I am trying to achieve is to see the result of the mouse hover without having to hover the mouse over it to see my values.


Answer Source

Please provide full code of yours. As "RpData" is not the code.

Here is the jsfiddle link which working fine, but as you are not given any link to full snippet or code we can't check what the issue is...

Chart JS snippet - (dkrvl2011)