title: Jquery donut chart customisation
body: <p>Hi I am trying to replicate the below image:</p>
  
  <p><img src="https://i.stack.imgur.com/6rn80.jpg" alt="Donut Chart"></p>
  
  <p>I have found a plugin which will almost replicate and I have tried to customise it to style and add the inner text.  I cannot seem to style it as below.  I have tried to apply the color property to the series but this is not working.  I am not sure if the colorScheme property is overriding but I am stuck at the moment.</p>
  
  <p>Here is what I have tried: <a href="http://jsfiddle.net/ux68H/261/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>and the code is below:</p>
  
  <pre><code>var data = [
      {Responses: "Accepted", Share: 33.3},
      {Responses: "Unresponded", Share: 26.5},
      {Responses: "Rejected", Share: 25.4}
  ]
  
  // prepare chart data as an array
  var source =
  {
      datatype: "array",
      datafields: [
          { name: 'Responses' },
          { name: 'Share' }
      ],
      localdata: data
  };
  
  var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
  
  // prepare jqxChart settings
  var settings = {
      title: "Geoff's Birthday Party",
      description: "",
      enableAnimations: true,
      showLegend: false,
      legendPosition: { left: 520, top: 140, width: 100, height: 100 },
      padding: { left: 5, top: 5, right: 5, bottom: 5 },
      titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
      source: dataAdapter,
      colorScheme: 'scheme13',
      seriesGroups:
          [
              {
                  type: 'donut',
                  showLabels: false,
                  series:
                      [
                          {
                              dataField: 'Share',
                              displayText: 'Responses',
                              labelRadius: 100,
                              initialAngle: 15,
                              radius: 130,
                              innerRadius: 90,
                              centerOffset: 0,
                              formatSettings: {decimalPlaces:1 },
                              color:'#00000'
                          }
                      ]
              }
          ]
  };
  
  // setup the chart
  $('#jqxChart').jqxChart(settings);
  </code></pre>
  
  <p>Thanks in advance</p>