diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
index 8e2033baa6..ad812f1384 100644
--- a/packages/core/src/bar-chart.ts
+++ b/packages/core/src/bar-chart.ts
@@ -146,8 +146,8 @@ export class BarChart extends BaseAxisChart {
 						.attr("y", d => this.y(Math.max(0, d.value)))
 						.attr("width", this.x1.bandwidth())
 						.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
-						.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
-						.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null)
+						.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
+						.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 						.attr("stroke-width", Configuration.bars.default.strokeWidth)
 						.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 
@@ -193,9 +193,9 @@ export class BarChart extends BaseAxisChart {
 			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 			.style("opacity", 0)
 			.transition(this.getFillTransition())
-			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
+			.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
 			.style("opacity", 1)
-			.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
+			.attr("stroke", (d: any) => this.getStrokeColor(d.datasetLabel, d.label, d.value))
 			.attr("stroke-width", Configuration.bars.default.strokeWidth);
 
 		addedBars.selectAll("rect.bar")
@@ -209,9 +209,9 @@ export class BarChart extends BaseAxisChart {
 			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
 			.style("opacity", 0)
 			.transition(this.getFillTransition())
-			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
+			.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
 			.style("opacity", 1)
-			.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
+			.attr("stroke", (d: any) => this.getStrokeColor(d.datasetLabel, d.label, d.value))
 			.attr("stroke-width", Configuration.bars.default.strokeWidth);
 
 		// Remove bar groups are no longer needed
@@ -262,8 +262,8 @@ export class BarChart extends BaseAxisChart {
 			.attr("y", d => this.y(Math.max(0, d.value)))
 			.attr("width", this.x1.bandwidth())
 			.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
-			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
-			.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null);
+			.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
+			.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null);
 	}
 
 	resizeChart() {
@@ -302,7 +302,7 @@ export class BarChart extends BaseAxisChart {
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)
-					.attr("stroke", self.colorScale[d.datasetLabel](d.label))
+					.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
 					.attr("stroke-opacity", Configuration.bars.mouseover.strokeOpacity);
 
 				self.showTooltip(d, this);
@@ -319,7 +319,7 @@ export class BarChart extends BaseAxisChart {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
 				select(this)
 					.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
-					.attr("stroke", accessibility ? self.colorScale[d.datasetLabel](d.label) : "none")
+					.attr("stroke", accessibility ? self.getStrokeColor(d.datasetLabel, d.label, d.value) : "none")
 					.attr("stroke-opacity", Configuration.bars.mouseout.strokeOpacity);
 
 				self.hideTooltip();
diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
index 965a1e4569..c3324db079 100644
--- a/packages/core/src/base-chart.ts
+++ b/packages/core/src/base-chart.ts
@@ -238,6 +238,22 @@ export class BaseChart {
 		}
 	}
 
+	getFillColor(datasetLabel: any, label?: any, value?: any) {
+		if (this.options.getFillColor && !this.options.accessibility) {
+			return this.options.getFillColor(datasetLabel, label, value) || this.getFillScale()[datasetLabel](label);
+		} else {
+			return this.getFillScale()[datasetLabel](label);
+		}
+	}
+
+	getStrokeColor(datasetLabel: any, label?: any, value?: any) {
+		if (this.options.getStrokeColor) {
+			return this.options.getStrokeColor(datasetLabel, label, value) || this.colorScale[datasetLabel](label);
+		} else {
+			return this.colorScale[datasetLabel](label);
+		}
+	}
+
 	// TODO - Refactor
 	getChartSize(container = this.container) {
 		let ratio, marginForLegendTop;
@@ -421,7 +437,7 @@ export class BaseChart {
 		const exceptedElementData = exceptedElement.datum() as any;
 		select(exception).attr("fill-opacity", false);
 		select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity);
-		select(exception).attr("fill", (d: any) => this.getFillScale()[d.datasetLabel](exceptedElementData.label));
+		select(exception).attr("fill", (d: any) => this.getFillColor(d.datasetLabel, exceptedElementData.label, exceptedElementData.value));
 	}
 
 	// ================================================================================
@@ -513,9 +529,9 @@ export class BaseChart {
 			.merge(legendItems.selectAll("div"))
 			.style("background-color", (d, i) => {
 				if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
-					return this.colorScale[this.displayData.datasets[0].label](d.key);
+					return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
 				} else if (d.value === Configuration.legend.items.status.ACTIVE) {
-					return this.colorScale[d.key]();
+					return this.getStrokeColor(d.key);
 				}
 
 				return "white";
@@ -698,18 +714,18 @@ export class BaseChart {
 								.select("div.legend-circle")
 								.style("background-color", (d, i) => {
 									if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
-										return this.colorScale[this.displayData.datasets[0].label](d.key);
+										return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
 									} else if (d.value === Configuration.legend.items.status.ACTIVE) {
-										return this.colorScale[d.key]();
+										return this.getStrokeColor(d.key);
 									}
 
 									return "white";
 								})
 								.style("border-color", d => {
 									if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {
-										return this.colorScale[this.displayData.datasets[0].label](d.key);
+										return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
 									} else {
-										return this.colorScale[d.key]();
+										return this.getStrokeColor(d.key);
 									}
 								})
 								.style("border-style", Configuration.legend.inactive.borderStyle)
@@ -730,18 +746,18 @@ export class BaseChart {
 				.attr("class", "legend-circle")
 				.style("background-color", (d, i) => {
 					if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
-						return this.colorScale[this.displayData.datasets[0].label](d.key);
+						return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
 					} else if (d.value === Configuration.legend.items.status.ACTIVE) {
-						return this.colorScale[d.key]();
+						return this.getStrokeColor(d.key);
 					}
 
 					return "white";
 				})
 				.style("border-color", d => {
 					if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {
-						return this.colorScale[this.displayData.datasets[0].label](d.key);
+						return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
 					} else {
-						return this.colorScale[d.key]();
+						return this.getStrokeColor(d.key);
 					}
 				})
 				.style("border-style", Configuration.legend.inactive.borderStyle)
diff --git a/packages/core/src/line-chart.ts b/packages/core/src/line-chart.ts
index 1eb47d2770..30c66627c7 100644
--- a/packages/core/src/line-chart.ts
+++ b/packages/core/src/line-chart.ts
@@ -41,7 +41,7 @@ export class LineChart extends BaseAxisChart {
 
 	getCircleFill(radius, d) {
 		const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius;
-		return circleShouldBeFilled ? this.colorScale[d.datasetLabel](d.label) : "white";
+		return circleShouldBeFilled ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : "white";
 	}
 
 	draw() {
@@ -85,7 +85,7 @@ export class LineChart extends BaseAxisChart {
 				.classed("lines", true);
 
 		gLines.append("path")
-			.attr("stroke", d => this.colorScale[d.label]())
+			.attr("stroke", d => this.getStrokeColor(d.label))
 			.datum(d => d.data)
 			.attr("class", "line")
 			.attr("d", this.lineGenerator);
@@ -100,7 +100,7 @@ export class LineChart extends BaseAxisChart {
 				.attr("cy", d => this.y(d.value))
 				.attr("r", circleRadius)
 				.attr("fill", d => this.getCircleFill(circleRadius, d))
-				.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
+				.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 
 		// Hide the overlay
 		this.updateOverlay().hide();
@@ -130,7 +130,7 @@ export class LineChart extends BaseAxisChart {
 			.classed("lines", true);
 
 		addedLineGroups.append("path")
-			.attr("stroke", d => this.colorScale[d.label]())
+			.attr("stroke", d => this.getStrokeColor(d.label))
 			.datum(d => d.data)
 			.style("opacity", 0)
 			.transition(this.getDefaultTransition())
@@ -152,7 +152,7 @@ export class LineChart extends BaseAxisChart {
 				.transition(this.getDefaultTransition())
 				.style("opacity", 1)
 				.attr("fill", d => this.getCircleFill(circleRadius, d))
-				.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
+				.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 
 		// Remove lines that are no longer needed
 		gLines.exit()
@@ -193,8 +193,7 @@ export class LineChart extends BaseAxisChart {
 			.style("opacity", 1)
 			.attr("stroke", function(d) {
 				const parentDatum = select(this.parentNode).datum() as any;
-
-				return self.colorScale[parentDatum.label]();
+				return self.getStrokeColor(parentDatum.label);
 			})
 			.attr("class", "line")
 			.attr("d", this.lineGenerator);
@@ -212,7 +211,7 @@ export class LineChart extends BaseAxisChart {
 			.attr("cy", d => this.y(d.value))
 			.attr("r", circleRadius)
 			.attr("fill", d => this.getCircleFill(circleRadius, d))
-			.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
+			.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
 	}
 
 	resizeChart() {
@@ -269,7 +268,7 @@ export class LineChart extends BaseAxisChart {
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.lines.points.mouseover.strokeWidth)
-					.attr("stroke", self.colorScale[d.datasetLabel](d.label))
+					.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
 					.attr("stroke-opacity", Configuration.lines.points.mouseover.strokeOpacity);
 
 				self.showTooltip(d, this);
@@ -286,7 +285,7 @@ export class LineChart extends BaseAxisChart {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.lines.points.mouseout;
 				select(this)
 					.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
-					.attr("stroke", self.colorScale[d.datasetLabel](d.label))
+					.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
 					.attr("stroke-opacity", Configuration.lines.points.mouseout.strokeOpacity);
 
 				self.hideTooltip();
diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
index 4dfa18ce98..7cfe95a68f 100644
--- a/packages/core/src/pie-chart.ts
+++ b/packages/core/src/pie-chart.ts
@@ -120,8 +120,8 @@ export class PieChart extends BaseChart {
 			.enter()
 			.append("path")
 			.attr("d", this.arc)
-			.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label)) // Support multiple datasets
-			.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
+			.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value)) // Support multiple datasets
+			.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
 			.attr("stroke-width", Configuration.pie.default.strokeWidth)
 			.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
 			.each(function(d) { this._current = d; });
@@ -155,13 +155,13 @@ export class PieChart extends BaseChart {
 		path
 			.transition()
 			.duration(0)
-			.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
+			.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
 			.attr("stroke-width", Configuration.pie.default.strokeWidth)
 			.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
 			.transition()
 			.style("opacity", 1)
 			.duration(Configuration.transitions.default.duration)
-			.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
+			.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
 			.attrTween("d", function (a) {
 				return arcTween.bind(this)(a, self.arc);
 			});
@@ -172,12 +172,12 @@ export class PieChart extends BaseChart {
 			.transition()
 			.duration(0)
 			.style("opacity", 0)
-			.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
+			.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
 			.attr("stroke-width", Configuration.pie.default.strokeWidth)
 			.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
 			.transition()
 			.duration(Configuration.transitions.default.duration)
-			.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
+			.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
 			.style("opacity", 1)
 			.attrTween("d", function (a) {
 				return arcTween.bind(this)(a, self.arc);
@@ -251,7 +251,7 @@ export class PieChart extends BaseChart {
 			// Fade everything out except for this element
 			select(exception).attr("fill-opacity", false);
 			select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity);
-			select(exception).attr("fill", (d: any) => this.getFillScale()[this.displayData.datasets[0].label](d.data.label));
+			select(exception).attr("fill", (d: any) => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value));
 		}
 	}
 
@@ -301,7 +301,7 @@ export class PieChart extends BaseChart {
 				sliceElement
 					.attr("stroke-width", Configuration.pie.mouseover.strokeWidth)
 					.attr("stroke-opacity", Configuration.pie.mouseover.strokeOpacity)
-					.attr("stroke", self.colorScale[self.displayData.datasets[0].label](d.data.label));
+					.attr("stroke", self.getStrokeColor(self.displayData.datasets[0].label, d.data.label, d.data.value));
 
 				self.showTooltip(d);
 				self.reduceOpacity(this);
@@ -316,7 +316,7 @@ export class PieChart extends BaseChart {
 			.on("mouseout", function(d) {
 				select(this)
 					.attr("stroke-width", accessibility ? Configuration.pie.default.strokeWidth : Configuration.pie.mouseout.strokeWidth)
-					.attr("stroke", accessibility ? self.colorScale[self.displayData.datasets[0].label](d.data.label) : "none")
+					.attr("stroke", accessibility ? self.getStrokeColor(self.displayData.datasets[0].label, d.data.label, d.data.value) : "none")
 					.attr("stroke-opacity", Configuration.pie.mouseout.strokeOpacity);
 
 				self.hideTooltip();
diff --git a/packages/core/src/stacked-bar-chart.ts b/packages/core/src/stacked-bar-chart.ts
index 345e452dac..71f49abb66 100644
--- a/packages/core/src/stacked-bar-chart.ts
+++ b/packages/core/src/stacked-bar-chart.ts
@@ -97,8 +97,8 @@ export class StackedBarChart extends BaseAxisChart {
 					.attr("y", d => this.y(d[1]))
 					.attr("height", d => this.y(d[0]) - this.y(d[1]))
 					.attr("width", d => this.x.bandwidth())
-					.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
-					.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
+					.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
+					.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 					.attr("stroke-width", Configuration.bars.default.strokeWidth)
 					.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 
@@ -133,11 +133,11 @@ export class StackedBarChart extends BaseAxisChart {
 				.attr("y", d => this.y(d[1]))
 				.attr("height", d => this.y(d[0]) - this.y(d[1]))
 				.attr("width", d => this.x.bandwidth())
-				.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
+				.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
 				.style("opacity", 0)
 				.transition(this.getFillTransition())
 				.style("opacity", 1)
-				.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
+				.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 				.attr("stroke-width", Configuration.bars.default.strokeWidth)
 				.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 		};
@@ -211,8 +211,8 @@ export class StackedBarChart extends BaseAxisChart {
 			.attr("y", d => this.y(d[1]))
 			.attr("height", d => this.y(d[0]) - this.y(d[1]))
 			.attr("width", d => this.x.bandwidth())
-			.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
-			.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
+			.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
+			.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
 			.attr("stroke-width", Configuration.bars.default.strokeWidth)
 			.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
 	}
@@ -228,7 +228,7 @@ export class StackedBarChart extends BaseAxisChart {
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)
-					.attr("stroke", self.colorScale[d.datasetLabel](d.label))
+					.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
 					.attr("stroke-opacity", Configuration.bars.mouseover.strokeOpacity);
 
 				self.showTooltip(d, this);
@@ -245,7 +245,7 @@ export class StackedBarChart extends BaseAxisChart {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
 				select(this)
 					.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
-					.attr("stroke", accessibility ? self.colorScale[d.datasetLabel](d.label) : "none")
+					.attr("stroke", accessibility ? self.getStrokeColor(d.datasetLabel, d.label, d.value) : "none")
 					.attr("stroke-opacity", Configuration.bars.mouseout.strokeOpacity);
 
 				self.hideTooltip();