feature: different colors for bars in the same dataset

dist/frappe-charts.esm.js

@@ -243,7 +243,7 @@ class SvgTip {
 		this.dataPointList.innerHTML = '';
 
 		this.listValues.map((set, i) => {
-			const color = this.colors[i] || 'black';
+			const color = Array.isArray(this.colors[i]) ? this.colors[i][this.index] : (this.colors[i] || 'black');
 			let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
 
 			let li = $.create('li', {
@@ -539,6 +539,12 @@ const getColor = (color) => {
 	return PRESET_COLOR_MAP[color] || color;
 };
 
+const resolveBarColor = (colors, barIndex) => {
+	if(!Array.isArray(colors)) return colors;
+	if(barIndex > colors.length) barIndex = colors.length-1;
+	return colors[barIndex];
+};
+
 const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 const LABEL_MAX_CHARS = 15;
@@ -1571,14 +1577,19 @@ class BaseChart {
 	validateColors(colors, type) {
 		const validColors = [];
 		colors = (colors || []).concat(DEFAULT_COLORS[type]);
-		colors.forEach((string) => {
-			const color = getColor(string);
-			if(!isValidColor(color)) {
-				console.warn('"' + string + '" is not a valid color.');
+		colors.forEach((entry) => {
+			if (Array.isArray(entry)) {
+				validColors.push(this.validateColors(entry, type));
+				return;
+			}
+			const color = getColor(entry);
+			if (!isValidColor(color)) {
+				console.warn('"' + entry + '" is not a valid color.');
 			} else {
 				validColors.push(color);
 			}
 		});
+		validColors.concat(DEFAULT_COLORS[type]);
 		return validColors;
 	}
 
@@ -1733,6 +1744,7 @@ class BaseChart {
 			console.error('No data to update.');
 		}
 		this.data = this.prepareData(data);
+		this.data.datasets.forEach((d, i) => { if(d.colors) { this.colors[i] = d.colors;}});
 		this.calc(); // builds state
 		this.render(this.components, this.config.animate);
 	}
@@ -2287,7 +2299,7 @@ let componentConfigs = {
 					data.xPositions[j],
 					y,
 					data.barWidth,
-					c.color,
+					resolveBarColor(data.colors || this.constants.color, j),
 					data.labels[j],
 					j,
 					data.offsets[j],
@@ -2321,6 +2333,7 @@ let componentConfigs = {
 				yPositions: oldYPos,
 				offsets: oldOffsets,
 				labels: newLabels,
+				colors: newData.colors,
 
 				zeroLine: this.oldData.zeroLine,
 				barsWidth: this.oldData.barsWidth,
@@ -3412,6 +3425,7 @@ class AxisChart extends BaseChart {
 
 				values: values,
 				yPositions: scaleAll(values),
+				colors: d.colors,
 
 				cumulativeYs: cumulativeYs,
 				cumulativeYPos: scaleAll(cumulativeYs),
@@ -3534,7 +3548,7 @@ class AxisChart extends BaseChart {
 				'barGraph' + '-' + d.index,
 				{
 					index: index,
-					color: this.colors[index],
+					color: d.colors || this.colors[index],
 					stacked: this.barOptions.stacked,
 
 					// same for all datasets
@@ -3572,6 +3586,7 @@ class AxisChart extends BaseChart {
 					return {
 						xPositions: xPositions,
 						yPositions: d.yPositions,
+						colors: d.colors || undefined,
 						offsets: offsets,
 						// values: d.values,
 						labels: labels,
@@ -3660,11 +3675,12 @@ class AxisChart extends BaseChart {
 		titles.map((label, index) => {
 			let values = this.state.datasets.map((set, i) => {
 				let value = set.values[index];
+				let componentColor = set.hasOwnProperty('colors') ? set.colors : this.colors[i];
 				return {
 					title: set.name,
 					value: value,
 					yPos: set.yPositions[index],
-					color: this.colors[i],
+					color: Array.isArray(componentColor) ? (i < componentColor.length ? componentColor[i] : componentColor[0]) : componentColor,
 					formatted: formatY ? formatY(value) : value,
 				};
 			});

src/js/charts/BaseChart.js

@@ -65,7 +65,7 @@ export default class BaseChart {
 
 	validateColors(colors, type) {
 		const validColors = [];
-		colors = colors || [];
+		colors = (colors || []).concat(DEFAULT_COLORS[type]);
 		colors.forEach((entry) => {
 			if (Array.isArray(entry)) {
 				validColors.push(this.validateColors(entry, type));

src/js/objects/ChartComponents.js

@@ -4,6 +4,7 @@ import { equilizeNoOfElements } from '../utils/draw-utils';
 import { translateHoriLine, translateVertLine, animateRegion, animateBar,
 	animateDot, animatePath, animatePathStr } from '../utils/animate';
 import { getMonthName } from '../utils/date-utils';
+import {resolveBarColor} from "../utils/colors";
 
 class ChartComponent {
 	constructor({
@@ -302,7 +303,7 @@ let componentConfigs = {
 					data.xPositions[j],
 					y,
 					data.barWidth,
-					data.colors ? ((j < data.colors.length) ? data.colors[j] : data.colors[0]) : Array.isArray(c.color) ? (j < c.color.length ? c.color[j] : c.color[0]) : c.color,
+					resolveBarColor(data.colors || this.constants.color, j),
 					data.labels[j],
 					j,
 					data.offsets[j],

src/js/utils/colors.js

@@ -51,3 +51,9 @@ export const getColor = (color) => {
 	}
 	return PRESET_COLOR_MAP[color] || color;
 };
+
+export const resolveBarColor = (colors, barIndex) => {
+	if(!Array.isArray(colors)) return colors;
+	if(barIndex > colors.length) barIndex = colors.length-1;
+	return colors[barIndex];
+};