[Chartjs]-Chart.js – Add gradient to bar chart

by

10👍

✅

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/chart.js@2.8.0"></script>

0👍

Try to click one of the jsfiddle there, then change the chart type to ‘bar’. You’ll see it will work.

Yes they are all the same color, because on their example they are only using one gradient. You can create multiple gradient with different color and apply it seperately since you are using multiple rgba already, you can change it and apply specific gradient to your bar. My english is not that good i hope you get my point.

Leave a comment