@mui/x-charts 7.12.1 → 7.14.0

package/BarChart/BarChart.js

@@ -282,6 +282,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -334,6 +335,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),

package/BarChart/BarPlot.js

@@ -200,6 +200,7 @@ function BarPlot(props) {
       barLabel
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const transition = (0, _web.useTransition)(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
     from: leaveStyle,
@@ -208,7 +209,7 @@ function BarPlot(props) {
     update: enterStyle,
     immediate: skipAnimation
   });
-  const maskTransition = (0, _web.useTransition)(masksData, {
+  const maskTransition = (0, _web.useTransition)(withoutBorderRadius ? [] : masksData, {
     keys: v => v.id,
     from: leaveStyle,
     leave: leaveStyle,
@@ -217,7 +218,7 @@ function BarPlot(props) {
     immediate: skipAnimation
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [maskTransition((style, {
+    children: [!withoutBorderRadius && maskTransition((style, {
       id,
       hasPositive,
       hasNegative,
@@ -251,7 +252,7 @@ function BarPlot(props) {
         }),
         style: style
       }));
-      if (!borderRadius || borderRadius <= 0) {
+      if (withoutBorderRadius) {
         return barElement;
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {

package/BarChart/extremums.js

@@ -4,34 +4,71 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
+const createResult = (data, direction) => {
+  if (direction === 'x') {
+    return {
+      x: data,
+      y: null
+    };
+  }
+  return {
+    x: null,
+    y: data
+  };
+};
 const getBaseExtremum = params => {
   const {
-    axis
+    axis,
+    getFilters,
+    isDefaultAxis
   } = params;
-  const minX = Math.min(...(axis.data ?? []));
-  const maxX = Math.max(...(axis.data ?? []));
+  const filter = getFilters?.({
+    currentAxisId: axis.id,
+    isDefaultAxis
+  });
+  const data = filter ? axis.data?.filter((_, i) => filter({
+    x: null,
+    y: null
+  }, i)) : axis.data;
+  const minX = Math.min(...(data ?? []));
+  const maxX = Math.max(...(data ?? []));
   return [minX, maxX];
 };
-const getValueExtremum = params => {
+const getValueExtremum = direction => params => {
   const {
     series,
     axis,
+    getFilters,
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
-    const [seriesMin, seriesMax] = series[seriesId].stackedData?.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]) ?? [null, null];
-    return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
-  }, [null, null]);
+    const {
+      stackedData
+    } = series[seriesId];
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
+      if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {
+        return seriesAcc;
+      }
+      return [Math.min(...values, seriesAcc[0]), Math.max(...values, seriesAcc[1])];
+    }, [Infinity, -Infinity]) ?? [Infinity, -Infinity];
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [Infinity, -Infinity]);
 };
 const getExtremumX = params => {
   // Notice that bar should be all horizontal or all vertical.
   // Don't think it's a problem for now
   const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
   if (isHorizontal) {
-    return getValueExtremum(params);
+    return getValueExtremum('x')(params);
   }
   return getBaseExtremum(params);
 };
@@ -41,6 +78,6 @@ const getExtremumY = params => {
   if (isHorizontal) {
     return getBaseExtremum(params);
   }
-  return getValueExtremum(params);
+  return getValueExtremum('y')(params);
 };
 exports.getExtremumY = getExtremumY;

package/CHANGELOG.md

@@ -3,6 +3,167 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
+## 7.13.0
+
+_Aug 16, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow to [edit the label](https://mui.com/x/react-tree-view/rich-tree-view/editing/) of Tree View's items.
+
+  <img width="344" src="https://github.com/user-attachments/assets/1a6cf765-2dc8-4906-bd93-139086eed148" alt="Item label editing" />
+
+- 🔧 Improve rows accessibility on the Data Grid features "Tree Data" and "Row Grouping". Certain "Row Grouping" accessibility updates will only be applied if experimental feature flag is enabled. See the [documentation](https://mui.com/x/react-data-grid/row-grouping/#accessibility-changes-in-v8) for more information.
+- 🌍 Improve Vietnamese (vi-VN) locale on the Data Grid
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.13.0`
+
+- [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
+- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
+- [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
+- [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
+
+#### `@mui/x-data-grid-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.13.0`, plus:
+
+- [DataGridPro] Fix Tree Data and Row Grouping rows accessibility (#13623) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.13.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.13.0`
+
+- [pickers] Fix date and time merging to retain milliseconds (#14173) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.13.0`
+
+- [charts] Add `baseline` property to the `LineChart` `series` (#14153) @JCQuintas
+- [charts] Fix issue where tooltip would disappear on mouse click (#14187) @alexfauquette
+- [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
+- [charts] Support axis with the same value for all data points (#14191) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.13.0`
+
+- [TreeView] Add label editing feature (#13388) @noraleonte
+- [TreeView] Fix the parameters passed for the `canMoveItemToNewPosition` prop (#14176) @flaviendelangle
+
+### Docs
+
+- [docs] Extract dataset in the Line chart docs (#14034) @alexfauquette
+- [docs] Remove redundant encoding in the mock data source server (#14185) @MBilalShafi
+- [docs] Use Netflix financial results to document bar charts (#13991) @alexfauquette
+- [docs] Remove relience of abbreviations (#14226) @oliviertassinari
+
+### Core
+
+- [core] Bump monorepo (#14141) @Janpot
+- [core] Fix ESLint issue (#14207) @LukasTy
+- [core] Fix Netlify build cache issue (#14182) @cherniavskii
+- [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy
+- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle
+
 ## 7.12.1
 
 _Aug 8, 2024_
@@ -51,7 +212,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.12.1`, plus:
 

package/ChartContainer/ChartContainer.d.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { DrawingProviderProps } from '../context/DrawingProvider';
 import { SeriesProviderProps } from '../context/SeriesProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
-import { CartesianContextProviderProps } from '../context/CartesianProvider';
+import { CartesianProviderProps } from '../context/CartesianProvider';
 import { HighlightedProviderProps, ZAxisContextProviderProps } from '../context';
 import { PluginProviderProps } from '../context/PluginProvider';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
-export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianContextProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps, 'children'> & {
+export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps, 'children'> & {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.
@@ -22,7 +22,7 @@ export type ChartContainerProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderP
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     children?: React.ReactNode;
 };
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianContextProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps, "children"> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps, "children"> & {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.

package/ChartContainer/ChartContainer.js

@@ -25,7 +25,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,
@@ -34,7 +34,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianContextProvider, (0, _extends2.default)({}, cartesianContextProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
@@ -164,6 +164,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
@@ -216,6 +217,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),

package/ChartContainer/useChartContainerProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DrawingProviderProps } from '../context/DrawingProvider';
-import type { CartesianContextProviderProps } from '../context/CartesianProvider';
+import type { CartesianProviderProps } from '../context/CartesianProvider';
 import type { SeriesProviderProps } from '../context/SeriesProvider';
 import type { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
 import type { ChartContainerProps } from './ChartContainer';
@@ -11,7 +11,7 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
     children: React.ReactNode;
     drawingProviderProps: Omit<DrawingProviderProps, "children">;
     seriesProviderProps: Omit<SeriesProviderProps, "children">;
-    cartesianContextProps: Omit<CartesianContextProviderProps, "children">;
+    cartesianProviderProps: Omit<CartesianProviderProps, "children">;
     zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
     highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
     chartsSurfaceProps: ChartsSurfaceProps & {
@@ -26,6 +26,7 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
         label?: string | undefined;
         max?: (number | Date) | undefined;
         min?: (number | Date) | undefined;
+        sx?: import("@mui/system").SxProps | undefined;
         classes?: Partial<import("..").ChartsAxisClasses> | undefined;
         slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
         slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;
@@ -58,6 +59,7 @@ export declare const useChartContainerProps: (props: ChartContainerProps, ref: R
         label?: string | undefined;
         max?: (number | Date) | undefined;
         min?: (number | Date) | undefined;
+        sx?: import("@mui/system").SxProps | undefined;
         classes?: Partial<import("..").ChartsAxisClasses> | undefined;
         slots?: Partial<import("../internals").ChartsAxisSlots> | undefined;
         slotProps?: Partial<import("../internals").ChartsAxisSlotProps> | undefined;

package/ChartContainer/useChartContainerProps.js

@@ -39,7 +39,7 @@ const useChartContainerProps = (props, ref) => {
   const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
   (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
 
-  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis);
+  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis, dataset);
   const drawingProviderProps = {
     width,
     height,
@@ -54,7 +54,7 @@ const useChartContainerProps = (props, ref) => {
     colors,
     dataset
   };
-  const cartesianContextProps = {
+  const cartesianProviderProps = {
     xAxis: defaultizedXAxis,
     yAxis: defaultizedYAxis,
     dataset
@@ -80,7 +80,7 @@ const useChartContainerProps = (props, ref) => {
     children,
     drawingProviderProps,
     seriesProviderProps,
-    cartesianContextProps,
+    cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
     chartsSurfaceProps,

package/ChartContainer/useDefaultizeAxis.d.ts

@@ -1,7 +1,8 @@
 import { MakeOptional } from '../models/helpers';
 import { AxisConfig, ScaleName } from '../models';
 import { ChartsAxisProps } from '../models/axis';
-export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined) => {
+import { DatasetType } from '../models/seriesType/config';
+export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, inYAxis: MakeOptional<AxisConfig<ScaleName, any, ChartsAxisProps>, "id">[] | undefined, dataset: DatasetType | undefined) => {
     reverse?: boolean | undefined;
     fill?: string | undefined;
     stroke?: string | undefined;
@@ -9,6 +10,7 @@ export declare const useDefaultizeAxis: (inXAxis: MakeOptional<AxisConfig<ScaleN
     label?: string | undefined;
     max?: (number | Date) | undefined;
     min?: (number | Date) | undefined;
+    sx?: import("@mui/system").SxProps | undefined;
     classes?: Partial<import("..").ChartsAxisClasses> | undefined;
     slots?: Partial<import("../models/axis").ChartsAxisSlots> | undefined;
     slotProps?: Partial<import("../models/axis").ChartsAxisSlotProps> | undefined;

package/ChartContainer/useDefaultizeAxis.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _constants = require("../constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const defaultizeAxis = (inAxis, axisName) => {
+const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => (0, _extends2.default)({
     id: `defaultized-${axisName}-axis-${index}`
@@ -19,11 +19,22 @@ const defaultizeAxis = (inAxis, axisName) => {
   }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
     id: DEFAULT_AXIS_KEY,
     scaleType: 'linear'
-  }] : [])];
+  }] : [])].map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return (0, _extends2.default)({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
 };
-const useDefaultizeAxis = (inXAxis, inYAxis) => {
-  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, 'x'), [inXAxis]);
-  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, 'y'), [inYAxis]);
+const useDefaultizeAxis = (inXAxis, inYAxis, dataset) => {
+  const xAxis = React.useMemo(() => defaultizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => defaultizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
   return [xAxis, yAxis];
 };
 exports.useDefaultizeAxis = useDefaultizeAxis;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -36,16 +36,30 @@ const ChartsAxisHighlightPath = exports.ChartsAxisHighlightPath = (0, _styles.st
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
-  pointerEvents: 'none'
-}, ownerState.axisHighlight === 'band' && {
-  fill: theme.palette.mode === 'light' ? 'gray' : 'white',
-  fillOpacity: 0.1
-}, ownerState.axisHighlight === 'line' && {
-  strokeDasharray: '5 2',
-  stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff'
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: (0, _extends2.default)({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: (0, _extends2.default)({
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
 }));
 /**
  * Demos:

package/ChartsGrid/ChartsGrid.js

@@ -14,6 +14,7 @@ var _styles = require("@mui/material/styles");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _chartsGridClasses = require("./chartsGridClasses");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["vertical", "horizontal"];
 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); }
@@ -62,6 +63,7 @@ function ChartsGrid(props) {
     props,
     name: 'MuiChartsGrid'
   });
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
       vertical,
       horizontal
@@ -102,8 +104,8 @@ function ChartsGrid(props) {
       formattedValue,
       offset
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
-      y1: yScale.range()[0],
-      y2: yScale.range()[1],
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
       x1: offset,
       x2: offset,
       className: classes.verticalLine
@@ -113,8 +115,8 @@ function ChartsGrid(props) {
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
       y1: offset,
       y2: offset,
-      x1: xScale.range()[0],
-      x2: xScale.range()[1],
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
       className: classes.horizontalLine
     }, `horizontal-${formattedValue}`))]
   }));

package/ChartsTooltip/utils.js

@@ -59,8 +59,10 @@ function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
-    const handleOut = () => {
-      setMousePosition(null);
+    const handleOut = event => {
+      if (event.pointerType !== 'mouse') {
+        setMousePosition(null);
+      }
     };
     const handleMove = event => {
       setMousePosition({