title: Setting specific color per label in chart.js
body: <p>I'm trying to set colors for charts made using <a href="https://www.chartjs.org/" rel="nofollow noreferrer">chart.js</a> library.</p>
  
  <p>I need a specific color for each data label. but when data of specific labels is zero colors get confused :(.</p>
  
  <p>it looks like the library drops zero-data labels and labels colored differently.</p>
  
  <p><strong>For example, when data is:</strong></p>
  
  <ul>
  <li><strong>colors:</strong> <code>green</code>, <code>red</code>, <code>yellow</code>,</li>
  <li><strong>labels:</strong> <code>passed</code>, <code>failed</code>, <code>in progress</code></li>
  <li><strong>data:</strong> <code>0</code>, <code>5</code>, <code>80</code></li>
  </ul>
  
  <p>passed labeled data will be skipped as its value is zero, so failed labeled data gets the first color: <code>green</code>, and so on.</p>
  
  <p>How can I force colors matching?</p>
  
  <hr>
  
  <p>Current code:</p>
  
  <p>html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;canvas baseChart height="150px" width="150px" [data]="graphData" [labels]="graphLabels" [colors]="graphColors"
      [options]="graphOptions" [legend]="false" [chartType]="'doughnut'"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.graphData = this.data.map(r =&gt; r.cnt);
  this.graphLabels = this.data.map(r =&gt; r.city);
  this.graphOptions = {
      layout: {padding: 20},
      cutoutPrecentage: 90,
      legend: {display: false}
  };
  </code></pre>
  
  <p>thanks!</p>