From 203c7e698757da5bcb42579afce8480fb70bc80c Mon Sep 17 00:00:00 2001
From: Eliad Moosavi <iliadmoosavi@gmail.com>
Date: Mon, 1 Oct 2018 14:21:30 -0400
Subject: [PATCH] fix(core): legend updates in pie & donut should respect
 legend filters

---
 packages/core/src/base-chart.ts |  3 ++-
 packages/core/src/pie-chart.ts  | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
index b0f7a89641..a57098ae8b 100644
--- a/packages/core/src/base-chart.ts
+++ b/packages/core/src/base-chart.ts
@@ -473,7 +473,7 @@ export class BaseChart {
 				if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
 					return this.colorScale[this.displayData.datasets[0].label](d.key);
 				} else if (d.value === Configuration.legend.items.status.ACTIVE) {
-						return this.colorScale[d.key]();
+					return this.colorScale[d.key]();
 				}
 
 				return "white";
@@ -520,6 +520,7 @@ export class BaseChart {
 
 	addOrUpdateLegend() {
 		this.addLegend();
+
 		if (this.options.legendClickable) {
 			this.setClickableLegend();
 		}
diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
index 6ebc5628a5..518ac62862 100644
--- a/packages/core/src/pie-chart.ts
+++ b/packages/core/src/pie-chart.ts
@@ -342,16 +342,30 @@ export class PieChart extends BaseChart {
 		this.container.select(".legend")
 			.selectAll("*").remove();
 
+		const legendItems = this.getLegendItems();
 		const legend = this.container.select(".legend")
 			.attr("font-size", Configuration.legend.fontSize)
 			.selectAll("div")
-			.data(this.getLegendItemKeys())
+			.data(Object.keys(legendItems))
 			.enter().append("li")
 				.attr("class", "legend-btn active");
 
 		legend.append("div")
 			.attr("class", "legend-circle")
-			.style("background-color", (d, i) => this.colorScale(d));
+			.style("background-color", (d, i) => {				
+				if (legendItems[d] === Configuration.legend.items.status.ACTIVE) {
+					return this.colorScale(d);
+				}
+				
+				return "white";
+			})
+			.style("border", (d, i) => {				
+				if (legendItems[d] === Configuration.legend.items.status.ACTIVE) {
+					return "none";
+				}
+				
+				return `2px solid ${this.colorScale(d)}`;
+			});
 
 		legend.append("text")
 			.text(d => d);