JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>

JavaScript

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

var gradient = ctx.createLinearGradient(0, 0, 0, 300);
    gradient.addColorStop(0, 'rgba(224, 195, 155, 1)');   
    gradient.addColorStop(1, 'rgba(100, 100, 0,0)');
    
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        backgroundColor: '#000',
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
        		label: 'Numbers',
            data: [12, 19, 3, 5, 2, 3],
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});