[charts] Pass all props to legend

docs/pages/x/api/charts/charts-legend.json

@@ -3,6 +3,18 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "direction": { "type": { "name": "enum", "description": "'column'<br>&#124;&nbsp;'row'" } },
     "hidden": { "type": { "name": "bool" }, "default": "false" },
+    "itemGap": { "type": { "name": "number" }, "default": "10" },
+    "itemMarkHeight": { "type": { "name": "number" }, "default": "20" },
+    "itemMarkWidth": { "type": { "name": "number" }, "default": "20" },
+    "labelStyle": { "type": { "name": "object" }, "default": "theme.typography.subtitle1" },
+    "markGap": { "type": { "name": "number" }, "default": "5" },
+    "padding": {
+      "type": {
+        "name": "union",
+        "description": "number<br>&#124;&nbsp;{ bottom?: number, left?: number, right?: number, top?: number }"
+      },
+      "default": "10"
+    },
     "position": {
       "type": {
         "name": "shape",

docs/pages/x/api/charts/default-charts-legend.json

@@ -33,22 +33,40 @@
     "import { DefaultChartsLegend } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "column",
+      "className": "MuiDefaultChartsLegend-column",
+      "description": "Styles applied to the legend with column layout.",
+      "isGlobal": false
+    },
+    {
+      "key": "label",
+      "className": "MuiDefaultChartsLegend-label",
+      "description": "Styles applied to the series label.",
+      "isGlobal": false
+    },
     {
       "key": "mark",
       "className": "MuiDefaultChartsLegend-mark",
-      "description": "",
+      "description": "Styles applied to series mark element.",
       "isGlobal": false
     },
     {
       "key": "root",
       "className": "MuiDefaultChartsLegend-root",
-      "description": "",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "row",
+      "className": "MuiDefaultChartsLegend-row",
+      "description": "Styles applied to the legend with row layout.",
       "isGlobal": false
     },
     {
       "key": "series",
       "className": "MuiDefaultChartsLegend-series",
-      "description": "",
+      "description": "Styles applied to a series element.",
       "isGlobal": false
     }
   ],

docs/pages/x/api/charts/pie-chart.json

@@ -39,7 +39,7 @@
     "legend": {
       "type": {
         "name": "shape",
-        "description": "{ classes?: object, direction?: 'column'<br>&#124;&nbsp;'row', hidden?: bool, position?: { horizontal: 'left'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'top' }, slotProps?: object, slots?: object }"
+        "description": "{ classes?: object, direction?: 'column'<br>&#124;&nbsp;'row', hidden?: bool, itemGap?: number, itemMarkHeight?: number, itemMarkWidth?: number, labelStyle?: object, markGap?: number, padding?: number<br>&#124;&nbsp;{ bottom?: number, left?: number, right?: number, top?: number }, position?: { horizontal: 'left'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'top' }, slotProps?: object, slots?: object }"
       },
       "default": "{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }",
       "deprecated": true,

docs/pages/x/api/charts/piecewise-color-legend.json

@@ -20,7 +20,6 @@
       "default": "The first axis item."
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "hidden": { "type": { "name": "bool" }, "default": "false" },
     "hideFirst": { "type": { "name": "bool" }, "default": "false" },
     "hideLast": { "type": { "name": "bool" }, "default": "false" },
     "itemGap": { "type": { "name": "number" }, "default": "10" },
@@ -51,22 +50,40 @@
     "import { PiecewiseColorLegend } from '@mui/x-charts-pro';"
   ],
   "classes": [
+    {
+      "key": "column",
+      "className": "MuiPiecewiseColorLegend-column",
+      "description": "Styles applied to the legend with column layout.",
+      "isGlobal": false
+    },
+    {
+      "key": "label",
+      "className": "MuiPiecewiseColorLegend-label",
+      "description": "Styles applied to the series label.",
+      "isGlobal": false
+    },
     {
       "key": "mark",
       "className": "MuiPiecewiseColorLegend-mark",
-      "description": "",
+      "description": "Styles applied to series mark element.",
       "isGlobal": false
     },
     {
       "key": "root",
       "className": "MuiPiecewiseColorLegend-root",
-      "description": "",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "row",
+      "className": "MuiPiecewiseColorLegend-row",
+      "description": "Styles applied to the legend with row layout.",
       "isGlobal": false
     },
     {
       "key": "series",
       "className": "MuiPiecewiseColorLegend-series",
-      "description": "",
+      "description": "Styles applied to a series element.",
       "isGlobal": false
     }
   ],

docs/translations/api-docs/charts/charts-legend/charts-legend.json

@@ -6,6 +6,14 @@
       "description": "The direction of the legend layout. The default depends on the chart."
     },
     "hidden": { "description": "Set to true to hide the legend." },
