From fef29d9df4df627f096061169b9f19ac2981acbe Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Fri, 17 Feb 2023 10:48:44 -0500
Subject: [PATCH 1/2] fix(charts) fix broken tooltip examples

https://github.com/patternfly/patternfly-react/issues/8591
---
 .../ChartLegend/examples/ChartLegend.md       | 22 +++++++++----------
 .../ChartTooltip/examples/ChartTooltip.md     | 20 ++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
index 27201b4d578..abc593d7b89 100644
--- a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
+++ b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md
@@ -605,18 +605,18 @@ import { Tooltip } from '@patternfly/react-core';
 class TooltipPieChart extends React.Component {
   constructor(props) {
     super(props);
-
+    
     // Custom legend label component
-    // Note: Tooltip outputs a div tag, so we wrap that using a foreignObject
-    this.LegendLabel = ({datum, x, y, ...rest}) => (
-      <g>
-        <foreignObject height="100%" width="100%" x={x - 10} y={y - 12}>
-          <Tooltip content={datum.name} enableFlip >
-            <ChartLabel {...rest} />
-          </Tooltip>
-        </foreignObject>
-      </g>
-    );
+    // Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead
+    this.LegendLabel = ({datum, ...rest}) => {
+      const ref = React.createRef();
+      return (
+        <g ref={ref}>
+          <ChartLabel {...rest} />
+          <Tooltip content={datum.name} enableFlip reference={ref} />
+        </g>
+      );
+    }
 
     // Custom legend component
     this.getLegend = (legendData) => (
diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
index 0b6de93abb5..7d1b44cf67c 100644
--- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
+++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
@@ -608,16 +608,16 @@ class TooltipPieChart extends React.Component {
     super(props);
 
     // Custom legend label component
-    // Note: Tooltip outputs a div tag, so we wrap that using a foreignObject
-    this.LegendLabel = ({datum, x, y, ...rest}) => (
-      <g>
-        <foreignObject height="100%" width="100%" x={x - 10} y={y - 12}>
-          <Tooltip content={datum.name} enableFlip >
-            <ChartLabel {...rest} />
-          </Tooltip>
-        </foreignObject>
-      </g>
-    );
+    // Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead
+    this.LegendLabel = ({datum, ...rest}) => {
+      const ref = React.createRef();
+      return (
+        <g ref={ref}>
+          <ChartLabel {...rest} />
+          <Tooltip content={datum.name} enableFlip reference={ref} />
+        </g>
+      );
+    }
 
     // Custom legend component
     this.getLegend = (legendData) => (

From af083bc02ea4fee948658ba2542111f52d97035f Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Tue, 21 Feb 2023 10:38:45 -0500
Subject: [PATCH 2/2] chore(charts) removed ChartContainer from CSS overflow
 example

ChartContainer was missing height and width
---
 .../src/components/ChartTooltip/examples/ChartTooltip.md    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
index 7d1b44cf67c..1e9f7576735 100644
--- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
+++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md
@@ -767,7 +767,7 @@ This demonstrates an alternate way of applying tooltips using CSS overflow inste
 
 ```js
 import React from 'react';
-import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 <div className="ws-react-charts-tooltip-overflow">
   <div style={{ height: '100px', width: '400px' }}>
@@ -790,11 +790,9 @@ import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, Cha
           { name: 'Cats', x: '2018', y: 6 }
         ]}
       />
+      <ChartLabel text="CPU utilization" dy={120}/>
     </ChartGroup>
   </div>
-  <ChartContainer title="CPU utilization">
-    <ChartLabel text="CPU utilization" dy={15}/>
-  </ChartContainer>
 </div>
 ```