title: Change background color to gradient in react-chartjs-2
body: <p>I have the following options and dataset:</p>
  
  <pre><code>const chartData = {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        datasets: [{
          label: 'Chart',
          data: this.transformIntoArray(data),
          backgroundColor: 'linear-gradient(to right, #20f08b, #07dfb1)',
          borderColor: '#05deb3'
        }]
      }
  </code></pre>
  
  <p>But it does nothing. Im using it as react component and don't know how can I reach the context of the canvas in this case. And also I render many of these charts.</p>
  
  <pre><code>        &lt;Line
            data={chartData}
            options={options}
            height={50}
            width={300}
          /&gt;
  </code></pre>
  
  <p>This how I added the gradient to my chart when I was uisng <code>chart.js</code> in not-react app:</p>
  
  <pre><code>var gradient = this.ctx.createLinearGradient(0, 0, document.getElementById(this.id).width, document.getElementById(this.id).height);
      gradient.addColorStop(0, '#20f08b');
      gradient.addColorStop(0.5, '#20f08b');
      gradient.addColorStop(1, '#07dfb1');
      document.getElementById(this.id).style.backgroundColor = 'transparent';
  
      this.updatedData = {
        labels: labels,
        datasets: [{
          label: 'gradient chart',
          data: this.data,
          backgroundColor: gradient,
          borderColor: gradient
        }]
      };
  </code></pre>
  
  <p>How knows how to add the gradient to the <code>Line</code> in the <code>react-chartjs-2</code> ?</p>
  
  <p><strong>@Boy With Silver Wings</strong>,</p>
  
  <p>I dont quite understand how can I use this.</p>
  
  <p>This what I've done for now using this method:</p>
  
  <pre><code>render() {
  
  const getData = (canvas) =&gt; {
        const ctx = canvas.getContext("2d");
        const gradient = this.ctx.createLinearGradient(0, 0, 300, 0);
        gradient.addColorStop(0, '#20f08b');
        gradient.addColorStop(0.5, '#20f08b');
        gradient.addColorStop(1, '#07dfb1');
  
        return {
          labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
          datasets: [{
            label: 'Chart',
            data: this.transformIntoArray(data),
            backgroundColor: gradient,
            borderColor: '#05deb3'
          }]
        }
      }
  
      const canvas = document.createElement('canvas');
      const chartData = getData(canvas);
  
      return (
       &lt;Line
        data={chartData}
        options={options}
        height={50}
        width={300}
      /&gt;
     )
  </code></pre>
  
  <p>But it says me <code>TypeError: Cannot read property 'createLinearGradient' of undefined at getData</code></p>