update demos

mui · Jul 16, 2024 · ae18c60 · ae18c60
1 parent 26b7874
commit ae18c60
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/docs/data/charts/legend/BasicColorLegend.js b/docs/data/charts/legend/BasicColorLegend.js
@@ -34,7 +34,14 @@ export default function BasicColorLegend() {
             },
           },
         ]}
-        yAxis={[{ disableLine: true, valueFormatter: (value) => `${value}°` }]}
+        yAxis={[
+          {
+            disableLine: true,
+            disableTicks: true,
+            valueFormatter: (value) => `${value}°`,
+          },
+        ]}
+        grid={{ horizontal: true }}
         height={300}
         margin={{ top: 30, right: 150 }}
         slotProps={{ legend: { hidden: true } }}

diff --git a/docs/data/charts/legend/BasicColorLegend.tsx b/docs/data/charts/legend/BasicColorLegend.tsx
@@ -34,7 +34,14 @@ export default function BasicColorLegend() {
             },
           },
         ]}
-        yAxis={[{ disableLine: true, valueFormatter: (value) => `${value}°` }]}
+        yAxis={[
+          {
+            disableLine: true,
+            disableTicks: true,
+            valueFormatter: (value) => `${value}°`,
+          },
+        ]}
+        grid={{ horizontal: true }}
         height={300}
         margin={{ top: 30, right: 150 }}
         slotProps={{ legend: { hidden: true } }}

diff --git a/docs/data/charts/legend/ContinuousInteractiveDemoNoSnap.js b/docs/data/charts/legend/ContinuousInteractiveDemoNoSnap.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { interpolateRdYlBu } from 'd3-scale-chromatic';
 import { LineChart } from '@mui/x-charts/LineChart';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
 import { dataset } from './tempAnomaly';
 
@@ -67,6 +68,7 @@ export default function ContinuousInteractiveDemoNoSnap() {
             yAxis={[
               {
                 disableLine: true,
+                disableTicks: true,
                 valueFormatter: (value) => `${value}°`,
                 colorMap: {
                   type: 'continuous',
@@ -76,13 +78,15 @@ export default function ContinuousInteractiveDemoNoSnap() {
                 },
               },
             ]}
+            grid={{ horizontal: true }}
             height={300}
             margin={{
               top: props.direction === 'row' ? 50 : 20,
               right: props.direction === 'row' ? 20 : 50,
             }}
             slotProps={{ legend: { hidden: true } }}
           >
+            <ChartsReferenceLine y={0} />
             <ContinuousColorLegend
               axisDirection="y"
               position={

diff --git a/docs/data/charts/legend/PiecewiseInteractiveDemoNoSnap.js b/docs/data/charts/legend/PiecewiseInteractiveDemoNoSnap.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { dataset } from './tempAnomaly';
 
 export default function PiecewiseInteractiveDemoNoSnap() {
@@ -57,14 +58,22 @@ export default function PiecewiseInteractiveDemoNoSnap() {
                 },
               },
             ]}
-            yAxis={[{ disableLine: true, valueFormatter: (value) => `${value}°` }]}
+            yAxis={[
+              {
+                disableLine: true,
+                disableTicks: true,
+                valueFormatter: (value) => `${value}°`,
+              },
+            ]}
+            grid={{ horizontal: true }}
             height={300}
             margin={{
               top: props.direction === 'row' ? 50 : 20,
               right: props.direction === 'row' ? 20 : 150,
             }}
             slotProps={{ legend: { hidden: true } }}
           >
+            <ChartsReferenceLine y={0} />
             <PiecewiseColorLegend
               axisDirection="x"
               position={

diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md
@@ -62,7 +62,10 @@ Which can lead to label overflow.
 
 ## Color legend
 
-To display legend associated to a [colorMap](https://mui.com/x/react-charts/styling/#values-color), use the `<ContinuousColorLegend />` `'continuous'` color mapping or the `<PiecewiseColorLegend />` for color mapping of type `'piecewise'`.
+To display legend associated to a [colorMap](https://mui.com/x/react-charts/styling/#values-color), you can use:
+
+- `<ContinuousColorLegend />` if you're using `colorMap.type='continuous'`
+- `<PiecewiseColorLegend />` if you're using `colorMap.type='piecewise'`.
 
 ### Select data
 
@@ -95,7 +98,7 @@ The labels and gradient bar alignment can be modified by the `align` prop.
 The piecewise Legend is quite similar to the series legend.
 It accepts the same props for [customization](#dimensions).
 
-The props `hideFirst` and `hideLast` allows to hide the two extreme pieces: -infinit to min, and max to +infinit.
+The props `hideFirst` and `hideLast` allows to hide the two extreme pieces: values lower than the min threshold, and value hight than the max threshold.
 
 To override labels generated by default, provide a `labelFormatter` prop.
 It takes the min/max of the piece and returns the label.