JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.3/Chart.min.js"></script>
<canvas id='chart' width='400' height='400'></canvas>

JavaScript

ctx = document.getElementById('chart').getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 400, 400);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');
    
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }],
            backgroundColor: gradient
        }]
    },
    options: {
      showLines:true
    }
});