gradient bars Chart JS - angularjs

Question

I want to be able to color each bar with a different color in a gradient way like the folloing image
Can any body tell me how to do that?

Answer 1

This is using ChartJS 2.4.0. http://www.chartjs.org/docs/latest/charts/bar.html
Given x number of datapoints in your Bar Graph, you'll need to generate an array of x number of colors: one color per each datapoint.
data: [10,20,30,40,50,60,70,80],
backgroundColor: ["#ded21e", "#cbd026", "#b8ce2d", "#a5cc35", "#93cb3c", "#80c944", "#6dc74b", "#5ac553"]
Here is a CodePen: https://codepen.io/pgardner/pen/GyeBLW
Credit goes to Neil McCallion, whose CodePen here does much of the legwork: https://codepen.io/njmcode/pen/axoyD
Here is the essential function:
function color() {
// Converts a #ffffff hex string into an [r,g,b] array
function hex2rgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
}
// Inverse of the above
function rgb2hex(rgb) {
return '#' + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
}
// Interpolates two [r,g,b] colors and returns an [r,g,b] of the result
// Taken from the awesome ROT.js roguelike dev library at
// https://github.com/ondras/rot.js
function _interpolateRgb(color1, color2, factor) {
if (arguments.length < 3) { factor = 0.5; }
let result = color1.slice();
for (let i=0;i<3;i++) {
result[i] = Math.round(result[i] + factor*(color2[i]-color1[i]));
}
return result;
}
function rgb2hsl(color) {
const r = color[0]/255;
const g = color[1]/255;
const b = color[2]/255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
let d = max - min;
s = (l > 0.5 ? d / (2 - max - min) : d / (max + min));
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
function hsl2rgb(color) {
let l = color[2];
if (color[1] == 0) {
l = Math.round(l*255);
return [l, l, l];
} else {
let s = color[1];
let q = (l < 0.5 ? l * (1 + s) : l + s - l * s);
let p = 2 * l - q;
let r = hue2rgb(p, q, color[0] + 1/3);
let g = hue2rgb(p, q, color[0]);
let b = hue2rgb(p, q, color[0] - 1/3);
return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
}
}
function _interpolateHsl(color1, color2, factor) {
if (arguments.length < 3) { factor = 0.5; }
let hsl1 = rgb2hsl(color1);
let hsl2 = rgb2hsl(color2);
for (let i=0;i<3;i++) {
hsl1[i] += factor*(hsl2[i]-hsl1[i]);
}
return hsl2rgb(hsl1);
}
function generateGradient(color1, color2, total, interpolation) {
const colorStart = typeof color1 === 'string' ? hex2rgb(color1) : color1;
const colorEnd = typeof color2 === 'string' ? hex2rgb(color2) : color2;
// will the gradient be via RGB or HSL
switch(interpolation) {
case 'rgb':
return colorsToGradientRgb(colorStart, colorEnd, total);
case 'hsl':
return colorsToGradientHsl(colorStart, colorEnd, total);
default:
return false;
}
}
function colorsToGradientRgb(startColor, endColor, steps) {
// returns array of hex values for color, since rgb would be an array of arrays and not strings, easier to handle hex strings
let arrReturnColors = [];
let interimColorRGB;
let interimColorHex;
const totalColors = steps;
const factorStep = 1 / (totalColors - 1);
for (let idx = 0; idx < totalColors; idx++) {
interimColorRGB = _interpolateRgb(startColor, endColor, factorStep * idx);
interimColorHex = rgb2hex(interimColorRGB);
arrReturnColors.push(interimColorHex);
}
return arrReturnColors;
}
function colorsToGradientHsl(startColor, endColor, steps) {
// returns array of hex values for color, since rgb would be an array of arrays and not strings, easier to handle hex strings
let arrReturnColors = [];
let interimColorRGB;
let interimColorHex;
const totalColors = steps;
const factorStep = 1 / (totalColors - 1);
for (let idx = 0; idx < totalColors; idx++) {
interimColorRGB = _interpolateHsl(startColor, endColor, factorStep * idx);
interimColorHex = rgb2hex(interimColorRGB);
arrReturnColors.push(interimColorHex);
}
return arrReturnColors;
}
return {
generateGradient
};
}
Given 2 colors '#ded21e' and '#5ac553', you would call the function in this manner:
let arrBarGraphColors = color().generateGradient('#ded21e', '#5ac553', data.length, 'rgb');
Specify between 'rgb' and 'hsl'. The linked CodePens should give you an idea of the differences between the two.