diff --git a/js/packages/react-ui/package.json b/js/packages/react-ui/package.json
index 37c8ff193..1b893d457 100644
--- a/js/packages/react-ui/package.json
+++ b/js/packages/react-ui/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@crayonai/react-ui",
   "license": "MIT",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -66,6 +66,7 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
@@ -96,6 +97,7 @@
     "@storybook/theming": "^8.5.3",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.12.0",
+    "@types/node-fetch": "2.6.11",
     "@types/react": ">=17.0.0",
     "@types/react-dom": ">=17.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -108,7 +110,6 @@
     "eslint-plugin-storybook": "^0.11.1",
     "eslint-plugin-unused-imports": "^3.1.0",
     "form-data": "^4.0.0",
-    "@types/node-fetch": "2.6.11",
     "postcss": "^8.5.1",
     "postcss-js": "^4.0.1",
     "postcss-remove-duplicate-values": "^1.0.0",
diff --git a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
index 9b11960d4..cd546f97a 100644
--- a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
@@ -15,6 +15,7 @@ import {
   XAxisTick,
   YAxisTick,
 } from "../shared";
+import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
@@ -293,129 +294,131 @@ const AreaChartComponent = <T extends AreaChartData>({
   }, [showYAxis, chartHeight, data, dataKeys, variant, id, maxLabelHeight]);
 
   return (
-    <SideBarTooltipProvider
-      isSideBarTooltipOpen={isSideBarTooltipOpen}
-      setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
-      data={sideBarTooltipData}
-      setData={setSideBarTooltipData}
-    >
-      <div
-        className={clsx("crayon-area-chart-container", className)}
-        style={{
-          width: width ? `${width}px` : undefined,
-        }}
+    <LabelTooltipProvider>
+      <SideBarTooltipProvider
+        isSideBarTooltipOpen={isSideBarTooltipOpen}
+        setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
+        data={sideBarTooltipData}
+        setData={setSideBarTooltipData}
       >
-        <div className="crayon-area-chart-container-inner" ref={chartContainerRef}>
-          {/* Y-axis of the chart */}
-          {yAxis}
-          <div className="crayon-area-chart-main-container" ref={mainContainerRef}>
-            <ChartContainer
-              config={chartConfig}
-              style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
-              rechartsProps={{
-                width: "100%",
-                height: chartHeight,
-              }}
-            >
-              <RechartsAreaChart
-                accessibilityLayer
-                key={`area-chart-${id}`}
-                data={data}
-                margin={{
-                  top: 20,
-                  bottom: 0,
+        <div
+          className={clsx("crayon-area-chart-container", className)}
+          style={{
+            width: width ? `${width}px` : undefined,
+          }}
+        >
+          <div className="crayon-area-chart-container-inner" ref={chartContainerRef}>
+            {/* Y-axis of the chart */}
+            {yAxis}
+            <div className="crayon-area-chart-main-container" ref={mainContainerRef}>
+              <ChartContainer
+                config={chartConfig}
+                style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
+                rechartsProps={{
+                  width: "100%",
+                  height: chartHeight,
                 }}
-                onClick={onAreaClick}
               >
-                {grid && cartesianGrid()}
-                <XAxis
-                  dataKey={categoryKey as string}
-                  tickLine={false}
-                  axisLine={false}
-                  textAnchor="middle"
-                  interval={0}
-                  tickFormatter={xAxisTickFormatter}
-                  height={maxLabelHeight}
-                  tick={
-                    <XAxisTick
-                      variant={tickVariant}
-                      widthOfGroup={widthOfGroup}
-                      labelHeight={maxLabelHeight}
-                    />
-                  }
-                  orientation="bottom"
-                  padding={{
-                    left: X_AXIS_PADDING,
-                    right: X_AXIS_PADDING,
+                <RechartsAreaChart
+                  accessibilityLayer
+                  key={`area-chart-${id}`}
+                  data={data}
+                  margin={{
+                    top: 20,
+                    bottom: 0,
                   }}
-                />
-
-                <ChartTooltip content={<CustomTooltipContent />} offset={15} />
-
-                {dataKeys.map((key) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  return (
-                    <defs key={`gradient-${transformedKey}`}>
-                      <linearGradient
-                        id={`${gradientID}-${transformedKey}`}
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="1"
-                      >
-                        <stop offset="5%" stopColor={color} stopOpacity={0.6} />
-                        <stop offset="95%" stopColor={color} stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                  );
-                })}
-
-                {dataKeys.map((key) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  return (
-                    <Area
-                      key={`main-${key}`}
-                      dataKey={key}
-                      type={variant}
-                      stroke={color}
-                      fill={`url(#${gradientID}-${transformedKey})`}
-                      fillOpacity={1}
-                      stackId="a"
-                      activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
-                      dot={false}
-                      isAnimationActive={isAnimationActive}
-                    />
-                  );
-                })}
-              </RechartsAreaChart>
-            </ChartContainer>
+                  onClick={onAreaClick}
+                >
+                  {grid && cartesianGrid()}
+                  <XAxis
+                    dataKey={categoryKey as string}
+                    tickLine={false}
+                    axisLine={false}
+                    textAnchor="middle"
+                    interval={0}
+                    tickFormatter={xAxisTickFormatter}
+                    height={maxLabelHeight}
+                    tick={
+                      <XAxisTick
+                        variant={tickVariant}
+                        widthOfGroup={widthOfGroup}
+                        labelHeight={maxLabelHeight}
+                      />
+                    }
+                    orientation="bottom"
+                    padding={{
+                      left: X_AXIS_PADDING,
+                      right: X_AXIS_PADDING,
+                    }}
+                  />
+
+                  <ChartTooltip content={<CustomTooltipContent />} offset={15} />
+
+                  {dataKeys.map((key) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    return (
+                      <defs key={`gradient-${transformedKey}`}>
+                        <linearGradient
+                          id={`${gradientID}-${transformedKey}`}
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop offset="5%" stopColor={color} stopOpacity={0.6} />
+                          <stop offset="95%" stopColor={color} stopOpacity={0} />
+                        </linearGradient>
+                      </defs>
+                    );
+                  })}
+
+                  {dataKeys.map((key) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    return (
+                      <Area
+                        key={`main-${key}`}
+                        dataKey={key}
+                        type={variant}
+                        stroke={color}
+                        fill={`url(#${gradientID}-${transformedKey})`}
+                        fillOpacity={1}
+                        stackId="a"
+                        activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
+                        dot={false}
+                        isAnimationActive={isAnimationActive}
+                      />
+                    );
+                  })}
+                </RechartsAreaChart>
+              </ChartContainer>
+            </div>
+            {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
           </div>
-          {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
-        </div>
-        {/* if the data width is greater than the effective width, then show the scroll buttons */}
-        <ScrollButtonsHorizontal
-          dataWidth={dataWidth}
-          effectiveWidth={effectiveWidth}
-          canScrollLeft={canScrollLeft}
-          canScrollRight={canScrollRight}
-          isSideBarTooltipOpen={isSideBarTooltipOpen}
-          onScrollLeft={scrollLeft}
-          onScrollRight={scrollRight}
-        />
-        {legend && (
-          <DefaultLegend
-            items={legendItems}
-            yAxisLabel={yAxisLabel}
-            xAxisLabel={xAxisLabel}
-            containerWidth={effectiveWidth}
-            isExpanded={isLegendExpanded}
-            setIsExpanded={setIsLegendExpanded}
+          {/* if the data width is greater than the effective width, then show the scroll buttons */}
+          <ScrollButtonsHorizontal
+            dataWidth={dataWidth}
+            effectiveWidth={effectiveWidth}
+            canScrollLeft={canScrollLeft}
+            canScrollRight={canScrollRight}
+            isSideBarTooltipOpen={isSideBarTooltipOpen}
+            onScrollLeft={scrollLeft}
+            onScrollRight={scrollRight}
           />
-        )}
-      </div>
-    </SideBarTooltipProvider>
+          {legend && (
+            <DefaultLegend
+              items={legendItems}
+              yAxisLabel={yAxisLabel}
+              xAxisLabel={xAxisLabel}
+              containerWidth={effectiveWidth}
+              isExpanded={isLegendExpanded}
+              setIsExpanded={setIsLegendExpanded}
+            />
+          )}
+        </div>
+      </SideBarTooltipProvider>
+    </LabelTooltipProvider>
   );
 };
 
diff --git a/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx b/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
index 4f669ceb2..57032796e 100644
--- a/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
@@ -19,6 +19,7 @@ import { ScrollButtonsHorizontal } from "../shared/ScrollButtonsHorizontal/Scrol
 import { XAxisTickVariant, type LegendItem } from "../types";
 import { useChartPalette, type PaletteName } from "../utils/PalletUtils";
 
+import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import {
   get2dChartConfig,
   getColorForDataKey,
@@ -332,139 +333,141 @@ const BarChartComponent = <T extends BarChartData>({
   );
 
   return (
-    <SideBarTooltipProvider
-      isSideBarTooltipOpen={isSideBarTooltipOpen}
-      setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
-      data={sideBarTooltipData}
-      setData={setSideBarTooltipData}
-    >
-      <div
-        className={clsx("crayon-bar-chart-container", className)}
-        style={{
-          width: width ? `${width}px` : undefined,
-        }}
+    <LabelTooltipProvider>
+      <SideBarTooltipProvider
+        isSideBarTooltipOpen={isSideBarTooltipOpen}
+        setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
+        data={sideBarTooltipData}
+        setData={setSideBarTooltipData}
       >
-        <div className="crayon-bar-chart-container-inner" ref={chartContainerRef}>
-          {/* Y-axis of the chart */}
-          {yAxis}
-          <div className="crayon-bar-chart-main-container" ref={mainContainerRef}>
-            <ChartContainer
-              config={chartConfig}
-              style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
-              rechartsProps={{
-                width: "100%",
-                height: chartHeight,
-              }}
-            >
-              <RechartsBarChart
-                accessibilityLayer
-                key={`bar-chart-${id}`}
-                data={data}
-                margin={{
-                  top: 20,
-                  bottom: 0,
+        <div
+          className={clsx("crayon-bar-chart-container", className)}
+          style={{
+            width: width ? `${width}px` : undefined,
+          }}
+        >
+          <div className="crayon-bar-chart-container-inner" ref={chartContainerRef}>
+            {/* Y-axis of the chart */}
+            {yAxis}
+            <div className="crayon-bar-chart-main-container" ref={mainContainerRef}>
+              <ChartContainer
+                config={chartConfig}
+                style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
+                rechartsProps={{
+                  width: "100%",
+                  height: chartHeight,
                 }}
-                onClick={onBarsClick}
-                onMouseMove={handleChartMouseMove}
-                onMouseLeave={handleChartMouseLeave}
-                barGap={BAR_GAP}
-                barCategoryGap={BAR_CATEGORY_GAP}
               >
-                {grid && cartesianGrid()}
-                <XAxis
-                  dataKey={categoryKey as string}
-                  tickLine={false}
-                  axisLine={false}
-                  textAnchor={"middle"}
-                  tickFormatter={xAxisTickFormatter}
-                  interval={0}
-                  height={maxLabelHeight}
-                  tick={
-                    <XAxisTick
-                      variant={tickVariant}
-                      widthOfGroup={widthOfGroup}
-                      labelHeight={maxLabelHeight}
-                    />
-                  }
-                  orientation="bottom"
-                  // gives the padding on the 2 sides see the function for reference
-                  padding={padding}
-                />
-                {/* Y-axis is rendered in the separate synchronized chart */}
-
-                <ChartTooltip
-                  // cursor={<SimpleCursor />}
-                  cursor={{
-                    fill: "var(--crayon-sunk-fills)",
-                    stroke: "var(--crayon-stroke-default)",
-                    opacity: 1,
-                    strokeWidth: 1,
+                <RechartsBarChart
+                  accessibilityLayer
+                  key={`bar-chart-${id}`}
+                  data={data}
+                  margin={{
+                    top: 20,
+                    bottom: 0,
                   }}
-                  content={<CustomTooltipContent />}
-                  offset={15}
-                />
-
-                {dataKeys.map((key, index) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  const isFirstInStack = index === 0;
-                  const isLastInStack = index === dataKeys.length - 1;
-
-                  return (
-                    <Bar
-                      key={`main-${key}`}
-                      dataKey={key}
-                      fill={color}
-                      radius={getRadiusArray(
-                        variant,
-                        radius,
-                        variant === "stacked" ? isFirstInStack : undefined,
-                        variant === "stacked" ? isLastInStack : undefined,
-                      )}
-                      stackId={variant === "stacked" ? "a" : undefined}
-                      isAnimationActive={isAnimationActive}
-                      maxBarSize={BAR_WIDTH}
-                      barSize={BAR_WIDTH}
-                      shape={
-                        <LineInBarShape
-                          internalLineColor={barInternalLineColor}
-                          internalLineWidth={BAR_INTERNAL_LINE_WIDTH}
-                          isHovered={hoveredCategory !== null}
-                          hoveredCategory={hoveredCategory}
-                          categoryKey={categoryKey as string}
-                          variant={variant}
-                        />
-                      }
-                    />
-                  );
-                })}
-              </RechartsBarChart>
-            </ChartContainer>
+                  onClick={onBarsClick}
+                  onMouseMove={handleChartMouseMove}
+                  onMouseLeave={handleChartMouseLeave}
+                  barGap={BAR_GAP}
+                  barCategoryGap={BAR_CATEGORY_GAP}
+                >
+                  {grid && cartesianGrid()}
+                  <XAxis
+                    dataKey={categoryKey as string}
+                    tickLine={false}
+                    axisLine={false}
+                    textAnchor={"middle"}
+                    tickFormatter={xAxisTickFormatter}
+                    interval={0}
+                    height={maxLabelHeight}
+                    tick={
+                      <XAxisTick
+                        variant={tickVariant}
+                        widthOfGroup={widthOfGroup}
+                        labelHeight={maxLabelHeight}
+                      />
+                    }
+                    orientation="bottom"
+                    // gives the padding on the 2 sides see the function for reference
+                    padding={padding}
+                  />
+                  {/* Y-axis is rendered in the separate synchronized chart */}
+
+                  <ChartTooltip
+                    // cursor={<SimpleCursor />}
+                    cursor={{
+                      fill: "var(--crayon-sunk-fills)",
+                      stroke: "var(--crayon-stroke-default)",
+                      opacity: 1,
+                      strokeWidth: 1,
+                    }}
+                    content={<CustomTooltipContent />}
+                    offset={15}
+                  />
+
+                  {dataKeys.map((key, index) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    const isFirstInStack = index === 0;
+                    const isLastInStack = index === dataKeys.length - 1;
+
+                    return (
+                      <Bar
+                        key={`main-${key}`}
+                        dataKey={key}
+                        fill={color}
+                        radius={getRadiusArray(
+                          variant,
+                          radius,
+                          variant === "stacked" ? isFirstInStack : undefined,
+                          variant === "stacked" ? isLastInStack : undefined,
+                        )}
+                        stackId={variant === "stacked" ? "a" : undefined}
+                        isAnimationActive={isAnimationActive}
+                        maxBarSize={BAR_WIDTH}
+                        barSize={BAR_WIDTH}
+                        shape={
+                          <LineInBarShape
+                            internalLineColor={barInternalLineColor}
+                            internalLineWidth={BAR_INTERNAL_LINE_WIDTH}
+                            isHovered={hoveredCategory !== null}
+                            hoveredCategory={hoveredCategory}
+                            categoryKey={categoryKey as string}
+                            variant={variant}
+                          />
+                        }
+                      />
+                    );
+                  })}
+                </RechartsBarChart>
+              </ChartContainer>
+            </div>
+            {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
           </div>
-          {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
-        </div>
-        {/* if the data width is greater than the effective width, then show the scroll buttons */}
-        <ScrollButtonsHorizontal
-          dataWidth={dataWidth}
-          effectiveWidth={effectiveWidth}
-          canScrollLeft={canScrollLeft}
-          canScrollRight={canScrollRight}
-          isSideBarTooltipOpen={isSideBarTooltipOpen}
-          onScrollLeft={scrollLeft}
-          onScrollRight={scrollRight}
-        />
-        {legend && (
-          <DefaultLegend
-            items={legendItems}
-            yAxisLabel={yAxisLabel}
-            xAxisLabel={xAxisLabel}
-            containerWidth={effectiveWidth}
-            isExpanded={isLegendExpanded}
-            setIsExpanded={setIsLegendExpanded}
+          {/* if the data width is greater than the effective width, then show the scroll buttons */}
+          <ScrollButtonsHorizontal
+            dataWidth={dataWidth}
+            effectiveWidth={effectiveWidth}
+            canScrollLeft={canScrollLeft}
+            canScrollRight={canScrollRight}
+            isSideBarTooltipOpen={isSideBarTooltipOpen}
+            onScrollLeft={scrollLeft}
+            onScrollRight={scrollRight}
           />
-        )}
-      </div>
-    </SideBarTooltipProvider>
+          {legend && (
+            <DefaultLegend
+              items={legendItems}
+              yAxisLabel={yAxisLabel}
+              xAxisLabel={xAxisLabel}
+              containerWidth={effectiveWidth}
+              isExpanded={isLegendExpanded}
+              setIsExpanded={setIsLegendExpanded}
+            />
+          )}
+        </div>
+      </SideBarTooltipProvider>
+    </LabelTooltipProvider>
   );
 };
 
diff --git a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
index 5b1a0038b..b032162dc 100644
--- a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
+++ b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
@@ -15,6 +15,7 @@ import {
   XAxisTick,
   YAxisTick,
 } from "../shared";
+import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
@@ -302,107 +303,109 @@ export const LineChart = <T extends LineChartData>({
   ]);
 
   return (
-    <SideBarTooltipProvider
-      isSideBarTooltipOpen={isSideBarTooltipOpen}
-      setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
-      data={sideBarTooltipData}
-      setData={setSideBarTooltipData}
-    >
-      <div
-        className={clsx("crayon-line-chart-container", className)}
-        style={{
-          width: width ? `${width}px` : undefined,
-        }}
+    <LabelTooltipProvider>
+      <SideBarTooltipProvider
+        isSideBarTooltipOpen={isSideBarTooltipOpen}
+        setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
+        data={sideBarTooltipData}
+        setData={setSideBarTooltipData}
       >
-        <div className="crayon-line-chart-container-inner" ref={chartContainerRef}>
-          {/* Y-axis of the chart */}
-          {yAxis}
-          <div className="crayon-line-chart-main-container" ref={mainContainerRef}>
-            <ChartContainer
-              config={chartConfig}
-              style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
-              rechartsProps={{
-                width: "100%",
-                height: chartHeight,
-              }}
-            >
-              <RechartsLineChart
-                accessibilityLayer
-                key={`line-chart-${id}`}
-                data={data}
-                margin={{
-                  top: 20,
-                  bottom: 0,
+        <div
+          className={clsx("crayon-line-chart-container", className)}
+          style={{
+            width: width ? `${width}px` : undefined,
+          }}
+        >
+          <div className="crayon-line-chart-container-inner" ref={chartContainerRef}>
+            {/* Y-axis of the chart */}
+            {yAxis}
+            <div className="crayon-line-chart-main-container" ref={mainContainerRef}>
+              <ChartContainer
+                config={chartConfig}
+                style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
+                rechartsProps={{
+                  width: "100%",
+                  height: chartHeight,
                 }}
-                onClick={onLineClick}
               >
-                {grid && cartesianGrid()}
-                <XAxis
-                  dataKey={categoryKey as string}
-                  tickLine={false}
-                  axisLine={false}
-                  height={maxLabelHeight}
-                  textAnchor="middle"
-                  interval={0}
-                  tickFormatter={xAxisTickFormatter}
-                  tick={
-                    <XAxisTick
-                      variant={tickVariant}
-                      widthOfGroup={widthOfGroup}
-                      labelHeight={maxLabelHeight}
-                    />
-                  }
-                  orientation="bottom"
-                  padding={{
-                    left: X_AXIS_PADDING,
-                    right: X_AXIS_PADDING,
+                <RechartsLineChart
+                  accessibilityLayer
+                  key={`line-chart-${id}`}
+                  data={data}
+                  margin={{
+                    top: 20,
+                    bottom: 0,
                   }}
-                />
-
-                <ChartTooltip content={<CustomTooltipContent />} offset={15} />
-
-                {dataKeys.map((key) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  return (
-                    <Line
-                      key={`main-${key}`}
-                      dataKey={key}
-                      type={variant}
-                      stroke={color}
-                      strokeWidth={strokeWidth}
-                      dot={false}
-                      activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
-                      isAnimationActive={isAnimationActive}
-                    />
-                  );
-                })}
-              </RechartsLineChart>
-            </ChartContainer>
+                  onClick={onLineClick}
+                >
+                  {grid && cartesianGrid()}
+                  <XAxis
+                    dataKey={categoryKey as string}
+                    tickLine={false}
+                    axisLine={false}
+                    height={maxLabelHeight}
+                    textAnchor="middle"
+                    interval={0}
+                    tickFormatter={xAxisTickFormatter}
+                    tick={
+                      <XAxisTick
+                        variant={tickVariant}
+                        widthOfGroup={widthOfGroup}
+                        labelHeight={maxLabelHeight}
+                      />
+                    }
+                    orientation="bottom"
+                    padding={{
+                      left: X_AXIS_PADDING,
+                      right: X_AXIS_PADDING,
+                    }}
+                  />
+
+                  <ChartTooltip content={<CustomTooltipContent />} offset={15} />
+
+                  {dataKeys.map((key) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    return (
+                      <Line
+                        key={`main-${key}`}
+                        dataKey={key}
+                        type={variant}
+                        stroke={color}
+                        strokeWidth={strokeWidth}
+                        dot={false}
+                        activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
+                        isAnimationActive={isAnimationActive}
+                      />
+                    );
+                  })}
+                </RechartsLineChart>
+              </ChartContainer>
+            </div>
+            {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
           </div>
-          {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
-        </div>
-        {/* if the data width is greater than the effective width, then show the scroll buttons */}
-        <ScrollButtonsHorizontal
-          dataWidth={dataWidth}
-          effectiveWidth={effectiveWidth}
-          canScrollLeft={canScrollLeft}
-          canScrollRight={canScrollRight}
-          isSideBarTooltipOpen={isSideBarTooltipOpen}
-          onScrollLeft={scrollLeft}
-          onScrollRight={scrollRight}
-        />
-        {legend && (
-          <DefaultLegend
-            items={legendItems}
-            yAxisLabel={yAxisLabel}
-            xAxisLabel={xAxisLabel}
-            containerWidth={effectiveWidth}
-            isExpanded={isLegendExpanded}
-            setIsExpanded={setIsLegendExpanded}
+          {/* if the data width is greater than the effective width, then show the scroll buttons */}
+          <ScrollButtonsHorizontal
+            dataWidth={dataWidth}
+            effectiveWidth={effectiveWidth}
+            canScrollLeft={canScrollLeft}
+            canScrollRight={canScrollRight}
+            isSideBarTooltipOpen={isSideBarTooltipOpen}
+            onScrollLeft={scrollLeft}
+            onScrollRight={scrollRight}
           />
-        )}
-      </div>
-    </SideBarTooltipProvider>
+          {legend && (
+            <DefaultLegend
+              items={legendItems}
+              yAxisLabel={yAxisLabel}
+              xAxisLabel={xAxisLabel}
+              containerWidth={effectiveWidth}
+              isExpanded={isLegendExpanded}
+              setIsExpanded={setIsLegendExpanded}
+            />
+          )}
+        </div>
+      </SideBarTooltipProvider>
+    </LabelTooltipProvider>
   );
 };
diff --git a/js/packages/react-ui/src/components/Charts/charts.scss b/js/packages/react-ui/src/components/Charts/charts.scss
index d364fc021..9b991dd0e 100644
--- a/js/packages/react-ui/src/components/Charts/charts.scss
+++ b/js/packages/react-ui/src/components/Charts/charts.scss
@@ -28,6 +28,7 @@
 @forward "./shared/StackedLegend/stackedLegend.scss";
 @forward "./shared/YAxisTick/yAxisTick.scss";
 @forward "./shared/ScrollButtonsHorizontal/scrollButtonsHorizontal.scss";
+@forward "./shared/LabelTooltip/labelTooltip.scss";
 
 // portal tooltip css
 @forward "./shared/PortalTooltip/portalTooltip.scss";
diff --git a/js/packages/react-ui/src/components/Charts/hooks/useMaxLabelHeight.tsx b/js/packages/react-ui/src/components/Charts/hooks/useMaxLabelHeight.tsx
index ce719a78f..cc78f2d56 100644
--- a/js/packages/react-ui/src/components/Charts/hooks/useMaxLabelHeight.tsx
+++ b/js/packages/react-ui/src/components/Charts/hooks/useMaxLabelHeight.tsx
@@ -60,8 +60,6 @@ export const useMaxLabelHeight = (
 
   if (tickVariant === "multiLine") {
     return Math.max(maxLabelHeight + 13, DEFAULT_HEIGHT);
-  } else if (tickVariant === "angled") {
-    return Math.max(maxLabelHeight + 13, DEFAULT_HEIGHT);
   } else {
     return DEFAULT_HEIGHT;
   }
diff --git a/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/LabelTooltip.tsx b/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/LabelTooltip.tsx
new file mode 100644
index 000000000..3a8ce48bb
--- /dev/null
+++ b/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/LabelTooltip.tsx
@@ -0,0 +1,85 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React from "react";
+
+interface LabelTooltipProviderProps {
+  children: React.ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+}
+
+interface LabelTooltipProps {
+  children: React.ReactNode;
+  content: string;
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  delayDuration?: number;
+  className?: string;
+  disabled?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const DEFAULT_DELAY_DURATION = 300;
+const DEFAULT_SKIP_DELAY_DURATION = 300;
+const DEFAULT_DISABLE_HOVERABLE_CONTENT = false;
+
+const LabelTooltipProvider: React.FC<LabelTooltipProviderProps> = (props) => {
+  const {
+    children,
+    delayDuration = DEFAULT_DELAY_DURATION,
+    skipDelayDuration = DEFAULT_SKIP_DELAY_DURATION,
+    disableHoverableContent = DEFAULT_DISABLE_HOVERABLE_CONTENT,
+  } = props;
+
+  return (
+    <Tooltip.Provider
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+      disableHoverableContent={disableHoverableContent}
+    >
+      {children}
+    </Tooltip.Provider>
+  );
+};
+
+const LabelTooltip = React.forwardRef<HTMLDivElement, LabelTooltipProps>((props, ref) => {
+  const {
+    children,
+    content,
+    side = "top",
+    sideOffset = 1,
+    delayDuration = DEFAULT_DELAY_DURATION,
+    className = "crayon-chart-label-tooltip",
+    disabled = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+  } = props;
+
+  if (disabled) {
+    return children;
+  }
+
+  return (
+    <Tooltip.Root
+      delayDuration={delayDuration}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content ref={ref} className={className} side={side} sideOffset={sideOffset}>
+          {content}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+});
+
+LabelTooltip.displayName = "LabelTooltip";
+
+export { LabelTooltip, LabelTooltipProvider };
+export type { LabelTooltipProps, LabelTooltipProviderProps };
diff --git a/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/labelTooltip.scss b/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/labelTooltip.scss
new file mode 100644
index 000000000..ce5ca9420
--- /dev/null
+++ b/js/packages/react-ui/src/components/Charts/shared/LabelTooltip/labelTooltip.scss
@@ -0,0 +1,88 @@
+@use "../../../../cssUtils" as cssUtils;
+
+.crayon-chart-label-tooltip {
+  z-index: 1000;
+  border-radius: cssUtils.$rounded-s;
+  padding: cssUtils.$spacing-xs cssUtils.$spacing-s;
+  background-color: cssUtils.$bg-container;
+  border: 1px solid cssUtils.$stroke-default;
+  box-shadow: cssUtils.$shadow-s;
+  color: cssUtils.$primary-text;
+  @include cssUtils.typography(label, extra-small);
+  max-width: 200px;
+  word-wrap: break-word;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-out;
+  will-change: transform, opacity;
+}
+
+.crayon-chart-label-tooltip[data-state="delayed-open"],
+.crayon-chart-label-tooltip[data-state="instant-open"] {
+  animation-name: tooltipSlideUpAndFade;
+}
+
+.crayon-chart-label-tooltip[data-side="top"] {
+  animation-name: tooltipSlideDownAndFade;
+}
+
+.crayon-chart-label-tooltip[data-side="bottom"] {
+  animation-name: tooltipSlideUpAndFade;
+}
+
+.crayon-chart-label-tooltip[data-side="left"] {
+  animation-name: tooltipSlideRightAndFade;
+}
+
+.crayon-chart-label-tooltip[data-side="right"] {
+  animation-name: tooltipSlideLeftAndFade;
+}
+
+.crayon-chart-label-tooltip-arrow {
+  fill: cssUtils.$bg-container;
+  stroke: cssUtils.$stroke-default;
+  stroke-width: 1px;
+}
+
+@keyframes tooltipSlideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltipSlideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx b/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx
index f33785593..67e9d698d 100644
--- a/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx
+++ b/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx
@@ -1,5 +1,7 @@
-import React, { useRef } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { XAxisTickVariant } from "../../types";
+import { LabelTooltip } from "../LabelTooltip/LabelTooltip";
+
 interface XAxisTickProps {
   x?: number;
   y?: number;
@@ -43,6 +45,17 @@ const XAxisTick = React.forwardRef<SVGGElement, XAxisTickProps>((props, ref) =>
 
   const foreignObjectRef = useRef<SVGForeignObjectElement>(null);
   const spanRef = useRef<HTMLSpanElement>(null);
+  const [isMultiLineTruncated, setIsMultiLineTruncated] = useState(false);
+
+  // Check if multiLine text is truncated
+  useLayoutEffect(() => {
+    if (variant === "multiLine" && spanRef.current) {
+      const element = spanRef.current;
+      // Check if the text is clamped by comparing scrollHeight with clientHeight
+      const isTruncated = element.scrollHeight > element.clientHeight;
+      setIsMultiLineTruncated(isTruncated);
+    }
+  }, [value, variant, widthOfGroup]);
 
   if (x === undefined || y === undefined) {
     return null;
@@ -70,50 +83,35 @@ const XAxisTick = React.forwardRef<SVGGElement, XAxisTickProps>((props, ref) =>
               boxSizing: "border-box",
             }}
           >
-            <span
-              ref={spanRef}
-              style={{
-                textAlign: "center",
-                wordBreak: "break-word",
-              }}
-              className="crayon-chart-x-axis-tick-multi-line"
-              title={value}
-            >
-              {value}
-            </span>
+            <LabelTooltip content={value} side="top" disabled={!isMultiLineTruncated}>
+              <span
+                ref={spanRef}
+                style={{
+                  textAlign: "center",
+                  wordBreak: "break-word",
+                }}
+                className="crayon-chart-x-axis-tick-multi-line"
+              >
+                {value}
+              </span>
+            </LabelTooltip>
           </div>
         </foreignObject>
       </g>
     );
   }
 
-  if (variant === "angled") {
-    const displayValue = value;
-    return (
-      <g ref={ref} transform={`translate(${x},${y})`} className={className}>
-        <text
-          x={0}
-          y={0}
-          dy={10}
-          textAnchor="end"
-          transform="rotate(-10)"
-          className="crayon-chart-x-axis-tick"
-        >
-          <title>{value}</title>
-          {displayValue}
-        </text>
-      </g>
-    );
-  }
-
   const displayValue = tickFormatter ? tickFormatter(payload?.value) : value;
+  // Check if displayValue ends with dots (indicating truncation)
+  const isTruncated = displayValue.endsWith("...");
 
   return (
     <g ref={ref} transform={`translate(${x},${y})`} className={className}>
-      <text x={0} y={0} dy={12} textAnchor={"middle"} className="crayon-chart-x-axis-tick">
-        <title>{value}</title>
-        {displayValue}
-      </text>
+      <LabelTooltip content={value} side="top" disabled={!isTruncated}>
+        <text x={0} y={0} dy={12} textAnchor={"middle"} className="crayon-chart-x-axis-tick">
+          {displayValue}
+        </text>
+      </LabelTooltip>
     </g>
   );
 });
diff --git a/js/packages/react-ui/src/components/Charts/types/XAxisTicks.ts b/js/packages/react-ui/src/components/Charts/types/XAxisTicks.ts
index 03e2e1370..d7eb6822f 100644
--- a/js/packages/react-ui/src/components/Charts/types/XAxisTicks.ts
+++ b/js/packages/react-ui/src/components/Charts/types/XAxisTicks.ts
@@ -1 +1 @@
-export type XAxisTickVariant = "singleLine" | "multiLine" | "angled";
+export type XAxisTickVariant = "singleLine" | "multiLine";
diff --git a/js/pnpm-lock.yaml b/js/pnpm-lock.yaml
index 34977c713..090e95148 100644
--- a/js/pnpm-lock.yaml
+++ b/js/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       '@radix-ui/react-toggle-group':
         specifier: ^1.1.2
         version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.7
+        version: 1.2.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1309,6 +1312,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tooltip@1.2.7':
+    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -4898,6 +4914,26 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       react: 19.1.0