@mui/x-charts 7.9.0 → 7.11.0

package/ChartContainer/useDefaultizeAxis.d.ts

@@ -0,0 +1,36 @@
+import { MakeOptional } from '../models/helpers';
+import { AxisConfig, ScaleName } from '../models';
+import { ChartsAxisProps } from '../models/axis';
+export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined) => {
+    reverse?: boolean;
+    fill?: string;
+    stroke?: string;
+    data?: any[] | undefined;
+    label?: string;
+    max?: number | Date;
+    min?: number | Date;
+    classes?: Partial<import("..").ChartsAxisClasses>;
+    slots?: Partial<import("../models/axis").ChartsAxisSlots>;
+    slotProps?: Partial<import("../models/axis").ChartsAxisSlotProps>;
+    dataKey?: string;
+    valueFormatter?: ((value: any, context: import("../models/axis").AxisValueFormatterContext) => string) | undefined;
+    colorMap?: import("../models/colorMapping").ContinuousColorConfig<number | Date> | import("../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
+    tickMaxStep?: number;
+    tickMinStep?: number;
+    tickNumber?: number;
+    tickPlacement?: "start" | "end" | "middle" | "extremities";
+    tickLabelPlacement?: "middle" | "tick";
+    scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
+    axisId?: import("../models/axis").AxisId;
+    disableLine?: boolean;
+    disableTicks?: boolean;
+    tickFontSize?: number;
+    tickLabelStyle?: import("..").ChartsTextProps["style"];
+    labelStyle?: import("..").ChartsTextProps["style"];
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean);
+    labelFontSize?: number;
+    tickSize?: number;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[];
+    hideTooltip?: boolean;
+    id: import("../models/axis").AxisId;
+}[][];

