@mui/x-charts 6.18.0 → 6.18.2

package/esm/SparkLineChart/SparkLineChart.js

@@ -129,10 +129,28 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Data to plot.
    */
   data: PropTypes.arrayOf(PropTypes.number).isRequired,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.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.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
+  /**
+   * 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.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
@@ -188,6 +206,10 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.number,
   /**
    * The xAxis configuration.

package/esm/context/CartesianContextProvider.js

@@ -221,7 +221,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * 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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -252,6 +259,10 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,

package/esm/context/DrawingProvider.js

@@ -46,6 +46,12 @@ process.env.NODE_ENV !== "production" ? DrawingProvider.propTypes = {
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   height: PropTypes.number.isRequired,
+  /**
+   * 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.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,

package/esm/index.js

@@ -4,6 +4,7 @@ export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';
+export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';

package/esm/internals/geometry.js

@@ -6,8 +6,8 @@ let warnedOnce = false;
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
  * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
- * @param width the side along the x axis.
- * @param height the side along the y axis.
+ * @param width the side along the x-axis.
+ * @param height the side along the y-axis.
  * @param angle the rotation in degrees.
  */
 export function getMinXTranslation(width, height, angle = 0) {

package/hooks/useScale.d.ts

@@ -6,5 +6,5 @@ import { D3Scale } from '../models/axis';
  * @returns (value: any) => number
  */
 export declare function getValueToPositionMapper(scale: D3Scale): (value: any) => number;
-export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;
-export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<any> | import("d3-scale").ScalePoint<any> | import("d3-scale").ScaleLinear<any, any, never> | import("d3-scale").ScaleTime<any, any, never> | import("d3-scale").ScaleLogarithmic<any, any, never> | import("d3-scale").ScalePower<any, any, never>;
+export declare function useXScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;
+export declare function useYScale(identifier?: number | string): import("d3-scale").ScaleBand<string | number | Date> | import("d3-scale").ScalePoint<string | number | Date> | import("d3-scale").ScaleLogarithmic<number, number, never> | import("d3-scale").ScalePower<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | import("d3-scale").ScaleLinear<number, number, never>;

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';
+export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.18.0
+ * @mui/x-charts v6.18.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -76,6 +76,17 @@ Object.keys(_ChartsClipPath).forEach(function (key) {
     }
   });
 });
+var _ChartsReferenceLine = require("./ChartsReferenceLine");
+Object.keys(_ChartsReferenceLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsReferenceLine[key];
+    }
+  });
+});
 var _ChartsAxis = require("./ChartsAxis");
 Object.keys(_ChartsAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/components/ChartsText.d.ts

@@ -18,7 +18,7 @@ interface GetWordsByLinesParams {
      */
     style?: ChartsTextStyle;
     /**
-     * If true, the line width is computed.
+     * If `true`, the line width is computed.
      * @default false
      */
     needsComputation?: boolean;

package/internals/geometry.d.ts

@@ -2,8 +2,8 @@
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
  * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
- * @param width the side along the x axis.
- * @param height the side along the y axis.
+ * @param width the side along the x-axis.
+ * @param height the side along the y-axis.
  * @param angle the rotation in degrees.
  */
 export declare function getMinXTranslation(width: number, height: number, angle?: number): number;

package/internals/geometry.js

@@ -12,8 +12,8 @@ let warnedOnce = false;
  * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
  * This assumes that all rectangles have the same height and angle between -90 and 90.
  * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
- * @param width the side along the x axis.
- * @param height the side along the y axis.
+ * @param width the side along the x-axis.
+ * @param height the side along the y-axis.
  * @param angle the rotation in degrees.
  */
 function getMinXTranslation(width, height, angle = 0) {

package/internals/isBandScale.d.ts

@@ -1,3 +1,5 @@
 import type { ScaleBand, ScalePoint } from 'd3-scale';
 import { D3Scale } from '../models/axis';
-export declare function isBandScale(scale: D3Scale): scale is ScaleBand<any> | ScalePoint<any>;
+export declare function isBandScale<T extends {
+    toString(): string;
+}>(scale: D3Scale<T>): scale is ScaleBand<T> | ScalePoint<T>;

package/internals/utils.d.ts

@@ -1,2 +1,7 @@
 export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
 export declare function getSymbol(shape: SymbolsTypes): number;
+type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

package/legacy/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.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.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.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -156,9 +163,21 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.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.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   layout: PropTypes.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.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -202,6 +221,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: PropTypes.object,
     slots: PropTypes.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.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
@@ -214,7 +239,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -285,7 +310,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -312,7 +337,15 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -343,6 +376,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,

package/legacy/ChartsAxis/ChartsAxis.js

@@ -12,7 +12,8 @@ var getAxisId = function getAxisId(propsValue) {
     return null;
   }
   if (_typeof(propsValue) === 'object') {
-    return propsValue.axisId;
+    var _propsValue$axisId;
+    return (_propsValue$axisId = propsValue.axisId) != null ? _propsValue$axisId : null;
   }
   return propsValue;
 };
@@ -98,7 +99,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -125,7 +126,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -152,7 +153,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -189,7 +190,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,

package/legacy/ChartsLegend/ChartsLegend.js

@@ -11,7 +11,7 @@ import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
-import { getChartsLegendUtilityClass } from './chartsLegendClasses';
+import { getLegendUtilityClass } from './chartsLegendClasses';
 import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     label: ['label'],
     series: ['series']
   };
-  return composeClasses(slots, getChartsLegendUtilityClass, classes);
+  return composeClasses(slots, getLegendUtilityClass, classes);
 };
 export var ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',

