@mui/x-charts 7.0.0-beta.2 → 7.0.0-beta.3

package/esm/LineChart/LineChart.js

@@ -13,6 +13,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
+import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,6 +48,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     },
     disableLineItemHighlight,
     legend,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -84,6 +86,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/_jsx(AreaPlot, {
@@ -129,11 +134,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // | 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.
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({
@@ -189,6 +191,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -247,6 +256,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * Callback fired when an area element is clicked.
+   */
   onAreaClick: PropTypes.func,
   /**
    * The function called for onClick events.
@@ -255,7 +267,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when a line element is clicked.
+   */
   onLineClick: PropTypes.func,
+  /**
+   * Callback fired when a mark element is clicked.
+   */
   onMarkClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -284,6 +302,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the line chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -302,6 +323,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,

package/esm/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { arc as d3Arc } from 'd3-shape';
@@ -40,20 +40,20 @@ const PieArcRoot = styled(animated.path, {
 }));
 function PieArc(props) {
   const {
-      id,
-      dataIndex,
       classes: innerClasses,
       color,
+      cornerRadius,
+      dataIndex,
+      endAngle,
       highlightScope,
-      onClick,
+      id,
+      innerRadius,
       isFaded,
       isHighlighted,
-      startAngle,
-      endAngle,
-      paddingAngle,
-      innerRadius,
+      onClick,
       outerRadius,
-      cornerRadius
+      paddingAngle,
+      startAngle
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {

package/esm/PieChart/PieArcLabelPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -27,23 +27,23 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
 function PieArcLabelPlot(props) {
   var _slots$pieArcLabel;
   const {
-      slots,
-      slotProps,
-      innerRadius,
-      outerRadius,
+      arcLabel,
+      arcLabelMinAngle = 0,
       arcLabelRadius,
       cornerRadius = 0,
-      paddingAngle = 0,
-      id,
-      highlightScope,
-      highlighted,
+      data,
       faded = {
         additionalRadius: -5
       },
-      data,
-      arcLabel,
-      arcLabelMinAngle = 0,
-      skipAnimation
+      highlighted,
+      highlightScope,
+      id,
+      innerRadius,
+      outerRadius,
+      paddingAngle = 0,
+      skipAnimation,
+      slotProps,
+      slots
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transformedData = useTransformData({

package/esm/PieChart/PieChart.js

@@ -101,6 +101,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -183,6 +188,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
+   * The props of the legend.
+   * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
    * @deprecated Consider using `slotProps.legend` instead.
    */
   legend: PropTypes.shape({
@@ -208,6 +215,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * Callback fired when a pie arc is clicked.
+   */
   onItemClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
@@ -236,6 +246,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the pie chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -247,9 +260,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default {}
    */
   slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -3,74 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerWindow from '@mui/utils/ownerWindow';
 import { styled } from '@mui/material/styles';
 import { ChartContainer } from '../ChartContainer';
+import { useChartContainerDimensions } from './useChartContainerDimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useChartDimensions = (inWidth, inHeight) => {
-  const rootRef = React.useRef(null);
-  const displayError = React.useRef(false);
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-
-  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
-  const computeSize = React.useCallback(() => {
-    const mainEl = rootRef == null ? void 0 : rootRef.current;
-    if (!mainEl) {
-      return;
-    }
-    const win = ownerWindow(mainEl);
-    const computedStyle = win.getComputedStyle(mainEl);
-    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
-    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
-    setWidth(newWidth);
-    setHeight(newHeight);
-  }, []);
-  React.useEffect(() => {
-    // Ensure the error detection occurs after the first rendering.
-    displayError.current = true;
-  }, []);
-  useEnhancedEffect(() => {
-    if (inWidth !== undefined && inHeight !== undefined) {
-      return () => {};
-    }
-    computeSize();
-    const elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return () => {};
-    }
-    let animationFrame;
-    const observer = new ResizeObserver(() => {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(() => {
-        computeSize();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return () => {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [computeSize, inHeight, inWidth]);
-  if (process.env.NODE_ENV !== 'production') {
-    if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
-      displayError.current = false;
-    }
-    if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
-      displayError.current = false;
-    }
-  }
-  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
-};
 const ResizableContainer = styled('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container'
@@ -100,7 +36,7 @@ const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function Responsi
       height: inHeight
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
+  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
   return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
     ownerState: {

package/esm/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import ownerWindow from '@mui/utils/ownerWindow';
+export const useChartContainerDimensions = (inWidth, inHeight) => {
+  const rootRef = React.useRef(null);
+  const displayError = React.useRef(false);
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+
+  // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
+  const computeSize = React.useCallback(() => {
+    const mainEl = rootRef == null ? void 0 : rootRef.current;
+    if (!mainEl) {
+      return;
+    }
+    const win = ownerWindow(mainEl);
+    const computedStyle = win.getComputedStyle(mainEl);
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
+    setWidth(newWidth);
+    setHeight(newHeight);
+  }, []);
+  React.useEffect(() => {
+    // Ensure the error detection occurs after the first rendering.
+    displayError.current = true;
+  }, []);
+  useEnhancedEffect(() => {
+    if (inWidth !== undefined && inHeight !== undefined) {
+      return () => {};
+    }
+    computeSize();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        computeSize();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [computeSize, inHeight, inWidth]);
+  if (process.env.NODE_ENV !== 'production') {
+    if (displayError.current && inWidth === undefined && width === 0) {
+      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      displayError.current = false;
+    }
+    if (displayError.current && inHeight === undefined && height === 0) {
+      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      displayError.current = false;
+    }
+  }
+  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
+};

package/esm/ScatterChart/ScatterChart.js

@@ -8,6 +8,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
+import { ChartsGrid } from '../ChartsGrid';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -35,6 +36,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     margin,
     colors,
     sx,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -66,6 +68,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsx(ScatterPlot, {
       slots: slots,
       slotProps: slotProps,
@@ -86,6 +91,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -140,6 +150,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -231,6 +248,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the scatter chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * The props used for each component slot.
@@ -244,6 +264,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,

package/esm/hooks/useTicks.js

@@ -13,7 +13,7 @@ export function getTickNumber(params) {
   const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
-function useTicks(options) {
+export function useTicks(options) {
   const {
     scale,
     tickNumber,
@@ -64,5 +64,4 @@ function useTicks(options) {
       };
     });
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-export default useTicks;
+}

package/esm/index.js

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
@@ -19,6 +20,7 @@ export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
+export * from './Gauge';
 export * from './ChartContainer';
 export * from './ChartsSurface';
 export * from './ResponsiveChartContainer';

package/hooks/useTicks.d.ts

@@ -39,8 +39,7 @@ export type TickItemType = {
     offset: number;
     labelOffset: number;
 };
-declare function useTicks(options: {
+export declare function useTicks(options: {
     scale: D3Scale;
     valueFormatter?: (value: any) => string;
 } & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
-export default useTicks;

package/hooks/useTicks.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
 exports.getTickNumber = getTickNumber;
+exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
 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); }
@@ -64,5 +64,4 @@ function useTicks(options) {
       labelOffset: 0
     }));
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-var _default = exports.default = useTicks;
+}

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
@@ -19,6 +20,7 @@ export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
+export * from './Gauge';
 export * from './ChartContainer';
 export * from './ChartsSurface';
 export * from './ResponsiveChartContainer';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.2
+ * @mui/x-charts v7.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
     }
   });
 });
+var _ChartsGrid = require("./ChartsGrid");
+Object.keys(_ChartsGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsGrid[key];
+    }
+  });
+});
 var _ChartsText = require("./ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -241,6 +252,17 @@ Object.keys(_SparkLineChart).forEach(function (key) {
     }
   });
 });
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
 var _ChartContainer = require("./ChartContainer");
 Object.keys(_ChartContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/legacy/BarChart/BarChart.js

@@ -11,6 +11,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
+import { ChartsGrid } from '../ChartsGrid';
 import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,6 +40,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
     legend = props.legend,
+    grid = props.grid,
     topAxis = props.topAxis,
     leftAxis = props.leftAxis,
     rightAxis = props.rightAxis,
@@ -94,6 +96,9 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsx("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
       children: /*#__PURE__*/_jsx(BarPlot, {
@@ -126,11 +131,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // | 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.
+   * The configuration of axes highlight.
+   * Default is set to 'band' in the bar direction.
+   * Depends on `layout` prop.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
@@ -181,11 +185,22 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: 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 direction of the bar elements.
+   * @default 'vertical'
+   */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Indicate which axis to display the left of the charts.
@@ -280,6 +295,9 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the bar chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
@@ -298,6 +316,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,