title: Creating a ring chart with Highcharts
body: <p>I'm attempting to create a "ring chart" similar to the ones found <a href="https://www.scribbletone.com/typefaces/ff-chartwell" rel="nofollow noreferrer">here</a> (scroll down to ring charts) with Highcharts using a donut chart. So, if I want to display a data value of 46% of something, it circles around counter-clockwise to 46% and stops.</p>
  
  <p>I don't have a lot to go off of at this point, but <a href="http://jsfiddle.net/hjezY/" rel="nofollow noreferrer">here is a fiddle</a> with what I have so far.</p>
  
  <p>And code:</p>
  
  <pre><code>$(function () {
  
         // Create the chart
          $('#container').highcharts({
              chart: {
                  type: 'pie'
              },
              title: {
                  text: 'Browser market share, April, 2011'
              },
              yAxis: {
                  title: {
                      text: 'Total percent market share'
                  }
              },
              plotOptions: {
                  pie: {
                      shadow: false,
                      center: ['50%', '50%']
                  }
              },
              tooltip: {
                  valueSuffix: '%'
              },
              series: [ {
                  name: 'Art Education',
                  data: [
                          ['Covered by contributions',46]
                  ],
                  size: '70%',
                  innerSize: '40%',
                  dataLabels: {
                      formatter: function() {
                          // display only if larger than 1
                          return this.y &gt; 1 ? '&lt;b&gt;'+ this.series.name +':&lt;/b&gt; '+ this.y +'%'  : null;
                      }
                  }
              }, {
                  name: 'Versions',
                  data: [1, 2],
                  size: '80%',
                  innerSize: '70%',
                  dataLabels: {
                      formatter: function() {
                          // display only if larger than 1
                          return this.y &gt; 1 ? '&lt;b&gt;'+ this.point.name +':&lt;/b&gt; '+ this.y +'%'  : null;
                      }
                  }
              }]
          });
      });
  
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;script src="./js/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="./js/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 250px; width: 100%; height: 100%; margin: 0 auto;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>2017 Update:</p>
  
  <p>Highcharts can now do <a href="http://www.highcharts.com/demo/pie-semi-circle" rel="nofollow noreferrer">Semi circle donut charts</a> which is what I was looking for. <a href="http://jsfiddle.net/0w8egL6e/" rel="nofollow noreferrer">Example.</a></p>