+    "itemGap": { "description": "Space between two legend items (in px)." },
+    "itemMarkHeight": { "description": "Height of the item mark (in px)." },
+    "itemMarkWidth": { "description": "Width of the item mark (in px)." },
+    "labelStyle": { "description": "Style applied to legend labels." },
+    "markGap": { "description": "Space between the mark and the label (in px)." },
+    "padding": {
+      "description": "Legend padding (in px). Can either be a single number, or an object with top, left, bottom, right properties."
+    },
     "position": { "description": "The position of the legend." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." }

docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json

@@ -17,8 +17,17 @@
     "position": { "description": "The position of the legend." }
   },
   "classDescriptions": {
-    "mark": { "description": "" },
-    "root": { "description": "" },
-    "series": { "description": "" }
+    "column": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with column layout"
+    },
+    "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the series label" },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "series mark element" },
+    "root": { "description": "Styles applied to the root element." },
+    "row": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with row layout"
+    },
+    "series": { "description": "Styles applied to {{nodeName}}.", "nodeName": "a series element" }
   }
 }

docs/translations/api-docs/charts/piecewise-color-legend/piecewise-color-legend.json

@@ -11,7 +11,6 @@
     "direction": {
       "description": "The direction of the legend layout. The default depends on the chart."
     },
-    "hidden": { "description": "Set to true to hide the legend." },
     "hideFirst": {
       "description": "Hide the first item of the legend, corresponding to the [-infinity, min] piece."
     },
@@ -36,8 +35,17 @@
     "position": { "description": "The position of the legend." }
   },
   "classDescriptions": {
-    "mark": { "description": "" },
-    "root": { "description": "" },
-    "series": { "description": "" }
+    "column": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with column layout"
+    },
+    "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the series label" },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "series mark element" },
+    "root": { "description": "Styles applied to the root element." },
+    "row": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with row layout"
+    },
+    "series": { "description": "Styles applied to {{nodeName}}.", "nodeName": "a series element" }
   }
 }

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

@@ -165,6 +165,20 @@ BarChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number,
+        top: PropTypes.number,
+      }),
+    ]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,

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

@@ -176,6 +176,20 @@ LineChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number,
+        top: PropTypes.number,
+      }),
+    ]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,

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

@@ -147,6 +147,20 @@ ScatterChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number,
+        top: PropTypes.number,
+      }),
+    ]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,

packages/x-charts/src/BarChart/BarChart.tsx

@@ -232,6 +232,20 @@ BarChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number,
+        top: PropTypes.number,
+      }),
+    ]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired,

packages/x-charts/src/ChartsLegend/ChartsLegend.tsx

@@ -4,35 +4,32 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { getSeriesToDisplay } from './utils';
-import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses';
+import { getLegendUtilityClass } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
 import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend';
 import { useDrawingArea } from '../hooks';
 import { useSeries } from '../hooks/useSeries';
 import { LegendPlacement } from './legend.types';
 
+export type ChartsLegendPropsBase = Omit<
+  LegendRendererProps,
+  keyof LegendPlacement | 'series' | 'seriesToDisplay' | 'drawingArea'
+> &
+  LegendPlacement;
+
 export interface ChartsLegendSlots {
   /**
    * Custom rendering of the legend.
    * @default DefaultChartsLegend
    */
-  legend?: React.JSXElementConstructor<LegendRendererProps>;
+  legend?: React.JSXElementConstructor<ChartsLegendPropsBase>;
 }
 
 export interface ChartsLegendSlotProps {
-  legend?: Partial<LegendRendererProps>;
+  legend?: Partial<ChartsLegendPropsBase>;
 }
 
-export interface ChartsLegendProps extends LegendPlacement {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsLegendClasses>;
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden?: boolean;
+export interface ChartsLegendProps extends ChartsLegendPropsBase {
   /**
    * Overridable component slots.
    * @default {}
@@ -70,7 +67,7 @@ function ChartsLegend(inProps: ChartsLegendProps) {
     ...props,
     position: { horizontal: 'middle', vertical: 'top', ...props.position },
   };
-  const { position, direction, hidden, slots, slotProps } = defaultizedProps;
+  const { slots, slotProps, ...other } = defaultizedProps;
 
   const theme = useTheme();
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
@@ -85,12 +82,10 @@ function ChartsLegend(inProps: ChartsLegendProps) {
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
     additionalProps: {
-      position,
-      direction,
+      ...other,
       classes,
       drawingArea,
       series,
-      hidden,
       seriesToDisplay,
     },
     ownerState: {},
@@ -118,6 +113,45 @@ ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number,
+    }),
+  ]),
   /**
    * The position of the legend.
    */