From 5753ea31bc2bbe7d3648d7331e649a6a5ff97ade Mon Sep 17 00:00:00 2001
From: alex <alex.fauquette@gmail.com>
Date: Wed, 21 Aug 2024 15:53:12 +0200
Subject: [PATCH] [charts] Fix grid overflow with zooming

---
 packages/x-charts/src/ChartsGrid/ChartsGrid.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
index c150244b2d39b..19b880e70ed09 100644
--- a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
+++ b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -10,6 +10,7 @@ import {
   getChartsGridUtilityClass,
   chartsGridClasses,
 } from './chartsGridClasses';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
@@ -68,6 +69,7 @@ export interface ChartsGridProps {
 function ChartsGrid(props: ChartsGridProps) {
   const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' });
 
+  const drawingArea = useDrawingArea();
   const { vertical, horizontal, ...other } = themeProps;
   const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
@@ -97,8 +99,8 @@ function ChartsGrid(props: ChartsGridProps) {
         xTicks.map(({ formattedValue, offset }) => (
           <GridLine
             key={`vertical-${formattedValue}`}
-            y1={yScale.range()[0]}
-            y2={yScale.range()[1]}
+            y1={drawingArea.top}
+            y2={drawingArea.top + drawingArea.height}
             x1={offset}
             x2={offset}
             className={classes.verticalLine}
@@ -110,8 +112,8 @@ function ChartsGrid(props: ChartsGridProps) {
             key={`horizontal-${formattedValue}`}
             y1={offset}
             y2={offset}
-            x1={xScale.range()[0]}
-            x2={xScale.range()[1]}
+            x1={drawingArea.left}
+            x2={drawingArea.left + drawingArea.width}
             className={classes.horizontalLine}
           />
         ))}