title: Chartjs Line Color Between Two Points
body: <p><a href="https://i.stack.imgur.com/BOv46.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BOv46.png" alt="Example"></a></p>
  
  <p>Is there any way to set line color of specific sections in between two points in chart.js?   </p>
  
  <p>I would like to color the section <code>00-07</code> gray, <code>07-15</code> red, and <code>15-23</code> blue.  </p>
  
  <p>Here is what I am passing as the <code>data</code> attribute in the <code>options</code> object to initialize the chart:</p>
  
  <pre><code>var chartData = {
  labels: [/* a single dimensional array of strings */],
  datasets: [
      {
          label: '',
          data: [/* a single dimensional array of totals */],
          fill: false,
          backgroundColor: '#e7eaeb',
          borderColor: red
      }
    ]
  };
  </code></pre>
  
  <p>I think this is where I need to add the graph section points and colors, but I do not know how.</p>