JSFiddle - React, Tailwind, and code Playground

by Ricardo Nishimura

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
<div style="position: relative; height:500px; width:500px">
  <canvas id="mychart"></canvas>
</div>

JavaScript

var GradientBgPlugin = {
  beforeDraw: function(chart, args, options) {
    const ctx = chart.ctx;
    const canvas = chart.canvas;
    const chartArea = chart.chartArea;

    // Chart background
    var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
    gradientBack.addColorStop(0, "rgba(60, 174, 163, 0.7)");
    gradientBack.addColorStop(0.5, "rgba(255, 255, 255, 0)");
    gradientBack.addColorStop(1, "rgba(32, 99, 155, 0.7)");

    ctx.fillStyle = gradientBack;
    ctx.fillRect(chartArea.left, chartArea.bottom,
      chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
  }
};

var config = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My dataset',
      borderColor: 'rgba(23, 63, 95, 0.8)',
      data: [60, 30, 35, 70, 90, 60, 70],
      fill: false,
      tension: 0
    }]
  },
  options: {
    responsive: true,
    scales: {
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        },
        ticks: {
          beginAtZero: true,
          suggestedMax: 100
        }
      }]
    }
  },
  // Insert the custom plugin
  plugins: [GradientBgPlugin],
};

var ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, config);