gauge.js -> Need modification on javascript to PercentageColors function

Question

I found this amazing javascript gauge meter: http://bernii.github.io/gauge.js/

There's an option to make it looks like a gauge

new Gauge(target).setOptions(opts)

Or like a Donut (the one I need)

new Donut(target).setOptions(opts)

In the "gauge mode" there's an option percentColors that change the gauge color when it change its value. But this parameter doesn't work on "donut mode".

I tried to change the gauge.js but with no success... any javascript wizard could help me on this one?

The gauge.js file is in the link, and my code to "call it" is here:

var opts = {
angle: 0.46, 
lineWidth: 0.1, 
radiusScale: 1, 
pointer: {
   length: 0.6, 
   strokeWidth: 0.035, 
   color: '#000000'  
},
limitMax: false,     
limitMin: false,
percentColors: [[0.0, "#ff0000" ], [0.50, "#f9c802"], [1.0, "#a9d70b"]],
strokeColor: '#EEEEEE',  
generateGradient: true,
highDpiSupport: true,    
};

var target = document.getElementById('graph'); 
//var gauge = new Gauge(target).setOptions(opts); 
var gauge = new Donut(target).setOptions(opts); 
gauge.maxValue = 3000; 
gauge.setMinValue(0);  
gauge.animationSpeed = 32; 
gauge.set(3000); 
gauge.setTextField(document.getElementById('gauge-value'));

Thank you!

Answer 1

I found myself a simpler solution, instead of using the parentColor function on the Donut mode, I used some ifs/elses to limit the numbers and set the color in that specific location:

 if (value<=20)
 { 
  opts.colorStart='#291B00';
  opts.colorStop='#FF0000'; 
 }else if (value>20 && value <=60)
 { 
  opts.colorStart='#290000';
  opts.colorStop='#FF7E0D'; 
 }
 else if (value>60)
 { 
  opts.colorStart='#002903';
  opts.colorStop='#00FF00'; 
 }