package/ChartContainer/useDefaultizeAxis.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDefaultizeAxis = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};
+const useDefaultizeAxis = (inXAxis, inYAxis) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+  return [xAxis, yAxis];
+};
+exports.useDefaultizeAxis = useDefaultizeAxis;

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AnchorPosition, Direction } from './utils';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { LegendRendererProps } from './DefaultChartsLegend';
+import { LegendPlacement } from './legend.types';
 export interface ChartsLegendSlots {
     /**
      * Custom rendering of the legend.
@@ -12,11 +12,7 @@ export interface ChartsLegendSlots {
 export interface ChartsLegendSlotProps {
     legend?: Partial<LegendRendererProps>;
 }
-export type ChartsLegendProps = {
-    /**
-     * The position of the legend.
-     */
-    position?: AnchorPosition;
+export interface ChartsLegendProps extends LegendPlacement {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -26,11 +22,6 @@ export type ChartsLegendProps = {
      * @default false
      */
     hidden?: boolean;
-    /**
-     * The direction of the legend layout.
-     * The default depends on the chart.
-     */
-    direction?: Direction;
     /**
      * Overridable component slots.
      * @default {}
@@ -41,7 +32,7 @@ export type ChartsLegendProps = {
      * @default {}
      */
     slotProps?: ChartsLegendSlotProps;
-};
+}
 declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 declare namespace ChartsLegend {
     var propTypes: any;

package/ChartsLegend/ContinuousColorLegend.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ContinuousScaleName } from '../models/axis';
+import { ChartsTextProps } from '../ChartsText';
+import { ColorLegendSelector, LegendPlacement } from './legend.types';
+type LabelFormatter = (params: {
+    value: number | Date;
+    formattedValue: string;
+}) => string;
+export interface ContinuousColorLegendProps extends LegendPlacement, ColorLegendSelector {
+    /**
+     * The label to display at the minimum side of the gradient.
+     * Can either be a string, or a function.
+     * @default ({ formattedValue }) => formattedValue
+     */
+    minLabel?: string | LabelFormatter;
+    /**
+     * The label to display at the maximum side of the gradient.
+     * Can either be a string, or a function.
+     * If not defined, the formatted maximal value is display.
+     * @default ({ formattedValue }) => formattedValue
+     */
+    maxLabel?: string | LabelFormatter;
+    /**
+     * A unique identifier for the gradient.
+     * @default auto-generated id
+     */
+    id?: string;
+    /**
+     * The scale used to display gradient colors.
+     * @default 'linear'
+     */
+    scaleType?: ContinuousScaleName;
+    /**
+     * The length of the gradient bar.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the length of the svg.
+     * @default '50%'
+     */
+    length?: number | string;
+    /**
+     * The thickness of the gradient bar.
+     * @default 5
+     */
+    thickness?: number;
+    /**
+     * The alignment of the texts with the gradient bar.
+     * @default 'middle'
+     */
+    align?: 'start' | 'middle' | 'end';
+    /**
+     * The space between the gradient bar and the labels.
+     * @default 4
+     */
+    spacing?: number;
+    /**
+     * The style applied to labels.
+     * @default theme.typography.subtitle1
+     */
+    labelStyle?: ChartsTextProps['style'];
+}
+declare function ContinuousColorLegend(props: ContinuousColorLegendProps): React.JSX.Element | null;
+declare namespace ContinuousColorLegend {
+    var propTypes: any;
+}
+export { ContinuousColorLegend };

package/ChartsLegend/ContinuousColorLegend.js

@@ -0,0 +1,398 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContinuousColorLegend = ContinuousColorLegend;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _ChartsContinuousGradient = _interopRequireDefault(require("../internals/components/ChartsAxesGradients/ChartsContinuousGradient"));
+var _hooks = require("../hooks");
+var _getScale = require("../internals/getScale");
+var _getPercentageValue = require("../internals/getPercentageValue");
+var _ChartsText = require("../ChartsText");
+var _domUtils = require("../internals/domUtils");
+var _useAxis = require("./useAxis");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getPositionOffset(position, legendBox, svgBox) {
+  let offsetX = 0;
+  let offsetY = 0;
+  switch (position.horizontal) {
+    case 'left':
+      offsetX = 0;
+      break;
+    case 'middle':
+      offsetX = (svgBox.width - legendBox.width) / 2;
+      break;
+    case 'right':
+    default:
+      offsetX = svgBox.width - legendBox.width;
+      break;
+  }
+  switch (position.vertical) {
+    case 'top':
+      offsetY = 0;
+      break;
+    case 'middle':
+      offsetY = (svgBox.height - legendBox.height) / 2;
+      break;
+    case 'bottom':
+    default:
+      offsetY = svgBox.height - legendBox.height;
+      break;
+  }
+  return {
+    offsetX,
+    offsetY
+  };
+}
+
+/**
+ * Takes placement parameters and element bounding boxes.
+ * Returns the x, y coordinates of the elements. And the textAnchor, dominantBaseline for texts.
+ */
+function getElementPositions(text1Box, barBox, text2Box, params) {
+  if (params.direction === 'column') {
+    const text1 = {
+      y: text1Box.height,
+      dominantBaseline: 'auto'
+    };
+    const text2 = {
+      y: text1Box.height + 2 * params.spacing + barBox.height,
+      dominantBaseline: 'hanging'
+    };
+    const bar = {
+      y: text1Box.height + params.spacing
+    };
+    const totalWidth = Math.max(text1Box.width, barBox.width, text2Box.width);
+    const totalHeight = text1Box.height + barBox.height + text2Box.height + 2 * params.spacing;
+    const boundingBox = {
+      width: totalWidth,
+      height: totalHeight
+    };
+    switch (params.align) {
+      case 'start':
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            textAnchor: 'start',
+            x: 0
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            textAnchor: 'start',
+            x: 0
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            x: 0
+          }),
+          boundingBox
+        };
+      case 'end':
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            textAnchor: 'end',
+            x: totalWidth
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            textAnchor: 'end',
+            x: totalWidth
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            x: totalWidth - barBox.width
+          }),
+          boundingBox
+        };
+      case 'middle':
+      default:
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            textAnchor: 'middle',
+            x: totalWidth / 2
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            textAnchor: 'middle',
+            x: totalWidth / 2
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            x: totalWidth / 2 - barBox.width / 2
+          }),
+          boundingBox
+        };
+    }
+  } else {
+    const text1 = {
+      x: text1Box.width,
+      textAnchor: 'end'
+    };
+    const text2 = {
+      x: text1Box.width + 2 * params.spacing + barBox.width,
+      textAnchor: 'start'
+    };
+    const bar = {
+      x: text1Box.width + params.spacing
+    };
+    const totalHeight = Math.max(text1Box.height, barBox.height, text2Box.height);
+    const totalWidth = text1Box.width + barBox.width + text2Box.width + 2 * params.spacing;
+    const boundingBox = {
+      width: totalWidth,
+      height: totalHeight
+    };
+    switch (params.align) {
+      case 'start':
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            dominantBaseline: 'hanging',
+            y: 0
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            dominantBaseline: 'hanging',
+            y: 0
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            y: 0
+          }),
+          boundingBox
+        };
+      case 'end':
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            dominantBaseline: 'auto',
+            y: totalHeight
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            dominantBaseline: 'auto',
+            y: totalHeight
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            y: totalHeight - barBox.height
+          }),
+          boundingBox
+        };
+      case 'middle':
+      default:
+        return {
+          text1: (0, _extends2.default)({}, text1, {
+            dominantBaseline: 'central',
+            y: totalHeight / 2
+          }),
+          text2: (0, _extends2.default)({}, text2, {
+            dominantBaseline: 'central',
+            y: totalHeight / 2
+          }),
+          bar: (0, _extends2.default)({}, bar, {
+            y: totalHeight / 2 - barBox.height / 2
+          }),
+          boundingBox
+        };
+    }
+  }
+}
+const defaultLabelFormatter = ({
+  formattedValue
+}) => formattedValue;
+function ContinuousColorLegend(props) {
+  const theme = (0, _styles.useTheme)();
+  const {
+    id: idProp,
+    minLabel = defaultLabelFormatter,
+    maxLabel = defaultLabelFormatter,
+    scaleType = 'linear',
+    direction,
+    length = '50%',
+    thickness = 5,
+    spacing = 4,
+    align = 'middle',
+    labelStyle = theme.typography.subtitle1,
+    position,
+    axisDirection,
+    axisId
+  } = props;
+  const chartId = (0, _hooks.useChartId)();
+  const id = idProp ?? `gradient-legend-${chartId}`;
+  const isRTL = theme.direction === 'rtl';
+  const axisItem = (0, _useAxis.useAxis)({
+    axisDirection,
+    axisId
+  });
+  const {
+    width,
+    height,
+    left,
+    right,
+    top,
+    bottom
+  } = (0, _hooks.useDrawingArea)();
+  const refLength = direction === 'column' ? height + top + bottom : width + left + right;
+  const size = (0, _getPercentageValue.getPercentageValue)(length, refLength);
+  const isReversed = direction === 'column';
+  const colorMap = axisItem?.colorMap;
+  if (!colorMap || !colorMap.type || colorMap.type !== 'continuous') {
+    return null;
+  }
+
+  // Define the coordinate to color mapping
+
+  const colorScale = axisItem.colorScale;
+  const minValue = colorMap.min ?? 0;
+  const maxValue = colorMap.max ?? 100;
+  const scale = (0, _getScale.getScale)(scaleType, [minValue, maxValue], isReversed ? [size, 0] : [0, size]);
+
+  // Get texts to display
+
+  const formattedMin = axisItem.valueFormatter?.(minValue, {
+    location: 'legend'
+  }) ?? minValue.toLocaleString();
+  const formattedMax = axisItem.valueFormatter?.(maxValue, {
+    location: 'legend'
+  }) ?? maxValue.toLocaleString();
+  const minText = typeof minLabel === 'string' ? minLabel : minLabel({
+    value: minValue ?? 0,
+    formattedValue: formattedMin
+  });
+  const maxText = typeof maxLabel === 'string' ? maxLabel : maxLabel({
+    value: maxValue ?? 0,
+    formattedValue: formattedMax
+  });
+  const text1 = isReversed ? maxText : minText;
+  const text2 = isReversed ? minText : maxText;
+  const text1Box = (0, _domUtils.getStringSize)(text1, (0, _extends2.default)({}, labelStyle));
+  const text2Box = (0, _domUtils.getStringSize)(text2, (0, _extends2.default)({}, labelStyle));
+
+  // Place bar and texts
+
+  const barBox = direction === 'column' || isRTL && direction === 'row' ? {
+    width: thickness,
+    height: size
+  } : {
+    width: size,
+    height: thickness
+  };
+  const legendPositions = getElementPositions(text1Box, barBox, text2Box, {
+    spacing,
+    align,
+    direction
+  });
+  const svgBoundingBox = {
+    width: width + left + right,
+    height: height + top + bottom
+  };
+  const positionOffset = getPositionOffset((0, _extends2.default)({
+    horizontal: 'middle',
+    vertical: 'top'
+  }, position), legendPositions.boundingBox, svgBoundingBox);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+      isReversed: isReversed,
+      gradientId: id,
+      size: size,
+      direction: direction === 'row' ? 'x' : 'y',
+      scale: scale,
+      colorScale: colorScale,
+      colorMap: colorMap,
+      gradientUnits: "objectBoundingBox"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
+      text: text1,
+      x: positionOffset.offsetX + legendPositions.text1.x,
+      y: positionOffset.offsetY + legendPositions.text1.y,
+      style: (0, _extends2.default)({
+        dominantBaseline: legendPositions.text1.dominantBaseline,
+        textAnchor: legendPositions.text1.textAnchor
+      }, labelStyle)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+      x: positionOffset.offsetX + legendPositions.bar.x,
+      y: positionOffset.offsetY + legendPositions.bar.y
+    }, barBox, {
+      fill: `url(#${id})`
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
+      text: text2,
+      x: positionOffset.offsetX + legendPositions.text2.x,
+      y: positionOffset.offsetY + legendPositions.text2.y,
+      style: (0, _extends2.default)({
+        dominantBaseline: legendPositions.text2.dominantBaseline,
+        textAnchor: legendPositions.text2.textAnchor
+      }, labelStyle)
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? ContinuousColorLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The alignment of the texts with the gradient bar.
+   * @default 'middle'
+   */
+  align: _propTypes.default.oneOf(['end', 'middle', 'start']),
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection: _propTypes.default.oneOf(['x', 'y', 'z']),
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: _propTypes.default.oneOf(['column', 'row']),
+  /**
+   * A unique identifier for the gradient.
+   * @default auto-generated id
+   */
+  id: _propTypes.default.string,
+  /**
+   * The style applied to labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: _propTypes.default.object,
+  /**
+   * The length of the gradient bar.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the length of the svg.
+   * @default '50%'
+   */
+  length: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default ({ formattedValue }) => formattedValue
+   */
+  maxLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default ({ formattedValue }) => formattedValue
+   */
+  minLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  /**
+   * The position of the legend.
+   */
+  position: _propTypes.default.shape({
+    horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
+    vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
+  }),
+  /**
+   * The scale used to display gradient colors.
+   * @default 'linear'
+   */
+  scaleType: _propTypes.default.oneOf(['linear', 'log', 'pow', 'sqrt', 'time', 'utc']),
+  /**
+   * The space between the gradient bar and the labels.
+   * @default 4
+   */
+  spacing: _propTypes.default.number,
+  /**
+   * The thickness of the gradient bar.
+   * @default 5
+   */
+  thickness: _propTypes.default.number
+} : void 0;

