Custom colors in JustGage not working properly

Question

I am trying to add custom sectors to my JustGage object and when I add them it is just showing the default of:

0-25 = green, 25-50 = yellow, 50-100 = red

I want to have it split like this:

0-25 = red, 25-50 = orange, 50-75 = yellow, 75-100 = green

My code is below. I have defined my customSectors as I want them, but the gage still defaults back to the original 3 sectors. Am I doing something wrong here. I tried to find some documentation on JustGage, but there really isn't any.

var Gage1 = new JustGage({
id: "gage-1", 
value: 100, 
min: 0,
max: 100,
showInnerShadow: false,
shadowOpacity : 0.3,
customSectors: [{
    color : "#CE1B21",
    lo : 0,
    hi : 25
}, {
    color : "#D0532A",
    lo : 25,
    hi : 50
}, {
    color : "#FFC414",
    lo : 50,
    hi : 75
}, {
    color : "#85A137",
    lo : 75,
    hi : 100
}],
valueFontColor : ['#4A98BE'], 
gaugeColor : ['#333'], 
    title: "Demo Gage",
label: "%"
});

NOTE: I am using justgage.1.0.1.js

Answer 1

I think all you need is levelColors:

var Gage1 = new JustGage({
  id: "gage-1", 
  value: 100, 
  min: 0,
  max: 100,
  levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
});

I don't think justGage supports you choosing exactly the min and max for each color you want. And you may need to mess around with the option levelColorsGradient try setting it to false first.