Use border instead of solid background. Address PR feedback.

mui · Feb 6, 2025 · 37e3915 · 37e3915
1 parent ba726d6
commit 37e3915
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/docs/data/charts/components/SeriesDemo.js b/docs/data/charts/components/SeriesDemo.js
@@ -76,14 +76,12 @@ function PointLabel({ x, y, placement, color }) {
         left,
         top,
         translate: '-50% -50%',
-        background: color,
+        border: `2px solid ${color}`,
         borderRadius: 1,
         px: 1,
       }}
     >
-      <Typography variant="caption" sx={{ mixBlendMode: 'difference' }}>
-        {y}
-      </Typography>
+      <Typography variant="caption">{y}</Typography>
     </Box>
   );
 }

diff --git a/docs/data/charts/components/SeriesDemo.tsx b/docs/data/charts/components/SeriesDemo.tsx
@@ -91,14 +91,12 @@ function PointLabel({
         left,
         top,
         translate: '-50% -50%',
-        background: color,
+        border: `2px solid ${color}`,
         borderRadius: 1,
         px: 1,
       }}
     >
-      <Typography variant="caption" sx={{ mixBlendMode: 'difference' }}>
-        {y}
-      </Typography>
+      <Typography variant="caption">{y}</Typography>
     </Box>
   );
 }

diff --git a/docs/data/charts/components/components.md b/docs/data/charts/components/components.md
@@ -82,8 +82,8 @@ By using `invert`, the value associated with the current mouse coordinate `y` ca
 Information about series is accessible through the `useSeries` and `use*Series` hooks.
 These hooks return the order of the series and their configuration, including data points, color, among others.
 
-You can leverage that information to create custom charts. For example, you can use `useLineSeries` to obtain the series of
-a line chart and display an indicator of the minimum and maximum values of each series:
+You can leverage that information to create custom charts.
+For example, you can use `useLineSeries` to obtain the series of a line chart and display an indicator of the minimum and maximum values of each series:
 
 {{"demo": "SeriesDemo.js"}}