feat: support top bar tooltip placement

Author: iexitdev

packages/react-native/src/charts/bar/tooltip.tsx

@@ -32,8 +32,11 @@ export const renderDefaultBarChartTooltip = <TData,>(
   }
 
   const contentX = x + config.padding;
+  const hasLabel = bar.xLabel.trim().length > 0;
   const labelY = y + config.padding + config.labelFontSize;
-  const valueY = labelY + tooltipLineHeight;
+  const valueY = hasLabel
+    ? labelY + tooltipLineHeight
+    : y + config.padding + config.fontSize;
   const hasShadow = config.shadowOpacity > 0;
   const { Circle, Group, Rect, Text } = renderer;
   const valueText = `${bar.seriesLabel}: ${bar.formattedValue}`;
@@ -62,17 +65,19 @@ export const renderDefaultBarChartTooltip = <TData,>(
         strokeOpacity={0.2}
         strokeWidth={1}
       />
-      <Text
-        x={contentX}
-        y={labelY}
-        fill={config.labelColor}
-        fontSize={config.labelFontSize}
-        fontWeight="600"
-        text={bar.xLabel}
-        {...getFontFamilyProps(config.fontFamily)}
-      >
-        {bar.xLabel}
-      </Text>
+      {hasLabel ? (
+        <Text
+          x={contentX}
+          y={labelY}
+          fill={config.labelColor}
+          fontSize={config.labelFontSize}
+          fontWeight="600"
+          text={bar.xLabel}
+          {...getFontFamilyProps(config.fontFamily)}
+        >
+          {bar.xLabel}
+        </Text>
+      ) : null}
       <Circle
         cx={contentX + 3}
         cy={valueY - config.fontSize * 0.32}

packages/react-native/src/charts/bar/tooltipModel.ts

@@ -42,8 +42,11 @@ export const getBarChartTooltipModel = <TData>({
     return undefined;
   }
 
-  const height =
-    config.padding * 2 + config.labelFontSize + tooltipLineHeight + 2;
+  const hasLabel = bar.xLabel.trim().length > 0;
+  const contentHeight = hasLabel
+    ? config.labelFontSize + tooltipLineHeight
+    : config.fontSize;
+  const height = config.padding * 2 + contentHeight + 2;
   const pointerAnchor =
     config.anchor === "pointer" && pointer?.key === bar.key
       ? pointer
@@ -60,13 +63,15 @@ export const getBarChartTooltipModel = <TData>({
   const aboveY = anchorY - height - config.offset;
   const belowY = belowAnchorY + config.offset;
   const y =
-    config.placement === "above"
-      ? clamp(aboveY, minY, maxY)
-      : config.placement === "below"
-        ? clamp(belowY, minY, maxY)
-        : aboveY >= minY
-          ? aboveY
-          : clamp(belowY, minY, maxY);
+    config.placement === "top"
+      ? minY
+      : config.placement === "above"
+        ? clamp(aboveY, minY, maxY)
+        : config.placement === "below"
+          ? clamp(belowY, minY, maxY)
+          : aboveY >= minY
+            ? aboveY
+            : clamp(belowY, minY, maxY);
 
   return {
     bar,

packages/react-native/src/charts/bar/types.ts

@@ -91,7 +91,7 @@ export type BarChartTooltipConfig = {
 };
 
 export type BarChartTooltipAnchor = "bar" | "pointer";
-export type BarChartTooltipPlacement = "auto" | "above" | "below";
+export type BarChartTooltipPlacement = "auto" | "above" | "below" | "top";
 
 export type ResolvedBarChartTooltipConfig = {
   visible: boolean;

packages/react-native/test/bar-interaction.test.ts

@@ -303,6 +303,29 @@ describe("BarChart interaction helpers", () => {
     });
   });
 
+  it("supports top-pinned tooltips that still follow the selected bar x", () => {
+    const tooltip = getBarChartTooltipModel({
+      bar: { ...bars[0]!, x: 180 },
+      boxes: {
+        outer: { x: 0, y: 0, width: 320, height: 220 },
+        plot: { x: 52, y: 24, width: 240, height: 160 }
+      },
+      config: getBarChartTooltipConfig({
+        themeTooltip,
+        tooltip: {
+          edgePadding: 6,
+          placement: "top",
+          width: 132
+        }
+      })
+    });
+
+    expect(tooltip).toMatchObject({
+      x: 128,
+      y: 6
+    });
+  });
+
   it("keys tooltip animation targets by selected bar and position", () => {
     const tooltip = getBarChartTooltipModel({
       bar: bars[0],