check if chart is compatible to reuse colors

dist/frappe-charts.esm.js

@@ -783,8 +783,8 @@ class BaseChart {
 			this.current_index = 0;
 		}
 		this.has_legend = has_legend;
-
 		this.colors = colors;
+
 		const list = type === 'percentage' || type === 'pie'
 			? this.data.labels
 			: this.data.datasets;
@@ -815,10 +815,23 @@ class BaseChart {
 			heatmap: []
 		};
 
+		// Only across compatible colors types
+		let color_compatible_types = {
+			bar: ['line', 'scatter'],
+			line: ['scatter', 'bar'],
+			pie: ['percentage'],
+			scatter: ['line', 'bar'],
+			percentage: ['pie'],
+			heatmap: []
+		};
+
 		if(!compatible_types[this.type].includes(type)) {
 			console.error(`'${this.type}' chart cannot be converted to a '${type}' chart.`);
 		}
 
+		// whether the new chart can use the existing colors
+		const use_color = color_compatible_types[this.type].includes(type);
+
 		// Okay, this is anticlimactic
 		// this function will need to actually be 'change_chart_type(type)'
 		// that will update only the required elements, but for now ...
@@ -828,7 +841,7 @@ class BaseChart {
 			data: this.raw_chart_args.data,
 			type: type,
 			height: this.raw_chart_args.height,
-			colors: this.colors
+			colors: use_color ? this.colors : undefined
 		});
 	}
 
@@ -2255,7 +2268,6 @@ class PieChart extends BaseChart {
 		this.max_slices = 10;
 		this.max_legend_points = 6;
 		this.isAnimate = false;
-		this.colors = args.colors;
 		this.startAngle = args.startAngle || 0;
 		this.clockWise = args.clockWise || false;
 		this.mouseMove = this.mouseMove.bind(this);

docs/index.html

@@ -83,7 +83,7 @@
     title: "My Awesome Chart",
     data: data,
     type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
-    // colors: ['#000', '#ece7f2', 'light-blue'], // use direct hex code or preset color
+    // colors: ['#000000', '#ece7f2', 'light-blue'], // use direct hex code or preset color
     height: 250,
     format_tooltip_x: d => (d + '').toUpperCase(),
     format_tooltip_y: d => d + ' pts'

src/scripts/charts/BaseChart.js

@@ -36,8 +36,8 @@ export default class BaseChart {
 			this.current_index = 0;
 		}
 		this.has_legend = has_legend;
-
 		this.colors = colors;
+
 		const list = type === 'percentage' || type === 'pie'
 			? this.data.labels
 			: this.data.datasets;
@@ -68,10 +68,23 @@ export default class BaseChart {
 			heatmap: []
 		};
 
+		// Only across compatible colors types
+		let color_compatible_types = {
+			bar: ['line', 'scatter'],
+			line: ['scatter', 'bar'],
+			pie: ['percentage'],
+			scatter: ['line', 'bar'],
+			percentage: ['pie'],
+			heatmap: []
+		};
+
 		if(!compatible_types[this.type].includes(type)) {
 			console.error(`'${this.type}' chart cannot be converted to a '${type}' chart.`);
 		}
 
+		// whether the new chart can use the existing colors
+		const use_color = color_compatible_types[this.type].includes(type);
+
 		// Okay, this is anticlimactic
 		// this function will need to actually be 'change_chart_type(type)'
 		// that will update only the required elements, but for now ...
@@ -81,7 +94,7 @@ export default class BaseChart {
 			data: this.raw_chart_args.data,
 			type: type,
 			height: this.raw_chart_args.height,
-			colors: this.colors
+			colors: use_color ? this.colors : undefined
 		});
 	}
 

src/scripts/charts/PieChart.js

@@ -14,7 +14,6 @@ export default class PieChart extends BaseChart {
 		this.max_slices = 10;
 		this.max_legend_points = 6;
 		this.isAnimate = false;
-		this.colors = args.colors;
 		this.startAngle = args.startAngle || 0;
 		this.clockWise = args.clockWise || false;
 		this.mouseMove = this.mouseMove.bind(this);