title: Vue.js Vue-chart.js linear gradient background fill
body: <p>I would like to have a linear gradient background on my Vue-chart.js line chart.
  For the love of God, I can't find any useful example and the documentation doesn't really provide either.</p>
  <p>I loaded in the Line component from <code>vue-chartjs</code> and have set up a template like below:</p>
  <pre><code>&lt;template&gt;
    &lt;Line
      :chartData=&quot;chartData&quot;
      :chartOptions=&quot;chartOptions&quot;
      :chartId=&quot;chartId&quot;
      :width=&quot;width&quot;
      :height=&quot;height&quot;
      :cssClasses=&quot;cssClasses&quot;
      :styles=&quot;styles&quot;
      :plugins=&quot;plugins&quot;
    /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>With that, I have the following script:</p>
  <pre><code>&lt;script&gt;
  import { Line } from 'vue-chartjs'
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    CategoryScale,
    LinearScale,
    PointElement,
    Plugin,
    Filler,
    BorderRadius
  } from 'chart.js'
  
  ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, CategoryScale, PointElement, Filler)
  
  export default {
    name: 'BarChart',
    components: { Line },
    props: {
      chartId: {
        type: String,
        default: 'line-chart'
      },
      width: {
        type: Number,
        default: 400
      },
      height: {
        type: Number,
        default: 160
      },
      cssClasses: {
        default: '',
        type: String
      },
      styles: {
        type: Object,
        default: () =&gt; {}
      },
      plugins: {
        type: Array,
        default: () =&gt; []
      }
    },
    mounted () {
      const canvas = document.getElementById('line-chart').getContext('2d');
      const gradient = canvas.createLinearGradient(0,0,0,160);
  
      gradient.addColorStop(0, 'green');
      gradient.addColorStop(.5, 'cyan');
      gradient.addColorStop(1, 'green');
  
      this.gradient = gradient;
  
      console.log(this.gradient);
  
    },
    data() {
      return {
        chartData: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Data One',
              borderColor: '#FC2525',
              pointBackgroundColor: 'white',
              borderWidth: 1,
              radius: 0,
              fill: true,
              pointBorderColor: 'white',
              backgroundColor: this.gradient,
              tension: 0.25,
              data: [40, 39, 10, 40, 39, 80, 40]
            },{
              label: 'Data Two',
              borderColor: '#05CBE1',
              pointBackgroundColor: 'white',
              pointBorderColor: 'white',
              borderWidth: 1,
              radius: 0,
              fill: true,
              backgroundColor: this.gradient,
              tension: 0.25,
              data: [60, 55, 32, 10, 2, 12, 53]
            }
          ]
        },
        chartOptions: {
          responsive: true,
          plugins: {
            legend: {
              display: false
            }
          }
        }
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>And yet, this results in the default grey background.</p>
  <p>Any help would be appreciated.</p>