How to custom gauge js

Question

I am doing gauge indicator and choose https://bernii.github.io/gauge.js/

my script is

var opts = {
          angle: -0.12, // The span of the gauge arc
          lineWidth: 0.16, // The line thickness
          radiusScale: 1, // Relative radius
          pointer: {
            length: 0.35, // // Relative to gauge radius
            strokeWidth: 0.035, // 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: '#6FADCF',   // Colors
          colorStop: '#8FC0DA',    // just experiment with them
          strokeColor: '#E0E0E0',  // to see which ones work best for you
          generateGradient: true,
          highDpiSupport: true,     // High resolution support
          // renderTicks is Optional
          renderTicks: {
            divisions: 5,
            divWidth: 0.6,
            divLength: 0.2,
            divColor: '#333333',
            subDivisions: 5,
            subLength: 0.44,
            subWidth: 0.4,
            subColor: '#666666'
          },
            staticZones: [
               {strokeStyle: "#F6424C", min: 0, max: 500}, // Red from 100 to 130
               {strokeStyle: "#F9915A", min: 500, max: 550}, // Yellow
               {strokeStyle: "#FFE848", min: 550, max: 650}, // Green
               {strokeStyle: "#F9915A", min: 650, max: 750}, // Yellow
               {strokeStyle: "#358607", min: 750, max: 1000}  // Red
            ],
            staticLabels: {
              font: "12px sans-serif",  // Specifies font
              labels: [0, 500, 550, 650, 750, 1000],  // Print labels at these values
              color: "#414141",  // Optional: Label text color
              fractionDigits: 0  // Optional: Numerical precision. 0=round off.
            }

        };
        var target = document.getElementById('foo'); // your canvas element
        var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
        gauge.maxValue = 1000; // set max gauge value
        gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
        gauge.animationSpeed = 34; // set animation speed (32 is default value)
        gauge.set(552); // set actual value

and I have goenter image description here

but i need such view.enter image description here Question is how can do this? If it's impossible with this, what you can offer me. Thanks for attention!