title: How to change the color of Chart.js points depending on the label
body: <p>I have a line Chart.js chart where the labels are the days of week. I would like to change the point background depending on what day it is (Monday - Sunday). I am able to change the background color depending on the data values but that's not what I need. Instead, I want to give each day (label) a different color point.</p>
  
  <p><a href="https://i.stack.imgur.com/SFpeK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SFpeK.png" alt="enter image description here"></a></p>
  
  <p>For example, this is how I can change the points depending on the data values (not what I need)</p>
  
  <pre><code>chartData: {
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  
      datasets: [{
          data: [57, 569, 12, 78, 569, 0, 5],
          fill: true,
          pointRadius: 4,
          pointBackgroundColor: function(context) {
              var index = context.dataIndex
              var value = context.dataset.data[index]
              return value &gt; 100 ? 'green' : 'red'
          }
      }]
  },
  </code></pre>
  
  <p>But when I tried to apply this to labels, I got an error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property '0' of undefined at pointBackgroundColor</p>
  </blockquote>
  
  <pre><code>chartData: {
      labels: ['Monday', 'Tuesday', 'Wednesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  
      datasets: [{
          data: [57, 569, 12, 78, 569, 0, 5],
          fill: true,
          pointRadius: 4,
          pointBackgroundColor: function(context) {
              var index = context.dataIndex;
              var value = context.labels[index];
  
              if (value == 'Monday') return 'green'
              if (value == 'Tuesday') return 'red'
              if (value == 'Wednesday') return 'blue'
          }
      }]
  },
  </code></pre>