title: Chart.js set Doughnut background-color?
body: <p>I'm using Chart.js (<a href="http://www.chartjs.org/docs/" rel="noreferrer">documentation</a>), but I can't seem to set a <strong>background color</strong> to the Donut <strong>path</strong>. It isn't even mentioned in the docs.</p>
  
  <p>What I'm trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/hqTWI.png" alt="enter image description here"></p>
  
  <p>Current code:</p>
  
  <pre><code>var meterInvoicesData = [
      {
          value: 75,
          color: '#22d319'
      },
      {
          value: 25,     // rest
          color: 'transparent'  // invisible (setting this as background color will animate it too)
      }
  ];
  
  var meterOptions =
  {
      percentageInnerCutout : 80,
      animationEasing : 'easeInQuint'
  };
  
  var meterInvoices = new Chart(document.getElementById('meterInvoices').getContext('2d')).Doughnut(meterInvoicesData,meterOptions);
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong>: I currently solved it by using a <strong>duplicate</strong> Donut (2nd canvas) with a value of 100, no animation and my desired (background-) color, and positioned it absolute, underneath the 1st one.</p>
  
  <p>However, this is a nasty trick, and very inefficient, so I'm still hoping for a correct answer.</p>