Gradient color in Gauge.js not working

Question

I'm trying to implement gauge using Gauge.js. I want to implement it with gradient color.

I'm facing some problems to implement this.

My current implemented gauge screen shot :

1) Gradient color not working

My script:

<script type="text/javascript">
var opts = {
  lines: 30, // The number of lines to draw
  angle: 0.3, // The length of each line
  lineWidth: 0.1, // The line thickness
  pointer: {
    length: 0.9, // The radius of the inner circle
    strokeWidth: 0.035 // The rotation offset
  },
  limitMax: true,   // If true, the pointer will not go past the end of the gauge
  colorStart: '#64A9CC',   // Colors
  colorStop: '#F6735E',    // just experiment with them
  strokeColor: '#000000',   // to see which ones work best for you
  generateGradient: 'true'
};
var target = document.getElementById('gauge'); // your canvas element
var gauge = new BaseDonut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(50); // set actual value
</script>

Also curve looks little blur.Any suggestions?

Answer 1

You can try jqChart's gauge. It is well supporting the gradients. Here is an example - http://www.jqchart.com/jquery/gauges/RadialGauge/Gradients

Disclaimer: I work for jqChart.

Best regards, Maxim Milev