feedback

Author: alexfauquette

docs/data/charts/heatmap/HeatmapLegend.tsx

@@ -15,7 +15,8 @@ export default function HeatmapLegend() {
         slotProps={{
           legend: {
             direction: 'vertical',
-            sx: { alignSelf: 'stretch', maxHeight: 200 },
+            position: { vertical: 'middle' },
+            sx: { height: 200 },
           },
         }}
       />

docs/data/charts/heatmap/heatmap.md

@@ -81,7 +81,7 @@ import { HeatmapTooltip, HeatmapTooltipContent } from '@mui/x-charts/Heatmap',
 
 ### Legend
 
-The Heatmap comes with a legend which is by default the [ContinuouseColorLegend](/x/react-charts/legend/#color-legend).
+The Heatmap comes with a legend which is by default the [ContinuousColorLegend](/x/react-charts/legend/#color-legend).
 
 To display it set `hideLegend` to `false`.
 You can modify it with `slots.legend` and `slotProps.legend`.

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -231,9 +231,9 @@ const Heatmap = React.forwardRef(function Heatmap(
       <ChartsWrapper {...chartsWrapperProps}>
         {!hideLegend && (
           <ChartsLegend
-            slots={{ legend: slots?.legend ?? ContinuousColorLegend }}
+            slots={{ ...slots, legend: slots?.legend ?? ContinuousColorLegend }}
             slotProps={{ legend: { labelPosition: 'extremes', ...slotProps?.legend } }}
-            sx={{ alignSelf: 'stretch' }}
+            sx={slotProps?.legend?.direction === 'vertical' ? { height: 150 } : { width: '50%' }}
           />
         )}
         <ChartsSurface ref={ref} sx={sx}>