From f7ebbbe06aa2ed3ecde74e1b5984cd517dd844fd Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Fri, 7 Feb 2020 14:26:52 +0100
Subject: [PATCH] Fix issue with Kibana Icon in Uptime App (#56837) (#57091)

---
 .../public/components/functional/charts/donut_chart.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx
index 35ee35e2926a8..09e28efb4e50b 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx
@@ -32,15 +32,20 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
   useEffect(() => {
     if (chartElement.current !== null) {
       // we must remove any existing paths before painting
-      d3.selectAll('g').remove();
+      d3.select(chartElement.current)
+        .selectAll('g')
+        .remove();
+
       const svgElement = d3
         .select(chartElement.current)
         .append('g')
         .attr('transform', `translate(${width / 2}, ${height / 2})`);
+
       const color = d3.scale
         .ordinal()
         .domain(['up', 'down'])
         .range([gray, danger]);
+
       const pieGenerator = d3.layout
         .pie()
         .value(({ value }: any) => value)
@@ -69,6 +74,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
         .attr('fill', (d: any) => color(d.data.key));
     }
   }, [danger, down, gray, height, upCount, width]);
+
   return (
     <EuiFlexGroup alignItems="center" responsive={false}>
       <EuiFlexItem grow={false}>