How can I add custom icons to Gauge

Question

I am using the gauge.js library and I need to add custom icons to the gauge bars.

var opts = { };
var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);

gauge.set(50); // set actual value

<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
<canvas id="guage" data-type="radial-gauge" 
  data-width="500" data-height="500"
  data-min-value="0" data-max-value="10"
  data-exact-ticks="true" data-major-ticks="1,2,3,4,5,6,7,8,9,10" data-minor-ticks="2"
  data-highlights="0">
</canvas>

---

Progress Image

---

I want like this

Answer 1

It's not documented, but by studying the render method, it seems you can override it.

You can create your own label renderer.

Caveat: Of course, since you are rendering on top of the existing renderer, the symbols will appear above the gauge pointer. If you really want to fix this, you would need to override the whole method and add a custom mixin call to call your own function to make this extensible.

var opts = {
  angle: 0,
  radius : 50,
  limitMax: true,
  limitMin: true,
  highDpiSupport: true,
  pointer: {
    length: 0.5,
    strokeWidth: 0.08,
    color: '#ADB3B7'
  },
  staticZones: [
     { strokeStyle: '#F96C5A', min: 0, max: 2,  symbol: '−'   /* NEW */ },
     { strokeStyle: '#FED663', min: 2, max: 4,  symbol: '✓−' /* NEW */ },
     { strokeStyle: '#C2D34D', min: 4, max: 6,  symbol: '✓'  /* NEW */ },
     { strokeStyle: '#9CC172', min: 6, max: 8,  symbol: '✓+' /* NEW */ },
     { strokeStyle: '#4AB641', min: 8, max: 10, symbol: '+'  /* NEW */ }
  ],
  symbolSize : 30,     // NEW
  symbolColor : '#DDD' // NEW
};
var target = document.getElementById('guage');
var gauge = new Gauge(target).setOptions(opts);

gauge.render = customLabelRenderer;
gauge.minValue = 0;
gauge.maxValue = 10;
gauge.set(7);

function customLabelRenderer() {
  Gauge.prototype.render.call(this);
  var zones = this.options.staticZones;
  if (zones != null) {
    this.ctx.save();
    var xOffset = this.canvas.width;
    var yOffset = this.canvas.height * 2.25; // Not sure about this.
    var symbolSize = this.options.symbolSize;
    this.ctx.font = symbolSize + 'px Arial';
    this.ctx.fillStyle = this.options.symbolColor;
    for (var i = 0; i < zones.length; i++) {
      var sliceAngle = Math.PI / zones.length * -1;
      var zone = zones[i];
      if (zone.symbol != null) {
        var fontWidth = this.ctx.measureText(zone.symbol).width;
        var tmpRadius = this.radius * this.options.radiusScale;
        var angle = (sliceAngle * (zones.length - i)) - (sliceAngle / 2);
        var labelOffset = this.lineWidth * 2;
        var centerX = xOffset + Math.floor((tmpRadius + labelOffset) * Math.cos(angle));
        var centerY = yOffset + Math.floor((tmpRadius + labelOffset) * Math.sin(angle));
        var xPos = Math.floor(centerX / 2 - fontWidth / 2);
        var yPos = Math.floor(centerY / 2 - symbolSize / 2)
        this.ctx.fillText(zone.symbol, xPos, yPos);
      }
    }
    this.ctx.restore();
  }
}

#guage {
  background: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.5/gauge.min.js"></script>
<canvas id="guage" data-width="500" data-height="500">
</canvas>