[charts] Fix grid overflow with zooming

mui · Aug 21, 2024 · 5753ea3 · 5753ea3
1 parent 15e0171
commit 5753ea3
Showing 1 changed file with 6 additions and 4 deletions.
diff --git 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}
           />
         ))}