var opts = {
  angle: 7, // The span of the gauge arc
  lineWidth: 5, // The line thickness
  radiusScale: 1.0, // Relative radius
  pointer: {
    length: 10, // // Relative to gauge radius
    strokeWidth: 0, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '0',   // Colors
  colorStop: '0',    // just experiment with them
  strokeColor: '0',  // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true,     // High resolution support
  // renderTicks is Optional
  renderTicks: {
    divisions: 8,
    divWidth: 1,
    divLength: 0.8,
    divColor: '#333333',
    subDivisions: 3,
    subLength: 0.5,
    subWidth: 0.5,
    subColor: '#333333'
  }
  
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 3000; // set animation speed (32 is default value)
gauge.set(1500); // set actual value

• Percentage color

  If you want to control how Gauge behaves in relation to the displayed value you can use the Guage option called percentColors. To use it add following entry to the options:

  percentColors = [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"], [0.50, "#f9c8"]];
  

  see working example at JSFiddle

• Value labels

  For displaying value labels, enable the staticLabels option. A label will be printed at the given value just outside the display arc.

  staticLabels: {
    font: "10px sans-serif",  // Specifies font
    labels: [100, 130, 150, 220.1, 260, 300],  // Print labels at these values
    color: "#000000",  // Optional: Label text color
    fractionDigits: 0  // Optional: Numerical precision. 0=round off.
  },
  
  

• Static zones

  When separating the background sectors or zones to have static colors, you must supply the staticZones property in the Gauge object's options.

  staticZones: [
     {strokeStyle: "#F03E3E", min: 100, max: 130}, // Red from 100 to 130
     {strokeStyle: "#FFDD00", min: 130, max: 150}, // Yellow
     {strokeStyle: "#30B32D", min: 150, max: 220}, // Green
     {strokeStyle: "#FFDD00", min: 220, max: 260}, // Yellow
     {strokeStyle: "#F03E3E", min: 260, max: 300},  // Red
     {strokeStyle: "#F03E8E", min: 220, max: 300}  // Red
  ],
  

  staticZones, percentColors and gradient are mutually exclusive. If staticZones is defined, it will take precedence.

  Note: Zones should always be defined within the gauge objects .minValue and .maxValue limits.

• Additionally, a height parameter may be passed in to increase the size of the zone (see example 4 gauge above).

    staticZones: [
      {strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.4},
      {strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.2},
      {strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
      {strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.8},
      {strokeStyle: "rgb(0,255,0)", min: 2000, max: 3100, height: 0.6}
    ],
    

  Note:

  {strokeStyle: "rgb(80,80,80)", min: 2470, max: 2530, height: 1.3}

  You can use this as an additional indicator (like in example 4) by making its color stand out, having a tall height and narrow range.

• Tick marks

  Now you may also add Ticks on two levels, major and minor (or divisions and sub divisions).

  renderTicks options:
  • divisions This is the number of major divisions around your arc.
  • divWidth This is to set the width of the indicator.
  • divLength This is a fractional percentage of the height of your arc line (0.5 = 50%)
  • divColor This sets the color of the division markers
  • subDivisions This sets the minor tick marks count between major ticks.
  • subLength This is a fractional percentage of the height of your arc line (0.5 = 50%)
  • subWidth This is to set the width of the indicator.
  • subColor This sets the color of the subdivision markers

  Example:

          renderTicks: {
            divisions: 5,
            divWidth: 1.1,
            divLength: 0.7,
            divColor: #333333,
            subDivisions: 3,
            subLength: 0.5,
            subWidth: 0.6,
            subColor: #666666
          }