How to add the value with Gauge.js

Question

I'm actually working with gauge.js. It's working correctly but I would like to add the value just as legend at the bottom of the canvas. In my example I just want to display 41%. Do you know a way to achieve this part ?

Here is the jsfiddle : http://jsfiddle.net/mopaetxp/

<canvas id="foo"></canvas>

var opts = {
lines: 12, // The number of lines to draw
angle: 0, // The length of each line
lineWidth: 0.1, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
colorStart: '#006EAB',   // Colors
colorStop: '#006EAB',    // just experiment with them
strokeColor: '#FFFFFF',   // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 10; // set animation speed (32 is default value)
gauge.set(41); // set actual value

Thanks a lot.

Answer 1

Use HTML LABEL Tag.check the demo here