[charts] Fix text position in Safari (#10815)

Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
mui · Oct 26, 2023 · 2cbc8df · 2cbc8df
1 parent 2993154
commit 2cbc8df
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/x-charts/src/internals/components/ChartsText.tsx b/packages/x-charts/src/internals/components/ChartsText.tsx
@@ -93,7 +93,12 @@ export function ChartsText(props: ChartsTextProps) {
       style={style}
     >
       {wordsByLines.map((line, index) => (
-        <tspan x={x} dy={`${index === 0 ? startDy : wordsByLines[0].height}px`} key={index}>
+        <tspan
+          x={x}
+          dy={`${index === 0 ? startDy : wordsByLines[0].height}px`}
+          dominantBaseline={dominantBaseline} // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+          key={index}
+        >
           {line.text}
         </tspan>
       ))}