diff --git a/apps/business/src/components/DailyActivityChart.module.css b/apps/business/src/components/DailyActivityChart.module.css
index 42820e7..df9cbc9 100644
--- a/apps/business/src/components/DailyActivityChart.module.css
+++ b/apps/business/src/components/DailyActivityChart.module.css
@@ -8,6 +8,7 @@
   padding: 24px;
   height: 100%;
   box-sizing: border-box;
+  overflow: visible;
 }
 
 .header {
@@ -80,6 +81,8 @@
   gap: 8px;
   direction: ltr;
   unicode-bidi: isolate;
+  padding-top: 28px;
+  overflow: visible;
 }
 
 .yAxis {
@@ -106,11 +109,12 @@
   position: relative;
   flex: 1;
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .chartWrapScroll {
   overflow-x: auto;
+  overflow-y: visible;
 }
 
 .chartGrid {
@@ -184,6 +188,12 @@
   align-items: flex-end;
   justify-content: center;
   height: 100%;
+  z-index: 1;
+}
+
+.barWrap:hover,
+.barWrap:focus-within {
+  z-index: 1000;
 }
 
 .barWrap:hover .barTooltip,
@@ -208,16 +218,17 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s;
-  background: rgba(255, 255, 255, 0.96);
+  background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.12);
-  z-index: 4;
+  box-shadow: 0 6px 18px rgba(31, 38, 135, 0.18);
+  z-index: 10000;
 }
 
 .bar {
+  position: relative;
   flex: 1 1 0;
   width: 100%;
   max-width: 8px;
diff --git a/apps/business/src/components/DailyActivityChart.tsx b/apps/business/src/components/DailyActivityChart.tsx
index 62fad13..96906cd 100644
--- a/apps/business/src/components/DailyActivityChart.tsx
+++ b/apps/business/src/components/DailyActivityChart.tsx
@@ -257,8 +257,9 @@ export function DailyActivityChart({
                               style={{
                                 height: Math.max(primaryHeight, item.primary > 0 ? 4 : 0),
                               }}
-                            />
-                            <span className={styles.barTooltip}>{primaryTip}</span>
+                            >
+                              <span className={styles.barTooltip}>{primaryTip}</span>
+                            </div>
                           </div>
                           {showSecondary ? (
                             <div className={styles.barWrap}>
@@ -267,8 +268,9 @@ export function DailyActivityChart({
                                 style={{
                                   height: Math.max(secondaryHeight, item.secondary > 0 ? 4 : 0),
                                 }}
-                              />
-                              <span className={styles.barTooltip}>{secondaryTip}</span>
+                              >
+                                <span className={styles.barTooltip}>{secondaryTip}</span>
+                              </div>
                             </div>
                           ) : null}
                         </div>
@@ -307,8 +309,9 @@ export function DailyActivityChart({
                               style={{
                                 height: Math.max(primaryHeight, item.count > 0 ? 4 : 0),
                               }}
-                            />
-                            <span className={styles.barTooltip}>{primaryTip}</span>
+                            >
+                              <span className={styles.barTooltip}>{primaryTip}</span>
+                            </div>
                           </div>
                           {showSecondary ? (
                             <div className={styles.barWrap}>
@@ -317,8 +320,9 @@ export function DailyActivityChart({
                                 style={{
                                   height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
                                 }}
-                              />
-                              <span className={styles.barTooltip}>{secondaryTip}</span>
+                              >
+                                <span className={styles.barTooltip}>{secondaryTip}</span>
+                              </div>
                             </div>
                           ) : null}
                         </div>
diff --git a/apps/business/src/components/ProductActivityChart.module.css b/apps/business/src/components/ProductActivityChart.module.css
index cad8d3b..caf21df 100644
--- a/apps/business/src/components/ProductActivityChart.module.css
+++ b/apps/business/src/components/ProductActivityChart.module.css
@@ -6,6 +6,7 @@
   border-radius: var(--radius);
   box-shadow: var(--glass-shadow);
   padding: 24px;
+  overflow: visible;
 }
 
 .header {
@@ -78,6 +79,8 @@
   gap: 8px;
   direction: ltr;
   unicode-bidi: isolate;
+  padding-top: 28px;
+  overflow: visible;
 }
 
 .yAxis {
@@ -105,6 +108,7 @@
   flex: 1;
   min-width: 0;
   overflow-x: auto;
+  overflow-y: visible;
 }
 
 .chartGrid {
@@ -155,6 +159,12 @@
   display: flex;
   align-items: flex-end;
   height: 100%;
+  z-index: 1;
+}
+
+.barWrap:hover,
+.barWrap:focus-within {
+  z-index: 1000;
 }
 
 .barWrap:hover .barTooltip,
@@ -179,16 +189,17 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s;
-  background: rgba(255, 255, 255, 0.96);
+  background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.12);
-  z-index: 4;
+  box-shadow: 0 6px 18px rgba(31, 38, 135, 0.18);
+  z-index: 10000;
 }
 
 .bar {
+  position: relative;
   width: 12px;
   border-radius: 4px 4px 2px 2px;
   transition: height 0.3s ease;
diff --git a/apps/business/src/components/ProductActivityChart.tsx b/apps/business/src/components/ProductActivityChart.tsx
index 15e163f..c2ef2f9 100644
--- a/apps/business/src/components/ProductActivityChart.tsx
+++ b/apps/business/src/components/ProductActivityChart.tsx
@@ -145,15 +145,17 @@ export function ProductActivityChart() {
                         <div
                           className={`${styles.bar} ${styles.barAdded}`}
                           style={{ height: Math.max(addedHeight, item.added > 0 ? 4 : 0) }}
-                        />
-                        <span className={styles.barTooltip}>{addedTip}</span>
+                        >
+                          <span className={styles.barTooltip}>{addedTip}</span>
+                        </div>
                       </div>
                       <div className={styles.barWrap}>
                         <div
                           className={`${styles.bar} ${styles.barUpdated}`}
                           style={{ height: Math.max(updatedHeight, item.updated > 0 ? 4 : 0) }}
-                        />
-                        <span className={styles.barTooltip}>{updatedTip}</span>
+                        >
+                          <span className={styles.barTooltip}>{updatedTip}</span>
+                        </div>
                       </div>
                     </div>
                     <span className={styles.label} dir="ltr">