fix(line-chart): adds renderTooltipOutside input to allow for renders…

… in modal (#2273)
eBay · Sep 25, 2024 · 514350e · 514350e
1 parent 899f082
commit 514350e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/tasty-dancers-do.md 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
@@ -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
@@ -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
@@ -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
@@ -19,5 +19,6 @@
     "@xAxisPositioner": "function",
     "@yAxisLabels": "array",
     "@yAxisPositioner": "function",
+    "@renderTooltipOutside": "boolean",
     "@trend": "boolean"
 }