title: Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
body: <p>I'm applying a linear gradient to barcharts the way described in the doc successfully.
  <a href="https://www.chartjs.org/docs/latest/samples/advanced/linear-gradient.html" rel="nofollow noreferrer">https://www.chartjs.org/docs/latest/samples/advanced/linear-gradient.html</a>
  In the case I have 2 datasets or more as bar types each, I want to apply different color gradients to each dataset.</p>
  <p>I have tried adding a second function called getGradient2 or to pass the colors as parameters as shown below, however the render ignores the second colors and apply the first gradient to all datasets</p>
  <pre><code>let width, height, gradient;
      function getGradient(ctx, chartArea, start_color, stop_color) {
          const chartWidth = chartArea.right - chartArea.left;
          const chartHeight = chartArea.bottom - chartArea.top;
          if (gradient === null || width !== chartWidth || height !== chartHeight) {
              // Create the gradient because this is either the first render
              // or the size of the chart has changed
              width = chartWidth;
              height = chartHeight;
              gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
              gradient.addColorStop(0, stop_color);
              gradient.addColorStop(1, start_color);
          }
          return gradient;
      }
  </code></pre>
  <p>Then the implementation:</p>
  <pre><code>data: data_array[0],
      borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100,  bottomLeft: 100 },
      backgroundColor: function(context) {
                      const chart = context.chart;
                      const {ctx, chartArea} = chart;
                      if (!chartArea) { return null; }
                      return getGradient2(ctx, chartArea, &quot;rgba(182, 86, 235, 1)&quot;, &quot;rgba(182, 86, 235, 0.66)&quot;);
      }, barPercentage: 1.0, categoryPercentage: 1.0,
      barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
  </code></pre>
  <p>And for the second dataset:</p>
  <pre><code>     data: data_array[1],
            borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100,  bottomLeft: 100 },
            backgroundColor: function(context) {
                      const chart = context.chart;
                      const {ctx, chartArea} = chart;
                      if (!chartArea) { return null; }
                      return getGradient2(ctx, chartArea, &quot;rgba(244, 102, 235, 1)&quot;, &quot;rgba(244, 102, 235, 0.66)&quot;);
            }, barPercentage: 1.0, categoryPercentage: 1.0,
            barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
  </code></pre>
  <p>Seems like a bug to me but they say to post on SO on GitHub, so let me know if you find a way to make it work :)</p>