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