fix: Tooltip Overlapping Charts due to a low z-index

src/components/chart-elements/BarChart/BarChart.tsx

@@ -328,7 +328,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
               </YAxis>
             )}
             <Tooltip
-              wrapperStyle={{ outline: "none" }}
+              wrapperStyle={{ outline: "none", zIndex: 100 }}
               isAnimationActive={false}
               cursor={{ fill: "#d1d5db", opacity: "0.15" }}
               content={

src/stories/chart-elements/BarChart.stories.tsx

@@ -11,6 +11,7 @@ import {
   longBaseChartData,
   longIndexBaseChartData,
   simpleBaseChartWithNegativeValues,
+  longDataName,
 } from "./helpers/testData";
 
 const meta: Meta<typeof BarChart> = {
@@ -387,3 +388,38 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export function LongTooltip() {
+  return (
+    <>
+      <div className="grid grid-cols-2">
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+        <div className="flex flex-wrap">
+          <BarChart
+            className="mt-6"
+            data={longDataName}
+            index="name"
+            categories={[
+              'Group A',
+              'Group B',
+              'Group C',
+            ]}
+            colors={['blue', 'teal', 'amber']}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/stories/chart-elements/helpers/testData.tsx

@@ -1751,3 +1751,12 @@ export const singleAndMultipleData = [
     Sales: 3612,
   },
 ];
+
+export const longDataName = [
+  {
+    name: 'Very very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Topic 1',
+    'Group A': 890,
+    'Group B': 338,
+    'Group C': 538,
+  },
+];