@juspay/svelte-ui-components 2.80.4 → 2.80.5

package/dist/BarChart/BarChart.svelte

@@ -755,7 +755,12 @@
                     onclick={() => handleClick(bar)}
                   />
                 {/if}
-                {#if showValues && !isStackedMode}
+                <!-- Suppress the horizontal value label when its sub-band is thinner
+                     than the ~11px label, so cramped multi-series charts hide labels
+                     instead of overlapping them into an unreadable cluster. Consumers
+                     restore labels by giving the chart more height (aspectRatio /
+                     scrollable / minBandWidth). -->
+                {#if showValues && !isStackedMode && (isVertical || bar.height >= 13)}
                   <text
                     class="bar-value"
                     x={isVertical ? bar.x + bar.width / 2 : bar.x + bar.width + 4}

package/dist/_chart/ChartTooltip.svelte

@@ -2,10 +2,47 @@
   import type { ChartTooltipProperties } from './types';
 
   let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
+
+  const OFFSET = 12;
+
+  let tooltipEl = $state<HTMLDivElement | null>(null);
+  let tooltipWidth = $state(0);
+  let tooltipHeight = $state(0);
+
+  // Clamp against the positioned chart container so the tooltip never spills past
+  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
+  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
+  const containerHeight = $derived(
+    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+  );
+
+  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
+  const left = $derived.by(() => {
+    let value = mouseX + OFFSET;
+    if (value + tooltipWidth > containerWidth) {
+      value = mouseX - tooltipWidth - OFFSET;
+    }
+    return Math.max(0, value);
+  });
+
+  // Vertical: keep the tooltip within the container's top and bottom edges.
+  const top = $derived.by(() => {
+    let value = mouseY - OFFSET;
+    if (value + tooltipHeight > containerHeight) {
+      value = containerHeight - tooltipHeight;
+    }
+    return Math.max(0, value);
+  });
 </script>
 
 {#if data !== null}
-  <div class="chart-tooltip {classes ?? ''}" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+  <div
+    bind:this={tooltipEl}
+    bind:clientWidth={tooltipWidth}
+    bind:clientHeight={tooltipHeight}
+    class="chart-tooltip {classes ?? ''}"
+    style="left: {left}px; top: {top}px;"
+  >
     {#if typeof customSnippet === 'function'}
       {@render customSnippet(data)}
     {:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.80.4",
+  "version": "2.80.5",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",