title: Highcharts full circle gauge as in Knob js
body: <p>Is there any simple example (preferibly with a JSFiddle) for an implementation of a full circle gauge with Highcharts like the one below from <a href="http://anthonyterrien.com/knob/" rel="nofollow noreferrer">jQuery knob</a> ?</p>
  
  <p><a href="https://i.stack.imgur.com/3mvqN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3mvqN.png" alt="enter image description here"></a></p>
  
  <p>Here is what I ve got so far : <a href="http://jsfiddle.net/skeletorkun/grn5o39e/1/" rel="nofollow noreferrer">http://jsfiddle.net/skeletorkun/grn5o39e/1/</a></p>
  
  <pre><code>$(function () {
  
      var gaugeOptions = {
  
          chart: {
              type: 'solidgauge'
          },
  
          title: null,
  
          pane: {
              center: ['50%', '50%'],
              size: '100%',
              startAngle: 0,
              endAngle: 360,
              background: {
                  backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || '#EEE',
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
              }
          },
  
          tooltip: {
              enabled: false
          },
  
          // the value axis
          yAxis: {
              stops: [
                  [0.1, '#55BF3B'], // green
                  [0.5, '#DDDF0D'], // yellow
                  [0.9, '#DF5353'] // red
              ],
              lineWidth: 0,
              minorTickInterval: null,
              tickPixelInterval: 400,
              tickWidth: 0,
              title: {
                  y: -70
              },
              labels: {
                  y: 16
              }
          },
  
          plotOptions: {
              solidgauge: {
                  dataLabels: {
                      y: 5,
                      borderWidth: 0,
                      useHTML: true
                  }
              }
          }
      };
  
  
      // The RPM gauge
      $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
          yAxis: {
              min: 0,
              max: 100,
              title: {
                  text: 'sth'
              }
          },
  
          series: [{
              name: 'RPM',
              data: [92],
              dataLabels: {
                  format: '&lt;div style="text-align:center"&gt;&lt;span style="font-size:25px;color:' +
                      ((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black') + '"&gt;{y}&lt;/span&gt;&lt;br/&gt;'
  
              },
              tooltip: {
                  valueSuffix: ' revolutions/min'
              }
          }]
  
      }));
  
  
  
  
  });
  </code></pre>