How to create a gradient fill line chart in latest Chart JS version (3.3.2)?

Question

I am wondering how to create a gradient line chart fill in Chart JS version 3.3.2 like this:

This StackOverflow question was answered nearly 6 years ago. What is the solution in 2021 with version 3.3.2?

I have tried the old solution to no avail:

Code:

    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: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                backgroundColor: gradient,
                    label: 'Numbers',
                data: [12, 19, 3, 5, 2, 3],
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            tension: 0.3
        }
    });

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

JSFiddle

This post might help you: https://blog.vanila.io/chart-js-tutorial-how-to-make-gradient-line-chart-af145e5c92f9 — MoPaMo, Jun 02 '21 at 20:23
@mpm that article wont help, thats about chart.js version 2 as he already pointed out that that solution does not work from the stack issue — LeeLenalee, Jun 02 '21 at 20:26

score 15 · Accepted Answer · answered Jun 02 '21 at 20:25

15

You where almost there, in v3 by default line charts dont fill so you will need to set fill: true

Example

    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: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          backgroundColor: gradient,
          label: 'Numbers',
          fill: true,
          data: [12, 19, 3, 5, 2, 3],
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        tension: 0.3
      }
    });

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

answered Jun 02 '21 at 20:25

LeeLenalee

27,463
6
45
69

Works perfectly. You are a lifesaver – itsisaac19 Jun 02 '21 at 20:30
2

How to do this in React.js? – Ashiq Dey Mar 28 '22 at 14:57
Make it a scriptable option in there you get the canvas – LeeLenalee Mar 28 '22 at 15:05
Great answer, but what if I have two datasets and I want to fill both with different background gradients? How do I create the gradient for the second dataset? – Ghazi 360 Jan 03 '23 at 11:48
1

You can copy paste the code for the first gradient and put it in a variable called gradient2 – LeeLenalee Jan 03 '23 at 12:32

How to create a gradient fill line chart in latest Chart JS version (3.3.2)?

1 Answers1

Linked