From 514350eb91ef142b1357a4ed4e5a21f0fbee3ab6 Mon Sep 17 00:00:00 2001
From: Lorenzo Levy <lorenzoroccolevy@gmail.com>
Date: Tue, 24 Sep 2024 17:18:11 -0700
Subject: [PATCH] fix(line-chart): adds renderTooltipOutside input to allow for
 renders in modal (#2273)

---
 .changeset/tasty-dancers-do.md                       | 5 +++++
 src/components/ebay-line-chart/component.ts          | 3 ++-
 src/components/ebay-line-chart/index.marko           | 1 +
 src/components/ebay-line-chart/line-chart.stories.ts | 9 +++++++++
 src/components/ebay-line-chart/marko-tag.json        | 1 +
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tasty-dancers-do.md

diff --git a/.changeset/tasty-dancers-do.md b/.changeset/tasty-dancers-do.md
new file mode 100644
index 000000000..65512b594
--- /dev/null
+++ b/.changeset/tasty-dancers-do.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+fix(line-chart): adds renderTooltipOutside input to allow for renders in modal
diff --git a/src/components/ebay-line-chart/component.ts b/src/components/ebay-line-chart/component.ts
index 54c3da3af..6499dc3c6 100644
--- a/src/components/ebay-line-chart/component.ts
+++ b/src/components/ebay-line-chart/component.ts
@@ -40,6 +40,7 @@ interface LineChartInput
     "cdn-highcharts-accessibility"?: string;
     version?: string;
     series: SeriesLineOptions | SeriesLineOptions[];
+    renderTooltipOutside?: boolean;
     trend?: "positive" | "negative" | "neutral";
 }
 
@@ -321,7 +322,7 @@ class LineChart extends Marko.Component<Input> {
             backgroundColor: tooltipBackgroundColor, // sets tooltip background color
             borderWidth: 0, // hide the default border stroke
             borderRadius: 10, // set the border radius of the tooltip
-            outside: true, // used to render the tooltip outside of the main SVG element
+            outside: component.input.renderTooltipOutside !== false, // used to render the tooltip outside of the main SVG element
             shadow: false, // hide the default shadow as it conflicts with designs
             crosshair: {
                 dashStyle: "Solid", // makes a yaxis cross hair appear over the hovered xAxis data points
diff --git a/src/components/ebay-line-chart/index.marko b/src/components/ebay-line-chart/index.marko
index 81c1dab63..5b986e31c 100644
--- a/src/components/ebay-line-chart/index.marko
+++ b/src/components/ebay-line-chart/index.marko
@@ -9,6 +9,7 @@ $ const {
     yAxisLabels,
     xAxisPositioner,
     yAxisPositioner,
+    renderTooltipOutside,
     trend,
     ...htmlInput
 } = input;
diff --git a/src/components/ebay-line-chart/line-chart.stories.ts b/src/components/ebay-line-chart/line-chart.stories.ts
index 9cfae5ce4..df83cc029 100644
--- a/src/components/ebay-line-chart/line-chart.stories.ts
+++ b/src/components/ebay-line-chart/line-chart.stories.ts
@@ -90,6 +90,15 @@ export default {
             type: { name: "string", require: false },
             description: "Highcharts version to load from CDN",
         },
+        renderTooltipOutside: {
+            type: { name: "boolean", require: false },
+            description: "Defaults to `true`, if set to false the tooltip will render inside the chart container. Set to `false` when rendering in a modal.",
+            table: {
+                defaultValue: {
+                    summary: "true",
+                },
+            },
+        }
     },
 };
 
diff --git a/src/components/ebay-line-chart/marko-tag.json b/src/components/ebay-line-chart/marko-tag.json
index 5c915ccfe..52252b233 100644
--- a/src/components/ebay-line-chart/marko-tag.json
+++ b/src/components/ebay-line-chart/marko-tag.json
@@ -19,5 +19,6 @@
     "@xAxisPositioner": "function",
     "@yAxisLabels": "array",
     "@yAxisPositioner": "function",
+    "@renderTooltipOutside": "boolean",
     "@trend": "boolean"
 }