@mui/x-charts 6.18.0 → 6.18.1

package/BarChart/BarChart.d.ts

@@ -15,6 +15,13 @@ export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps
 export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Pick<BarPlotProps, 'skipAnimation'> {
     series: MakeOptional<BarSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
+    /**
+     * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
+     * The two properties accept the following values:
+     * - 'none': display nothing.
+     * - 'line': display a line at the current mouse position.
+     * - 'band': display a band at the current mouse position. Only available with band scale.
+     */
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * @deprecated Consider using `slotProps.legend` instead.

package/BarChart/BarChart.js

@@ -119,6 +119,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Object `{ x, y }` that defines how the charts highlight the mouse position along the x- and y-axes.
+   * The two properties accept the following values:
+   * - 'none': display nothing.
+   * - 'line': display a line at the current mouse position.
+   * - 'band': display a band at the current mouse position. Only available with band scale.
+   */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
@@ -129,7 +136,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -156,9 +163,21 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: _propTypes.default.number,
   layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
@@ -167,7 +186,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -202,6 +221,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object
   }),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
     left: _propTypes.default.number,
@@ -214,7 +239,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -285,7 +310,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -312,7 +337,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: _propTypes.default.number,
     y: _propTypes.default.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
@@ -343,6 +376,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.1
+
+_Nov 9, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
+- 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/) published
+- 📈 `<ChartsReferenceLine />` component is now available
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.1`
+
+- [DataGrid] Fix cell value type in quick filtering v7 (#10884) @cherniavskii
+- [DataGrid] Fix keyboard navigation for actions cell with disabled buttons (#10947) @michelengelen
+- [DataGrid] Fix `undefined` slot values (#10934) @romgrk
+
+#### `@mui/x-data-grid-pro@6.18.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.1`, plus:
+
+- [DataGridPro] Add data source interface and basic documentation (#10543) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.18.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.1`, plus:
+
+- [DataGridPremium] Render aggregation label when `renderHeader` is used (#10961) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.1`
+
+- [fields] Fix multi input date time field section selection (#10915) @noraleonte
+- [pickers] Always use up-to-date `defaultView` (#10889) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.1`.
+
+### Charts / `@mui/x-charts@6.18.1`
+
+- [charts] Add `<ChartsReferenceLine />` component (#10597) @wascou
+- [charts] Improve properties JSDoc (#10931) @alexfauquette
+
+### Docs
+
+- [docs] Fix charts docs as stable (#10888) @alexfauquette
+- [docs] Document how to hide the legend (#10954) @alexfauquette
+
+### Core
+
+- [core] Adds new alpha version to version select on the docs (#10944) @michelengelen
+- [core] Fix GitHub title tag consistency @oliviertassinari
+
 ## 6.18.0
 
 _Nov 3, 2023_
@@ -357,7 +415,7 @@ Same changes as in `@mui/x-date-pickers@6.16.1`, plus:
 
 - [core] Fix casing consistency with legal and marketing content @oliviertassinari
 - [core] Revert the link in the priority support ticket description (#10517) @michelengelen
-- [CHANGELOG] Polish image @oliviertassinari
+- [changelog] Polish image @oliviertassinari
 
 ## 6.16.0
 
@@ -1149,7 +1207,7 @@ Same changes as in `@mui/x-date-pickers@6.10.1`.
 ### Core
 
 - [core] Add `validate` command (#9714) @romgrk
-- [CHANGELOG] Update generator to new format @oliviertassinari
+- [changelog] Update generator to new format @oliviertassinari
 
 ## 6.10.0
 
@@ -1207,7 +1265,7 @@ Same changes as in `@mui/x-date-pickers@6.10.0`.
 
 - [core] Disambiguate eslint plugin name @oliviertassinari
 - [core] Update priority support issue template and prompt (#9574) @DanailH
-- [CHANGELOG] Clarify each plan (#9446) @oliviertassinari
+- [changelog] Clarify each plan (#9446) @oliviertassinari
 - [license] Fix error terminology (#9614) @oliviertassinari
 
 ## 6.9.2
@@ -1356,8 +1414,8 @@ Same changes as in `@mui/x-date-pickers@6.9.1`.
 - [core] Fix priority support prompt action (#9472) @DanailH
 - [core] Update `uses` for priority support action (#9480) @DanailH
 - [core] Bumb update monorepo (#9476) @alexfauquette
-- [CHANGELOG] Fix media quality (#9439) @oliviertassinari
-- [CHANGELOG] Remove height img attribute @oliviertassinari
+- [changelog] Fix media quality (#9439) @oliviertassinari
+- [changelog] Remove height img attribute @oliviertassinari
 - [test] Skip flaky row pinning tests in JSDOM (#9511) @cherniavskii
 
 ## 6.9.0

package/ChartsAxis/ChartsAxis.js

@@ -19,7 +19,7 @@ const getAxisId = propsValue => {
     return null;
   }
   if (typeof propsValue === 'object') {
-    return propsValue.axisId;
+    return propsValue.axisId ?? null;
   }
   return propsValue;
 };
@@ -108,7 +108,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -135,7 +135,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
@@ -199,7 +199,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.string.isRequired,
+    axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,

package/ChartsAxis/axisClasses.d.ts

@@ -11,9 +11,9 @@ export interface ChartsAxisClasses {
     tickLabel: string;
     /** Styles applied to the group containing the axis label. */
     label: string;
-    /** Styles applied to x axes. */
+    /** Styles applied to x-axes. */
     directionX: string;
-    /** Styles applied to y axes. */
+    /** Styles applied to y-axes. */
     directionY: string;
     /** Styles applied to the top axis. */
     top: string;

package/ChartsLegend/ChartsLegend.d.ts

@@ -22,6 +22,7 @@ export type ChartsLegendProps = {
     classes?: Partial<ChartsLegendClasses>;
     /**
      * Set to true to hide the legend.
+     * @default false
      */
     hidden?: boolean;
     /**

package/ChartsLegend/ChartsLegend.js

@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     series: ['series']
   };
-  return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getChartsLegendUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
 };
 const ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsLegend',

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -13,5 +13,5 @@ export interface ChartsLegendClasses {
     row: string;
 }
 export type ChartsLegendClassKey = keyof ChartsLegendClasses;
-export declare function getChartsLegendUtilityClass(slot: string): string;
+export declare function getLegendUtilityClass(slot: string): string;
 export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/chartsLegendClasses.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getChartsLegendUtilityClass = getChartsLegendUtilityClass;
+exports.getLegendUtilityClass = getLegendUtilityClass;
 exports.legendClasses = void 0;
 var _utils = require("@mui/utils");
-function getChartsLegendUtilityClass(slot) {
+function getLegendUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsLegend', slot);
 }
 const legendClasses = exports.legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);

package/ChartsReferenceLine/ChartsReferenceLine.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsXReferenceLineProps } from './ChartsXReferenceLine';
+import { ChartsYReferenceLineProps } from './ChartsYReferenceLine';
+import { XOR } from '../internals/utils';
+type ChartsReferenceLineProps<TValue extends string | number | Date = string | number | Date> = XOR<ChartsXReferenceLineProps<TValue>, ChartsYReferenceLineProps<TValue>>;
+declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX.Element;
+declare namespace ChartsReferenceLine {
+    var propTypes: any;
+}
+export { ChartsReferenceLine };

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsReferenceLine = ChartsReferenceLine;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ChartsXReferenceLine = require("./ChartsXReferenceLine");
+var _ChartsYReferenceLine = require("./ChartsYReferenceLine");
+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 && Object.prototype.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 ChartsReferenceLine(props) {
+  if (props.x !== undefined && props.y !== undefined) {
+    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+  }
+  if (props.x === undefined && props.y === undefined) {
+    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+  }
+  if (props.x !== undefined) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXReferenceLine.ChartsXReferenceLine, (0, _extends2.default)({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYReferenceLine.ChartsYReferenceLine, (0, _extends2.default)({}, props));
+}
+process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: _propTypes.default.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: _propTypes.default.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: _propTypes.default.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: _propTypes.default.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: _propTypes.default.object,
+  /**
+   * Additional space arround the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  })]),
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string])
+} : void 0;

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CommonChartsReferenceLineProps } from './common';
+import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
+export type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
+    /**
+     * The x value associated with the reference line.
+     * If defined the reference line will be vertical.
+     */
+    x: TValue;
+};
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
+export { ChartsXReferenceLine };

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsXReferenceLine = ChartsXReferenceLine;
+exports.getXReferenceLineClasses = getXReferenceLineClasses;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _hooks = require("../hooks");
+var _common = require("./common");
+var _ChartsText = require("../internals/components/ChartsText");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+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 && Object.prototype.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 getTextParams = ({
+  top,
+  height,
+  spacingY,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        y: top + spacingY,
+        style: {
+          dominantBaseline: 'hanging',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        y: top + height - spacingY,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    default:
+      return {
+        y: top + height / 2,
+        style: {
+          dominantBaseline: 'central',
+          textAnchor: 'start'
+        }
+      };
+  }
+};
+function getXReferenceLineClasses(classes) {
+  return (0, _composeClasses.default)({
+    root: ['root', 'vertical'],
+    line: ['line'],
+    label: ['label']
+  }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
+}
+let warnedOnce = false;
+function ChartsXReferenceLine(props) {
+  const {
+    x,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    top,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const xAxisScale = (0, _hooks.useXScale)(axisId);
+  const xPosition = xAxisScale(x);
+  if (xPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${xPosition} ${top} l 0 ${height}`;
+  const classes = getXReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = (0, _extends2.default)({
+    x: xPosition + spacingX,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    top,
+    height,
+    spacingY,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({}, textParams, {
+      style: (0, _extends2.default)({}, textParams.style, labelStyle)
+    }))]
+  });
+}

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CommonChartsReferenceLineProps } from './common';
+import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
+export type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
+    /**
+     * The y value associated with the reference line.
+     * If defined the reference line will be horizontal.
+     */
+    y: TValue;
+};
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"label" | "line" | "root", string>;
+declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
+export { ChartsYReferenceLine };

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsYReferenceLine = ChartsYReferenceLine;
+exports.getYReferenceLineClasses = getYReferenceLineClasses;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _hooks = require("../hooks");
+var _common = require("./common");
+var _ChartsText = require("../internals/components/ChartsText");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+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 && Object.prototype.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 getTextParams = ({
+  left,
+  width,
+  spacingX,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        x: left + spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        x: left + width - spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'end'
+        }
+      };
+    default:
+      return {
+        x: left + width / 2,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'middle'
+        }
+      };
+  }
+};
+let warnedOnce = false;
+function getYReferenceLineClasses(classes) {
+  return (0, _composeClasses.default)({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  const {
+    y,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    left,
+    width
+  } = (0, _hooks.useDrawingArea)();
+  const yAxisScale = (0, _hooks.useYScale)(axisId);
+  const yPosition = yAxisScale(y);
+  if (yPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${left} ${yPosition} l ${width} 0`;
+  const classes = getYReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = (0, _extends2.default)({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left,
+    width,
+    spacingX,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({}, textParams, {
+      style: (0, _extends2.default)({}, textParams.style, labelStyle)
+    }))]
+  });
+}