@mui/x-charts 8.3.1 → 8.5.0

package/context/useChartApiContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartApi } from "../ChartContainer/index.js";
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
+ */
+export declare function useChartApiContext<Api extends ChartApi>(): React.RefObject<Api>;

package/context/useChartApiContext.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiContext = useChartApiContext;
+var React = _interopRequireWildcard(require("react"));
+var _ChartProvider = require("./ChartProvider");
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
+ */
+function useChartApiContext() {
+  const {
+    publicAPI
+  } = (0, _ChartProvider.useChartContext)();
+  const apiRef = React.useRef(publicAPI);
+  React.useEffect(() => {
+    apiRef.current = publicAPI;
+  }, [publicAPI]);
+  return apiRef;
+}

package/esm/BarChart/BarChart.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from "./BarPlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
@@ -11,8 +13,8 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
@@ -50,6 +52,11 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
    * @default 'vertical'
    */
   layout?: BarSeriesType['layout'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
 }
 /**
  * Demos:

package/esm/BarChart/BarChart.js

@@ -17,6 +17,7 @@ import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -52,16 +53,18 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      }))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") BarChart.displayName = "BarChart";
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -188,6 +191,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[BarSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

package/esm/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,11 +1,30 @@
 import * as React from 'react';
+import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-export type ChartApi = NonNullable<NonNullable<ChartContainerProps['apiRef']>['current']>;
+type PluginsPerSeriesType = {
+  line: LineChartPluginsSignatures;
+  scatter: ScatterChartPluginsSignatures;
+  bar: BarChartPluginsSignatures;
+  pie: PieChartPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainer/ChartContainer.js

@@ -6,6 +6,14 @@ import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
+
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
@@ -45,7 +53,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
 });
 
 // @ts-ignore
-
+if (process.env.NODE_ENV !== "production") ChartContainer.displayName = "ChartContainer";
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -586,6 +594,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,

package/esm/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -32,7 +32,9 @@ export const useChartContainerProps = (props, ref) => {
       skipAnimation,
       seriesConfig,
       plugins,
-      localeText
+      localeText,
+      slots,
+      slotProps
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -63,7 +65,9 @@ export const useChartContainerProps = (props, ref) => {
     height,
     localeText,
     seriesConfig,
-    plugins: plugins ?? DEFAULT_PLUGINS
+    plugins: plugins ?? DEFAULT_PLUGINS,
+    slots,
+    slotProps
   };
   return {
     chartDataProviderProps,

package/esm/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,10 +1,20 @@
 import * as React from 'react';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps;
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>> & ChartsLocalizationProviderProps & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlots>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotProps>;
+};
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/esm/ChartDataProvider/ChartDataProvider.js

@@ -3,6 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { defaultSlotsMaterial } from "../internals/material/index.js";
+import { ChartsSlotsProvider } from "../context/ChartsSlotsContext.js";
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
 import { ChartProvider } from "../context/ChartProvider/index.js";
 import { ChartsLocalizationProvider } from "../ChartsLocalizationProvider/index.js";
@@ -38,12 +40,19 @@ function ChartDataProvider(props) {
   const {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   } = useChartDataProviderProps(props);
   return /*#__PURE__*/_jsx(ChartProvider, _extends({}, chartProviderProps, {
     children: /*#__PURE__*/_jsx(ChartsLocalizationProvider, {
       localeText: localeText,
-      children: children
+      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: defaultSlotsMaterial,
+        children: children
+      })
     })
   }));
 }
@@ -100,6 +109,14 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
   theme: PropTypes.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -8,4 +8,6 @@ export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
   chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("../internals/index.js").ChartsSlots> | undefined;
+  slotProps: Partial<import("../internals/index.js").ChartsSlotProps> | undefined;
 };

package/esm/ChartDataProvider/useChartDataProviderProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "localeText", "plugins", "seriesConfig"];
+const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
 import { useTheme } from '@mui/material/styles';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartDataProviderProps = props => {
@@ -10,7 +10,9 @@ export const useChartDataProviderProps = props => {
       children,
       localeText,
       plugins = DEFAULT_PLUGINS,
-      seriesConfig
+      seriesConfig,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -24,6 +26,8 @@ export const useChartDataProviderProps = props => {
   return {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   };
 };

package/esm/ChartsAxis/axisClasses.d.ts

@@ -27,6 +27,11 @@ export interface ChartsAxisClasses {
   left: string;
   /** Styles applied to the right axis. */
   right: string;
+  /**
+   * Styles applied to the root element for the axis with the given ID.
+   * Needs to be suffixed with the axis ID: `.${axisClasses.id}-${axisId}`.
+   */
+  id: string;
 }
 export type ChartsAxisClassKey = keyof ChartsAxisClasses;
 export declare function getAxisUtilityClass(slot: string): string;

package/esm/ChartsAxis/axisClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }
-export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
+export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right', 'id']);

package/esm/ChartsLegend/ChartsLegend.js

@@ -100,6 +100,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     })
   }));
 }));
+if (process.env.NODE_ENV !== "production") ChartsLegend.displayName = "ChartsLegend";
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartsLocalizationProvider/ChartsLocalizationProvider.js

