Tengo un degradado en mi chart.js como fondo. Esto funciona bien si el zoom de mi pantalla está configurado al 100%

Si cambio mi zoom ([Strg] + [+] o [-]), el degradado no tiene esto en cuenta. ¿Que puedo hacer?

HTML:

 <div> <canvas id="myChart"></canvas> </div>

JavaScript:

 const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const plugin_gradient = { beforeDraw: function(chart, args, options) { const ctx = chart.ctx; const canvas = chart.canvas; const chartArea = chart.chartArea; var gradientBack = canvas.getContext("2d").createLinearGradient(0, canvas.height, canvas.width, 0); gradientBack.addColorStop(1, "rgba(255, 120, 120, 1)"); gradientBack.addColorStop(.5, "rgba(255, 255, 120, 1)"); gradientBack.addColorStop(0, "rgba(120, 255, 120, 1)"); ctx.fillStyle = gradientBack; ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom); } }; const config = { type: 'line', data: data, plugins: [plugin_gradient], options: {} }; const myChart = new Chart( document.getElementById('myChart'), config );

Aquí hay un JSFiddle