@mui/x-charts 6.18.0 → 7.0.0-alpha.0

package/modern/BarChart/BarChart.js

@@ -111,6 +111,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'])
@@ -121,7 +128,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,
@@ -148,9 +155,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']),
   /**
@@ -159,7 +178,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,
@@ -194,6 +213,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,
@@ -206,7 +231,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,
@@ -277,7 +302,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,
@@ -304,7 +329,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,
@@ -335,6 +368,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/modern/ChartsAxis/ChartsAxis.js

@@ -11,7 +11,7 @@ const getAxisId = propsValue => {
     return null;
   }
   if (typeof propsValue === 'object') {
-    return propsValue.axisId;
+    return propsValue.axisId ?? null;
   }
   return propsValue;
 };
@@ -100,7 +100,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,
@@ -127,7 +127,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,
@@ -154,7 +154,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,
@@ -191,7 +191,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/modern/ChartsLegend/ChartsLegend.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"],
   _excluded2 = ["label"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { NoSsr } from '@mui/base/NoSsr';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -10,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";
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     series: ['series']
   };
-  return composeClasses(slots, getChartsLegendUtilityClass, classes);
+  return composeClasses(slots, getLegendUtilityClass, classes);
 };
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
@@ -233,7 +234,107 @@ function DefaultChartsLegend(props) {
     })
   });
 }
-export function ChartsLegend(inProps) {
+process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']).isRequired,
+  drawingArea: PropTypes.shape({
+    bottom: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    left: PropTypes.number.isRequired,
+    right: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired
+  }).isRequired,
+  /**
+   * Set to true to hide the legend.
+   */
+  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 0
+   */
+  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
+  }).isRequired,
+  series: PropTypes.shape({
+    bar: PropTypes.shape({
+      series: PropTypes.object.isRequired,
+      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+      stackingGroups: PropTypes.arrayOf(PropTypes.shape({
+        ids: PropTypes.arrayOf(PropTypes.string).isRequired,
+        stackingOffset: PropTypes.func.isRequired,
+        stackingOrder: PropTypes.func.isRequired
+      })).isRequired
+    }),
+    line: PropTypes.shape({
+      series: PropTypes.object.isRequired,
+      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+      stackingGroups: PropTypes.arrayOf(PropTypes.shape({
+        ids: PropTypes.arrayOf(PropTypes.string).isRequired,
+        stackingOffset: PropTypes.func.isRequired,
+        stackingOrder: PropTypes.func.isRequired
+      })).isRequired
+    }),
+    pie: PropTypes.shape({
+      series: PropTypes.object.isRequired,
+      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
+    }),
+    scatter: PropTypes.shape({
+      series: PropTypes.object.isRequired,
+      seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
+    })
+  }).isRequired,
+  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired
+  })).isRequired
+} : void 0;
+function ChartsLegend(inProps) {
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsLegend'
@@ -268,4 +369,39 @@ export function ChartsLegend(inProps) {
     ownerState: {}
   });
   return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+  /**
+   * Set to true to hide the legend.
+   * @default false
+   */
+  hidden: PropTypes.bool,
+  position: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
+    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { ChartsLegend };

package/modern/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 const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);

package/modern/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/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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";
+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'
+        }
+      };
+  }
+};
+export function getXReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'vertical'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+let warnedOnce = false;
+function ChartsXReferenceLine(props) {
+  const {
+    x,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    top,
+    height
+  } = useDrawingArea();
+  const xAxisScale = 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 = _extends({
+    x: xPosition + spacingX,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    top,
+    height,
+    spacingY,
+    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/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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";
+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;
+export function getYReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  const {
+    y,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    left,
+    width
+  } = useDrawingArea();
+  const yAxisScale = 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 = _extends({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left,
+    width,
+    spacingX,
+    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 };

package/modern/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getReferenceLineUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsReferenceLine', slot);
+}
+export const referenceLineClasses = generateUtilityClasses('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/modern/ChartsReferenceLine/common.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+import { referenceLineClasses } from './chartsReferenceLineClasses';
+export const ReferenceLineRoot = styled('g')(({
+  theme
+}) => ({
+  [`& .${referenceLineClasses.line}`]: {
+    fill: 'none',
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1,
+    pointerEvents: 'none'
+  },
+  [`& .${referenceLineClasses.label}`]: _extends({
+    fill: (theme.vars || theme).palette.text.primary,
+    stroke: 'none',
+    pointerEvents: 'none',
+    fontSize: 12
+  }, theme.typography.body1)
+}));

package/modern/ChartsReferenceLine/index.js

@@ -0,0 +1,2 @@
+export * from './ChartsReferenceLine';
+export * from './chartsReferenceLineClasses';

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -106,17 +106,20 @@ function ChartsXAxis(inProps) {
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
   });
+  const {
+    xAxisIds
+  } = React.useContext(CartesianContext);
   const _React$useContext = React.useContext(CartesianContext),
-    _props$axisId = props.axisId,
+    _ref = props.axisId ?? xAxisIds[0],
     {
       xAxis: {
-        [_props$axisId]: {
+        [_ref]: {
           scale: xScale,
           tickNumber
         }
       }
     } = _React$useContext,
-    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_props$axisId], _excluded);
+    settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_ref], _excluded);
   const isMounted = useMounted();
   const defaultizedProps = _extends({}, defaultProps, settings, props);
   const {
@@ -234,9 +237,10 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * Id of the axis to render.
+   * The id of the axis to render.
+   * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.string.isRequired,
+  axisId: PropTypes.string,
   /**
    * Override or extend the styles applied to the component.
    */