package/legacy/ChartsLegend/chartsLegendClasses.js

@@ -1,5 +1,5 @@
 import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getChartsLegendUtilityClass(slot) {
+export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
 export var legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);

package/legacy/ChartsReferenceLine/ChartsReferenceLine.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsXReferenceLine } from './ChartsXReferenceLine';
+import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { jsx as _jsx } from "react/jsx-runtime";
+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__*/_jsx(ChartsXReferenceLine, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, 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.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.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.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
+} : void 0;
+export { ChartsReferenceLine };

package/legacy/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { useDrawingArea, useXScale } from '../hooks';
+import { ReferenceLineRoot } from './common';
+import { ChartsText } from '../internals/components/ChartsText';
+import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getTextParams = function getTextParams(_ref) {
+  var top = _ref.top,
+    height = _ref.height,
+    spacingY = _ref.spacingY,
+    _ref$labelAlign = _ref.labelAlign,
+    labelAlign = _ref$labelAlign === void 0 ? 'middle' : _ref$labelAlign;
+  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'
+        }
+      };
+  }
+};
+export function getXReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'vertical'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+var warnedOnce = false;
+function ChartsXReferenceLine(props) {
+  var _spacing$x, _spacing$y;
+  var x = props.x,
+    _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 5 : _props$spacing,
+    inClasses = props.classes,
+    labelAlign = props.labelAlign,
+    lineStyle = props.lineStyle,
+    labelStyle = props.labelStyle,
+    axisId = props.axisId;
+  var _useDrawingArea = useDrawingArea(),
+    top = _useDrawingArea.top,
+    height = _useDrawingArea.height;
+  var xAxisScale = useXScale(axisId);
+  var xPosition = xAxisScale(x);
+  if (xPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error("MUI X: the value ".concat(x, " does not exist in the data of x axis with id ").concat(axisId, "."));
+      }
+    }
+    return null;
+  }
+  var d = "M ".concat(xPosition, " ").concat(top, " l 0 ").concat(height);
+  var classes = getXReferenceLineClasses(inClasses);
+  var spacingX = _typeof(spacing) === 'object' ? (_spacing$x = spacing.x) != null ? _spacing$x : 0 : spacing;
+  var spacingY = _typeof(spacing) === 'object' ? (_spacing$y = spacing.y) != null ? _spacing$y : 0 : spacing;
+  var textParams = _extends({
+    x: xPosition + spacingX,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    top: top,
+    height: height,
+    spacingY: spacingY,
+    labelAlign: labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
+      style: _extends({}, textParams.style, labelStyle)
+    }))]
+  });
+}
+export { ChartsXReferenceLine };

package/legacy/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { useDrawingArea, useYScale } from '../hooks';
+import { ReferenceLineRoot } from './common';
+import { ChartsText } from '../internals/components/ChartsText';
+import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getTextParams = function getTextParams(_ref) {
+  var left = _ref.left,
+    width = _ref.width,
+    spacingX = _ref.spacingX,
+    _ref$labelAlign = _ref.labelAlign,
+    labelAlign = _ref$labelAlign === void 0 ? 'middle' : _ref$labelAlign;
+  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'
+        }
+      };
+  }
+};
+var warnedOnce = false;
+export function getYReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  var _spacing$x, _spacing$y;
+  var y = props.y,
+    _props$label = props.label,
+    label = _props$label === void 0 ? '' : _props$label,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 5 : _props$spacing,
+    inClasses = props.classes,
+    labelAlign = props.labelAlign,
+    lineStyle = props.lineStyle,
+    labelStyle = props.labelStyle,
+    axisId = props.axisId;
+  var _useDrawingArea = useDrawingArea(),
+    left = _useDrawingArea.left,
+    width = _useDrawingArea.width;
+  var yAxisScale = useYScale(axisId);
+  var yPosition = yAxisScale(y);
+  if (yPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error("MUI X: the value ".concat(y, " does not exist in the data of y axis with id ").concat(axisId, "."));
+      }
+    }
+    return null;
+  }
+  var d = "M ".concat(left, " ").concat(yPosition, " l ").concat(width, " 0");
+  var classes = getYReferenceLineClasses(inClasses);
+  var spacingX = _typeof(spacing) === 'object' ? (_spacing$x = spacing.x) != null ? _spacing$x : 0 : spacing;
+  var spacingY = _typeof(spacing) === 'object' ? (_spacing$y = spacing.y) != null ? _spacing$y : 0 : spacing;
+  var textParams = _extends({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left: left,
+    width: width,
+    spacingX: spacingX,
+    labelAlign: labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
+      style: _extends({}, textParams.style, labelStyle)
+    }))]
+  });
+}
+export { ChartsYReferenceLine };