title: Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
body: <p>Our requirement is to render the bar chart as <a href="https://i.stack.imgur.com/G82Ow.png" rel="nofollow noreferrer">Expected Image</a>. we are using chartJs library to render the chart. we are able to render the bar chart but for one of the bar we need to show
  the background color as gradient. To achieve this we used the following below code snippet:
  but it render as <a href="https://i.stack.imgur.com/arw9v.png" rel="nofollow noreferrer">Rendered graph</a>. Can you please help me out in rendering the chart as expected.
  <a href="https://jsfiddle.net/tejaswaroopmuppalla/wp5n7kL2/2/" rel="nofollow noreferrer">JSFiddleLink</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const data = [{
    type: "Sample 1",
    data: [600, 400, 200, 800]
  }, {
    type: "Sampel 2",
    data: [700, 300, 600, 600]
  }, {
    type: "Total",
    data: [1300, 700, 800, 1400]
  }];
  
  
    const gradient = document.getElementById('myChart').getContext('2d').createLinearGradient(0, 250, 0, 0);
    gradient.addColorStop(1, '#acd7fa')
    gradient.addColorStop(0.4, '#FFFFFF')
  
  new Chart('myChart', {
    type: "bar",
    data: {
      labels: ["A", "B", "C", "D"],
      datasets: [
            {
              label: data[0].type,
              xAxisID: "x1",
              data: data[0].data,
              // fillColor: background_1,
              // highlightFill: background_2,
              backgroundColor: "rgb(54, 162, 235)" ,
              // backgroundColor: background_1,
              barPercentage: 1,
            },
            {
              label: data[1].type,
              xAxisID: "x1",
              data: data[1].data,
              backgroundColor:"rgb(255, 159, 64)",
              barPercentage: 1,
            },
            {
              label: data[2].type,
              xAxisID: "x2",
              data: data[2].data,
              backgroundColor: gradient,
              barPercentage: 1,
            },
          ],
        },
    options: {
      legend: {
        labels: {
          filter: item =&gt; item.text != 'Total'
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0,
            stepSize: 200
          }
        }],
        xAxes: [{
            id: 'x1'
          },
          {
            id: 'x2',
            display: false,
            offset: true
          }
        ]
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" height="150"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>