title: ChartJs, How can I get different color fills between my two datasets in a line graph?
body: <p><img src="https://i.stack.imgur.com/ptoUE.png" alt="graph[1]"></p>
  
  <p>Above is a graph I made using ChartJS.  I have two datasets.  I also have the space between the two datasets filled just like I want it.  But I need to get two different colors for the fill.  When the Hours dataset is bigger than the Goal dataset, I want the fill to be green, and when the Hours dataset is smaller than Goal, I want it to be red.  I'm really hoping there is a way to do this using ChartJS, so that I don't have to recreate this in Canvas.</p>
  
  <p>If it matters, this is in Vue.Js.</p>
  
  <p>Here is the code for the two datasets:</p>
  
  <pre><code>    const dataSets = [{
  
          label: this.dataSetLabel,
          data: this.dataArray,
          backgroundColor: new Array(this.dataArray.length).fill('rgba(255, 0, 0, 0.8)'), // red
          borderColor: new Array(this.dataArray.length).fill('rgba(255, 0, 0, 0.8)'),
          borderWidth: 1,
          fill: '+1'
        }]
        if (this.fi !== 3) {
  
          dataSets.push({
            label: 'Goal',
            data: new Array(this.dataArray.length).fill(this.user.braceHours),
            type: 'line',
            backgroundColor: new Array(this.dataArray.length).fill('rgba(84, 232, 198, 0.8)'), // green
            borderColor: new Array(this.dataArray.length).fill('rgba(84, 232, 198, 0.8)'),
            borderWidth: 1,
            fill: '-1'
          })
        }
  </code></pre>
  
  <p>Any help with this would be much appreciated.</p>