Adding knob LABEL inside jquery knob input value(not asking for percentage)

Question

I'm using jQuery plugin called Jquery Knob to create circular progress chart. I've achieved to show value and percentage but I also want to show a label inside the knob itself.This is what I've achieved: without label and this is what I want to achieve: with label

I've used the following code but don't know how to add a text on next line to percentage value(inside knob)

link: function(scope, element, attrs) {

        $(element).knob({
            'format': function(value) {
                return value + '%';
            }
        });
}

I tried adding a newline like

return value + "%\nlabel"

but it doesn't work and comes on the same line.

Answer 1

I have achieved your requirement by using jQuery roundSlider. Check the below demo:

DEMO

Answer 2

i think i've figured the answer. if u read the documentation, jQuery knob has draw method. jQuery knob use canvas to made the circle, so u just add canvas text to the canvas context. This is should be the answer that match to your need:

$(element).knob({
   'format': function(value) {
      return value + '%';
   },
   'draw': function() {
      this.g.fillText('label', x, y)
   }
});

adjust the x and y variable to the point u will put the label eg. if u want it below the knob value, u should put y >= 1/2 height of your knob.