title: angular-chart.js custom color based on chart label values
body: <p>I'm integrating Doughnut Chart using <a href="http://jtblin.github.io/angular-chart.js/#doughnut-chart" rel="nofollow noreferrer">angular-chart.js</a> and I want to use custom color based on chart label value.</p>
  <pre><code>//Controller
      vm.labels = [&quot;A&quot;, &quot;B&quot;, &quot;C&quot;];
      vm.data = [1, 2, 3];
  
  //HTML
      &lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot;
                          chart-data=&quot;vm.data&quot; 
                          chart-labels=&quot;vm.labels&quot;                    
                          chart-options=&quot;options&quot;
                          chart-colors = &quot;colours&quot;
                          chart-legend = &quot;true&quot; &gt;
      &lt;/canvas&gt;
  </code></pre>
  <p>and i'm setting the color like below</p>
  <pre><code>ChartJsProvider.setOptions({
         colours: ['#DD1C2C', '#E03E2D','#E35B2B'],
         responsive: true
  });
  </code></pre>
  <p>It works perfect only if all A,B and C are there  (<code>A =&gt; #DD1C2C B=&gt; #E03E2D</code> and <code>C=&gt;#E35B2B</code>)</p>
  <p>But for the following case</p>
  <pre><code>$scope.labels = [&quot;A&quot;, &quot;C&quot;];
  $scope.data = [1, 3];
  </code></pre>
  <p><code>A =&gt; #DD1C2C</code> and <code>C=&gt;#E03E2D</code></p>
  <p>Expected :  <code>A =&gt; #DD1C2C</code> and <code>C=&gt;#E35B2B</code></p>