@@ -9,9 +9,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { DEFAULT_LOCALE } from "../locales/enUS.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLocalizationContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartsLocalizationContext.displayName = 'ChartsLocalizationContext';
-}
+if (process.env.NODE_ENV !== "production") ChartsLocalizationContext.displayName = "ChartsLocalizationContext";
 /**
  * Demos:
  *

package/esm/ChartsSurface/ChartsSurface.js

@@ -86,6 +86,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     }), /*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
+if (process.env.NODE_ENV !== "production") ChartsSurface.displayName = "ChartsSurface";
 process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -31,10 +31,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    position
+    position,
+    id
   } = ownerState;
   const slots = {
-    root: ['root', 'directionX', position],
+    root: ['root', 'directionX', position, `id-${id}`],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],
@@ -56,7 +57,7 @@ function getVisibleLabels(xTicks, {
   tickLabelMinGap,
   reverse,
   isMounted,
-  isPointInside
+  isXInside
 }) {
   const getTickLabelSize = tick => {
     if (!isMounted || tick.formattedValue === undefined) {
@@ -91,7 +92,7 @@ function getVisibleLabels(xTicks, {
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;
     }
-    if (!isPointInside(textPosition)) {
+    if (!isXInside(textPosition)) {
       return false;
     }
 
@@ -259,12 +260,7 @@ function ChartsXAxis(inProps) {
     tickLabelMinGap,
     reverse,
     isMounted,
-    isPointInside: x => instance.isPointInside({
-      x,
-      y: -1
-    }, {
-      direction: 'x'
-    })
+    isXInside: instance.isXInside
   });
   const axisLabelProps = useSlotProps({
     elementType: Label,
@@ -312,12 +308,7 @@ function ChartsXAxis(inProps) {
       } = item;
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
-      const showTick = instance.isPointInside({
-        x: tickOffset,
-        y: -1
-      }, {
-        direction: 'x'
-      });
+      const showTick = instance.isXInside(tickOffset);
       const tickLabel = tickLabels.get(item);
       const showTickLabel = visibleLabels.has(item);
       return /*#__PURE__*/_jsxs("g", {

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -28,10 +28,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    position
+    position,
+    id
   } = ownerState;
   const slots = {
-    root: ['root', 'directionY', position],
+    root: ['root', 'directionY', position, `id-${id}`],
     line: ['line'],
     tickContainer: ['tickContainer'],
     tick: ['tick'],
@@ -236,12 +237,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = instance.isPointInside({
-        x: -1,
-        y: tickOffset
-      }, {
-        direction: 'y'
-      });
+      const showLabel = instance.isYInside(tickOffset);
       const tickLabel = tickLabels.get(item);
       if (!showLabel) {
         return null;

package/esm/Gauge/Gauge.js

@@ -48,6 +48,7 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
     }), children]
   }));
 });
+if (process.env.NODE_ENV !== "production") Gauge.displayName = "Gauge";
 process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Gauge/GaugeContainer.js

@@ -78,6 +78,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
     })
   });
 });
+if (process.env.NODE_ENV !== "production") GaugeContainer.displayName = "GaugeContainer";
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Gauge/GaugeProvider.js

@@ -21,9 +21,7 @@ export const GaugeContext = /*#__PURE__*/React.createContext({
   maxRadius: 0,
   valueAngle: null
 });
-if (process.env.NODE_ENV !== 'production') {
-  GaugeContext.displayName = 'GaugeContext';
-}
+if (process.env.NODE_ENV !== "production") GaugeContext.displayName = "GaugeContext";
 export function GaugeProvider(props) {
   const {
     value = null,

package/esm/LineChart/AnimatedLine.js

@@ -40,6 +40,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
     }, other, animateProps))
   });
 });
+if (process.env.NODE_ENV !== "production") AnimatedLine.displayName = "AnimatedLine";
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/LineChart/LineChart.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
 import { AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from "./AreaPlot.js";
 import { LinePlotProps, LinePlotSlotProps, LinePlotSlots } from "./LinePlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
@@ -14,8 +15,9 @@ import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighli
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
 import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
-export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -67,6 +69,11 @@ export interface LineChartProps extends Omit<ChartContainerProps<'line', LineCha
    * @default false
    */
   skipAnimation?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
 }
 /**
  * Demos:

package/esm/LineChart/LineChart.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
+import { ChartsToolbar } from "../Toolbar/internals/ChartsToolbar.js";
 import { AreaPlot } from "./AreaPlot.js";
 import { LinePlot } from "./LinePlot.js";
 import { MarkPlot } from "./MarkPlot.js";
@@ -57,19 +58,21 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
-        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      }))]
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") LineChart.displayName = "LineChart";
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -188,6 +191,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[LineSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * @default false

package/esm/LineChart/LineHighlightPlot.js

@@ -84,10 +84,7 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
-        if (!instance.isPointInside({
-          x,
-          y
-        })) {
+        if (!instance.isPointInside(x, y)) {
           return null;
         }
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);

package/esm/LineChart/MarkPlot.js

@@ -122,10 +122,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!instance.isPointInside({
-              x,
-              y
-            })) {
+            if (!instance.isPointInside(x, y)) {
               // Remove out of range
               return false;
             }

package/esm/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";