package/ChartsLegend/DefaultChartsLegend.d.ts

@@ -1,59 +1,16 @@
 import * as React from 'react';
-import { DrawingArea } from '../context/DrawingProvider';
-import { AnchorPosition, Direction } from './utils';
 import { FormattedSeries } from '../context/SeriesContextProvider';
-import { LegendParams } from '../models/seriesType/config';
-import { DefaultizedProps } from '../models/helpers';
-import { ChartsTextStyle } from '../ChartsText';
-import { CardinalDirections } from '../models/layout';
-import type { ChartsLegendProps } from './ChartsLegend';
-export type ChartsLegendRootOwnerState = {
-    position: AnchorPosition;
-    direction: Direction;
-    drawingArea: DrawingArea;
-    offsetX?: number;
-    offsetY?: number;
-    seriesNumber: number;
-};
-export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export interface LegendRendererProps extends DefaultizedProps<Omit<ChartsLegendProps, 'slots' | 'slotProps'>, 'direction' | 'position'> {
+import { LegendPerItemProps } from './LegendPerItem';
+import { DrawingArea } from '../context/DrawingProvider';
+export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDisplay'> {
     series: FormattedSeries;
-    seriesToDisplay: LegendParams[];
-    drawingArea: DrawingArea;
-    classes: Record<'mark' | 'series' | 'root', string>;
-    /**
-     * Style applied to legend labels.
-     * @default theme.typography.subtitle1
-     */
-    labelStyle?: ChartsTextStyle;
-    /**
-     * Width of the item mark (in px).
-     * @default 20
-     */
-    itemMarkWidth?: number;
-    /**
-     * Height of the item mark (in px).
-     * @default 20
-     */
-    itemMarkHeight?: number;
-    /**
-     * Space between the mark and the label (in px).
-     * @default 5
-     */
-    markGap?: number;
-    /**
-     * Space between two legend items (in px).
-     * @default 10
-     */
-    itemGap?: number;
+    seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
     /**
-     * Legend padding (in px).
-     * Can either be a single number, or an object with top, left, bottom, right properties.
-     * @default 10
+     * @deprecated Use the `useDrawingArea` hook instead.
      */
-    padding?: number | Partial<CardinalDirections<number>>;
+    drawingArea: Omit<DrawingArea, 'isPointInside'>;
 }
-declare function DefaultChartsLegend(props: LegendRendererProps): React.JSX.Element | null;
+declare function DefaultChartsLegend(props: LegendRendererProps): React.JSX.Element;
 declare namespace DefaultChartsLegend {
     var propTypes: any;
 }