title: Custom background limits for Doughnut (Gauge)
body: <p>I'm using a Gauge chart based on (<a href="https://github.com/kluverua/Chartjs-tsgauge" rel="noreferrer">Chartjs-tsgauge</a>).
  I want to set background colors for chart separate from gauge limits. The problem with how <strong>Charts.JS</strong> renders background because the plugin I used doesn't have a code about backgrounds.
  For example, I have a Gauge with limits <code>[0, 20, 40, 60, 80, 100]</code>. I want to set <code>[0-30]</code> to green, <code>[30-70]</code> to yellow and <code>[70-100]</code> to red.
  Current code: <a href="https://codepen.io/kenarsuleyman/pen/WNNaMRL" rel="noreferrer">CodePEN</a></p>
  
  <p>Here is my current options.</p>
  
  <pre><code>var ctx = document.getElementById("canvas").getContext("2d");
  new Chart(ctx, {
      type: "tsgauge",
      data: {
          datasets: [{
              backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
              borderWidth: 0,
              gaugeData: {
                  value: 7777,
                  valueColor: "#ff7143"
              },
              gaugeLimits: [0, 3000, 7000, 10000]
          }]
      },
      options: {
              events: [],
              showMarkers: true
      }
  });
  </code></pre>
  
  <p>And here is my approach for setting background colors.</p>
  
  <pre><code>new Chart(ctx, {
      type: "tsgauge",
      data: {
          datasets: [{
              backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
              borderWidth: 0,
              gaugeData: {
                  value: 50,
                  valueColor: "#ff7143"
              },
              gaugeLimits: [0, 20, 40, 60, 80, 100],
              gaugeColors: [{
                  min: 0,
                  max: 30,
                  color: ""
                  }, {
                  min: 30,
                  max: 70,
                  color: ""
               },{
                  min:70,
                  max:100,
                  color: ""
               }]
           }]
      },
      options: {
          events: [],
          showMarkers: true
      }
  });
  </code></pre>
  
  <p>Currently <code>Chart.JS</code> matches colors <code>0</code> to <code>i</code> with limits <code>0</code> to <code>i</code>.
  I also thought drawing another dummy chart with desired colors and set it on top of the real chart but it seems dodgy way of doing this.</p>