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

Question

This question has an implementation and I'm trying to transfer it to this demo using the latest version of chart.js, however the gradient settings are not taking effect.

Any ideas?

This is the entire implementation:

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',
  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,
      },
    },
  },
  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: [
      {
        lineTension: 0.4,
        strokeColor: '#ff6c23',
        pointColor: '#fff',
        fillColor: gradient, // Put the gradient here as
        pointStrokeColor: '#ff6c23',
        pointHighlightFill: '#fff',
        pointHighlightStroke: '#ff6c23',
        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,
        ],
        borderWidth: 1,
      },
    ],
  },
};

new Chart(ctx, config);

Answer 1

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);