Implementing a gradient background in in the latest chart.js?

You're almost there.

You'd just need to add fill: true and change fillColor: gradient to backgroundColor: gradient.

Following is the revised code.

import { Chart, ChartConfiguration, registerables } from 'chart.js';
Chart.register(...registerables);

const canvas = document.getElementById('chart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');

const config: ChartConfiguration = {
  type: 'line',
  data: {
    labels: [
      '02:00',
      '04:00',
      '06:00',
      '08:00',
      '10:00',
      '12:00',
      '14:00',
      '16:00',
      '18:00',
      '20:00',
      '22:00',
      '00:00',
    ],
    datasets: [
      {
        label: '# of Votes',
        data: [
          25.0, 32.4, 22.2, 39.4, 34.2, 22.0, 23.2, 24.1, 20.0, 18.4, 19.1,
          17.4,
        ],
        lineTension: 0.4,
        fill: true,
        backgroundColor: gradient,
        borderColor: '#ff6c23',
        borderWidth: 1,
        pointBackgroundColor: '#fff',
        pointBorderColor: '#ff6c23',
        pointHighlightFill: '#fff',
        pointHighlightStroke: '#ff6c23',
      },
    ],
  },
  options: {
    responsive: true,
    datasetStrokeWidth: 10,
    pointDotStrokeWidth: 14,
    tooltipFillColor: 'rgba(0,0,0,0.8)',
    tooltipFontStyle: 'bold',
    tooltipTemplate:
      "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
    scaleLabel: "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>",
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
};

new Chart(ctx, config);