Chart.js - Add gradient to bar chart

Question

I am looking to build a chart like this

But I am not able to give the gradient colors in the y-scale for the bar chart. This is the codesandbox URL.

Answer 1

The gradient direction (Vertically in your case) not related directly to chart.js, but to HTML canvas createLinearGradient() Method.

createLinearGradient JavaScript syntax:

context.createLinearGradient(x0,y0,x1,y1);

https://www.w3schools.com/tags/canvas_createlineargradient.asp

Example of top to bottom "vertically" gradient from w3schools:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

<div>Top to bottom</div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

"One gradient"

Docs:

An alternative option is to pass a CanvasPattern or CanvasGradient object instead of a string colour. https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients

Same as one solid color but passing CanvasGradient object:

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

var background_1 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_1.addColorStop(0, 'red');
background_1.addColorStop(1, 'blue');

And set background_1 under data

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: background_1,
    data: [40,60,80, 100]
  }]
};

"multiple colors for bars"

Use multiple gradients objects inside backgroundColor (object1 for item-1 and so on).

backgroundColor: [background_1, background_2, background_3, background_4],

** My code is not DRY (The best idea her is to create gradient objects by some loop throw array of data). By purpose i keep this example "simple".

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

var background_1 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_1.addColorStop(0, 'red');
background_1.addColorStop(1, 'blue');

var background_2 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_2.addColorStop(0, 'green');
background_2.addColorStop(1, 'orange');

var background_3 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_3.addColorStop(0, 'orange');
background_3.addColorStop(1, 'purple');

var background_4 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_4.addColorStop(0, 'green');
background_4.addColorStop(1, 'violet');

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: [background_1, background_2, background_3, background_4],
    data: [40,60,80, 100]
  }]
};

var options = {
  responsive: true,
  title: {
    text: 'multiple colors for bars',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

  <canvas id="chart" width="800" height="600"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>