@mui/x-charts 7.1.1 → 7.3.0

package/BarChart/BarChart.js

@@ -374,11 +374,26 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   width: _propTypes.default.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
@@ -411,11 +426,26 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   })),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,

package/BarChart/BarPlot.js

@@ -15,10 +15,9 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
 var _axis = require("../models/axis");
 var _constants = require("../constants");
+var _getColor = _interopRequireDefault(require("./getColor"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick"];
-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 && Object.prototype.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; }
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -28,6 +27,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
+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 && Object.prototype.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; }
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -83,6 +84,9 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = xAxisConfig;
+        if ((0, _axis.isBandScaleConfig)(yAxisConfig) || (0, _axis.isPointScaleConfig)(yAxisConfig)) {
+          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+        }
       } else {
         if (!(0, _axis.isBandScaleConfig)(yAxisConfig)) {
           throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}".`);
@@ -91,9 +95,13 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = yAxisConfig;
+        if ((0, _axis.isBandScaleConfig)(xAxisConfig) || (0, _axis.isPointScaleConfig)(xAxisConfig)) {
+          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be a continuous type to display the bar series of id "${seriesId}".`);
+        }
       }
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -105,8 +113,7 @@ const useAggregatedData = () => {
       });
       const barOffset = groupIndex * (barWidth + offset);
       const {
-        stackedData,
-        color
+        stackedData
       } = series[seriesId];
       return stackedData.map((values, dataIndex) => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
@@ -122,7 +129,7 @@ const useAggregatedData = () => {
           yOrigin: yScale(0),
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color,
+          color: colorGetter(dataIndex),
           highlightScope: series[seriesId].highlightScope
         };
       });

package/BarChart/extremums.js

@@ -19,7 +19,7 @@ const getValueExtremum = params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === 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]);
+    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]);
 };

package/BarChart/getColor.d.ts

@@ -0,0 +1,3 @@
+import { AxisDefaultized } from '../models/axis';
+import { DefaultizedBarSeriesType } from '../models/seriesType/bar';
+export default function getColor(series: DefaultizedBarSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized): (dataIndex: number) => string;

package/BarChart/getColor.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getColor;
+function getColor(series, xAxis, yAxis) {
+  const verticalLayout = series.layout === 'vertical';
+  const bandColorScale = verticalLayout ? xAxis.colorScale : yAxis.colorScale;
+  const valueColorScale = verticalLayout ? yAxis.colorScale : xAxis.colorScale;
+  const bandValues = verticalLayout ? xAxis.data : yAxis.data;
+  if (valueColorScale) {
+    return dataIndex => {
+      const value = series.data[dataIndex];
+      const color = value === null ? series.color : valueColorScale(value);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  if (bandColorScale) {
+    return dataIndex => {
+      const value = bandValues[dataIndex];
+      const color = value === null ? series.color : bandColorScale(value);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  return () => series.color;
+}

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.3.0
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📄 Support [unknown and estimated row count in server-side pagination](https://mui.com/x/react-data-grid/pagination/#index-based-pagination) (#12490) @MBilalShafi
+- 🎨 Support color scales in Charts (#12490) @alexfauquette
+  Add a [`colorMap` configuration](https://mui.com/x/react-charts/styling/#values-color) to an axis, and the chart will use it to select colors.
+  Each impacted chart ([bar charts](https://mui.com/x/react-charts/bars/#color-scale), [line charts](https://mui.com/x/react-charts/lines/#color-scale), [scatter charts](https://mui.com/x/react-charts/scatter/#color-scale)) has a dedicated section explaining how this color map is impacting it.
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/f0066606-3486-4c4e-b3be-7fdd56d763c3" alt="scatter chart with gradient along y-axis" />
+
+- 🌍 Improve Danish (da-DK) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.3.0`
+
+- [DataGrid] Fix calling `onCellEditStop` on error (#12747) @sai6855
+- [DataGrid] Fix column resize (#12792) @romgrk
+- [DataGrid] Fix column separators (#12808) @romgrk
+- [DataGrid] Limit panel width to not exceed screen width (#12799) @cherniavskii
+- [DataGrid] Support advanced server-side pagination use cases (#12474) @MBilalShafi
+- [DataGrid] Support state export and restore on grid density (#12671) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#12784) @EmilBahnsen
+
+#### `@mui/x-data-grid-pro@7.3.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.3.0`, plus:
+
+- [DataGridPro] Implement header filter height (#12666) @romgrk
+
+#### `@mui/x-data-grid-premium@7.3.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.3.0`.
+
+### Charts
+
+#### Breaking change
+
+A typo fix:
+
+```diff
+- ContinuouseScaleName
++ ContinuousScaleName
+```
+
+#### `@mui/x-charts@7.3.0`
+
+- [charts] Add `dataIndex` to series `valueFormatter` (#12745) @JCQuintas
+- [charts] Add color scale (#12490) @alexfauquette
+- [charts] Do not document the usage of `DEFAULT_X_AXIS_KEY` and `DEFAULT_Y_AXIS_KEY` (#12780) @alexfauquette
+- [charts] Export more utils (#12744) @alexfauquette
+- [charts] Fix passing slot props down to `PieArcLabel` (#12806) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.3.0`
+
+- [TreeView] Support `defaultMuiPrevented` on the `onFocus` prop of the root slot (#12813) @flaviendelangle
+
+### Docs
+
+- [docs] Add grid cell display example to the migration guide (#12793) @romgrk
+- [docs] Use charts classes objects (#12781) @alexfauquette
+- [docs] Fix layout shift on demos (#12816) @zanivan
+- [test] Increase timeout for test that sometimes fail on `DateTimeRangePicker` (#12786) @LukasTy
+
+### Core
+
+- [docs-infra] Prepare infra to document charts interfaces (#12653) @alexfauquette
+
+## 7.2.0
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Make grid colors customizable through the MUI themes API
+- 🌍 Improve French (fr-FR), German (de-DE), and Swedish (sv-SE) locales on the Data Grid and Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.2.0`
+
+- [DataGrid] Add missing `api` property to `GridCallbackDetails` (#12742) @sai6855
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12722) @cherniavskii
+- [DataGrid] Fix column vertical border (#12741) @romgrk
+- [DataGrid] Fix invalid date error when filtering `date`/`dateTime` columns (#12709) @cherniavskii
+- [DataGrid] Fix overflow with dynamic row height (#12683) @romgrk
+- [DataGrid] Make colors customizable (#12614) @romgrk
+- [l10n] Improve French (fr-FR) locale (#12755) @derek-0000
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+
+#### `@mui/x-data-grid-pro@7.2.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.2.0`.
+
+#### `@mui/x-data-grid-premium@7.2.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.2.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working when cell loses focus (#12724) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.2.0`
+
+- [fields] Fix field editing after closing the picker (#12675) @LukasTy
+- [l10n] Improve French (fr-FR) locale (#12692) @FaroukBel
+- [l10n] Improve German (de-DE) locale (#12752) @Jens-Schoen
+- [l10n] Improve Swedish (sv-SE) locale (#12731) @pontusdacke
+- [pickers] Fix desktop date time Pickers grid layout (#12748) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.2.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.2.0`, plus:
+
+- [DateTimeRangePicker] Fix desktop toolbar style (#12760) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.2.0`
+
+- [charts] Fix Bar chart with empty dataset throwing an error (#12708) @JCQuintas
+- [charts] Fix `tickLabelInterval` not working on `YAxis` (#12746) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.2.0`
+
+- [TreeView] Add a new lookup to access an item index without expansive computation (#12729) @flaviendelangle
+- [TreeView] Clean up usage of term "node" in internals (#12655) @noraleonte
+- [TreeView] Improve performance by removing `getNavigableChildrenIds` method (#12713) @flaviendelangle
+- [TreeView] Remove `state.items.itemTree` (#12717) @flaviendelangle
+- [TreeView] Remove remaining occurences of the word "node" in the codebase (#12712) @flaviendelangle
+- [TreeView] Return `instance` and `publicAPI` methods from plugin and populate the main objects inside `useTreeView` (#12650) @flaviendelangle
+- [TreeView] Fix behaviors when the item order changes (#12369) @flaviendelangle
+
+### Docs
+
+- [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas
+- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte
+- [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle
+- [docs] Explain how to clip plots with composition (#12679) @alexfauquette
+- [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96
+- [docs] Fix typo in Pickers v7 migration page (#12721) @bfaulk96
+
+### Core
+
+- [core] Support multiple resolved `l10n` PR packages (#12735) @LukasTy
+- [core] Update Netlify release references in release README (#12687) @LukasTy
+- [core] Use `describeTreeView` for icons tests (#12672) @flaviendelangle
+- [core] Use `describeTreeView` in existing tests for `useTreeViewItems` (#12732) @flaviendelangle
+
 ## 7.1.1
 
 _Apr 5, 2024_
@@ -2972,6 +3133,56 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.11
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 1 contributor who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.11`
+
+- [DataGrid] Fix virtualization memory leak (#12812) @romgrk
+
+#### `@mui/x-data-grid-pro@6.19.11` [![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@6.19.11`.
+
+#### `@mui/x-data-grid-premium@6.19.11` [![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@6.19.11`.
+
+## 6.19.10
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.10`
+
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12734) @cherniavskii
+- [DataGrid] Fix bug in suspense (#12754) @cherniavskii
+
+#### `@mui/x-data-grid-pro@6.19.10` [![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@6.19.10`.
+
+#### `@mui/x-data-grid-premium@6.19.10` [![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@6.19.10`.
+
+### Core
+
+- [core] Update the docs release source branch (#12685) @LukasTy
+
 ## 6.19.9
 
 _Apr 5, 2024_

package/ChartContainer/ChartContainer.js

@@ -15,6 +15,7 @@ var _useReducedMotion = require("../hooks/useReducedMotion");
 var _ChartsSurface = require("../ChartsSurface");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _HighlightProvider = require("../context/HighlightProvider");
+var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -53,7 +54,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
         dataset: dataset,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightProvider.HighlightProvider, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
               width: width,
               height: height,
               ref: handleRef,
@@ -61,7 +62,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
               title: title,
               desc: desc,
               disableAxisListener: disableAxisListener,
-              children: children
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), children]
             })
           })
         })
@@ -128,11 +129,26 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   width: _propTypes.default.number.isRequired,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
@@ -165,11 +181,26 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   })),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,

package/ChartsAxis/ChartsAxis.js

@@ -14,12 +14,12 @@ var _ChartsYAxis = require("../ChartsYAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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 getAxisId = propsValue => {
+const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {
     return null;
   }
   if (typeof propsValue === 'object') {
-    return propsValue.axisId ?? null;
+    return propsValue.axisId ?? defaultAxisId ?? null;
   }
   return propsValue;
 };
@@ -63,8 +63,8 @@ function ChartsAxis(props) {
 
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis);
-  const topId = getAxisId(topAxis);
-  const rightId = getAxisId(rightAxis);
+  const topId = getAxisId(topAxis, xAxisIds[0]);
+  const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
     throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }

package/ChartsClipPath/ChartsClipPath.js

@@ -8,7 +8,7 @@ exports.ChartsClipPath = ChartsClipPath;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../context/DrawingProvider");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -27,7 +27,7 @@ function ChartsClipPath(props) {
     top,
     width,
     height
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  } = (0, _useDrawingArea.useDrawingArea)();
   const offset = (0, _extends2.default)({
     top: 0,
     right: 0,

package/ChartsLegend/ChartsLegend.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _utils3 = require("./utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _DefaultChartsLegend = require("./DefaultChartsLegend");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -55,7 +55,7 @@ function ChartsLegend(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, props, {
     theme
   }));
-  const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
+  const drawingArea = (0, _hooks.useDrawingArea)();
   const series = React.useContext(_SeriesContextProvider.SeriesContext);
   const seriesToDisplay = (0, _utils3.getSeriesToDisplay)(series);
   const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -4,6 +4,9 @@ import { AxisInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
+type ChartSeriesDefaultizedWithColorGetter = ChartSeriesDefaultized<ChartSeriesType> & {
+    getColor: (dataIndex: number) => string;
+};
 export type ChartsAxisContentProps = {
     /**
      * Data identifying the triggered axis.
@@ -12,7 +15,7 @@ export type ChartsAxisContentProps = {
     /**
      * The series linked to the triggered axis.
      */
-    series: ChartSeriesDefaultized<ChartSeriesType>[];
+    series: ChartSeriesDefaultizedWithColorGetter[];
     /**
      * The properties of the triggered axis.
      */

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -13,6 +13,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
 var _utils2 = require("./utils");
+var _colorGetter = _interopRequireDefault(require("../internals/colorGetter"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -42,12 +43,16 @@ function ChartsAxisTooltipContent(props) {
         const item = series[seriesType].series[seriesId];
         const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-          rep.push(series[seriesType].series[seriesId]);
+          const seriesToAdd = series[seriesType].series[seriesId];
+          const color = (0, _colorGetter.default)(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
+          rep.push((0, _extends2.default)({}, seriesToAdd, {
+            getColor: color
+          }));
         }
       });
     });
     return rep;
-  }, [USED_AXIS_ID, isXaxis, series]);
+  }, [USED_AXIS_ID, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds]);
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -16,6 +16,12 @@ export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType>
      * Override or extend the styles applied to the component.
      */
     classes: ChartsTooltipClasses;
+    /**
+     * Get the color of the item with index `dataIndex`.
+     * @param {number} dataIndex The data index of the item.
+     * @returns {string} The color to display.
+     */
+    getColor: (dataIndex: number) => string;
     sx?: SxProps<Theme>;
 };
 declare function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _colorGetter = _interopRequireDefault(require("../internals/colorGetter"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -23,6 +25,16 @@ function ChartsItemTooltipContent(props) {
     contentProps
   } = props;
   const series = React.useContext(_SeriesContextProvider.SeriesContext)[itemData.type].series[itemData.seriesId];
+  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  const getColor = series.type === 'pie' ? (0, _colorGetter.default)(series) : (0, _colorGetter.default)(series, xAxis[series.xAxisKey ?? defaultXAxisId], yAxis[series.yAxisKey ?? defaultYAxisId]);
   const Content = content ?? _DefaultChartsItemTooltipContent.DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = (0, _utils.useSlotProps)({
     elementType: Content,
@@ -31,7 +43,8 @@ function ChartsItemTooltipContent(props) {
       itemData,
       series,
       sx,
-      classes
+      classes,
+      getColor
     },
     ownerState: {}
   });
@@ -46,6 +59,7 @@ process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   content: _propTypes.default.elementType,
   contentProps: _propTypes.default.shape({
     classes: _propTypes.default.object,
+    getColor: _propTypes.default.func,
     itemData: _propTypes.default.shape({
       dataIndex: _propTypes.default.number,
       seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,