@mui/x-charts 7.1.1 → 7.3.0

package/internals/defaultizeColor.d.ts

@@ -39,7 +39,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     } | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
     color?: string | undefined;
-    valueFormatter?: (<V extends import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">>(value: V) => string) | undefined;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
 } | {
     type: "bar";
@@ -50,7 +50,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOffset?: import("..").StackOffsetType | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
     color: string;
-    valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
@@ -64,7 +64,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHover?: boolean | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
     color: string;
-    valueFormatter?: (<V_2 extends import("../models/seriesType").ScatterValueType>(value: V_2) => string) | undefined;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
@@ -82,7 +82,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     stackOffset?: import("..").StackOffsetType | undefined;
     id?: import("../models/seriesType/common").SeriesId | undefined;
     color: string;
-    valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
+    valueFormatter?: import("../models/seriesType/common").SeriesValueFormatter<number | null> | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;

package/internals/defaultizeValueFormatter.d.ts

@@ -1,7 +1,7 @@
-import { SeriesId } from '../models/seriesType/common';
-declare function defaultizeValueFormatter<ISeries extends {
-    valueFormatter?: IFormatter;
-}, IFormatter extends (v: any) => string>(series: Record<SeriesId, ISeries>, defaultValueFormatter: IFormatter): Record<SeriesId, ISeries & {
-    valueFormatter: IFormatter;
+import { SeriesId, SeriesValueFormatter } from '../models/seriesType/common';
+declare function defaultizeValueFormatter<TValue, ISeries extends {
+    valueFormatter?: SeriesValueFormatter<TValue>;
+}>(series: Record<SeriesId, ISeries>, defaultValueFormatter: SeriesValueFormatter<TValue>): Record<SeriesId, ISeries & {
+    valueFormatter: SeriesValueFormatter<TValue>;
 }>;
 export default defaultizeValueFormatter;

package/internals/getScale.d.ts

@@ -1,2 +1,2 @@
-import { ContinuouseScaleName, D3ContinuouseScale } from '../models/axis';
-export declare function getScale(scaleType: ContinuouseScaleName, domain: any[], range: any[]): D3ContinuouseScale;
+import { ContinuousScaleName, D3ContinuousScale } from '../models/axis';
+export declare function getScale(scaleType: ContinuousScaleName, domain: any[], range: any[]): D3ContinuousScale;

package/models/axis.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
-import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
+import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
 import { ChartsTextProps } from '../ChartsText';
+import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from './colorMapping';
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
     toString(): string;
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
-export type D3ContinuouseScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3ContinuousScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlots {
     /**
      * Custom component for the axis main line.
@@ -126,7 +127,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
     position?: 'top' | 'bottom';
 }
 export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
-export type ContinuouseScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 interface AxisScaleConfig {
     band: {
         scaleType: 'band';
@@ -143,37 +144,76 @@ interface AxisScaleConfig {
          * @default 0.1
          */
         barGapRatio: number;
+        colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
     } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
     point: {
         scaleType: 'point';
         scale: ScalePoint<number | Date | string>;
+        colorMap?: OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig;
     };
     log: {
         scaleType: 'log';
         scale: ScaleLogarithmic<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
     pow: {
         scaleType: 'pow';
         scale: ScalePower<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
     sqrt: {
         scaleType: 'sqrt';
         scale: ScalePower<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
     time: {
         scaleType: 'time';
         scale: ScaleTime<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
     utc: {
         scaleType: 'utc';
         scale: ScaleTime<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
     };
     linear: {
         scaleType: 'linear';
         scale: ScaleLinear<number, number>;
+        colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+    };
+}
+interface AxisScaleComputedConfig {
+    band: {
+        colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+    };
+    point: {
+        colorScale?: ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+    };
+    log: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+    };
+    pow: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+    };
+    sqrt: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+    };
+    time: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+    };
+    utc: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number | Date, string | null>;
+    };
+    linear: {
+        colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
     };
 }
 export type AxisValueFormatterContext = {
+    /**
+     * Location indicates where the value will be displayed.
+     * - `'tick'` The value is displayed on the axis ticks.
+     * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+     */
     location: 'tick' | 'tooltip';
 };
 export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
@@ -215,7 +255,7 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
      */
     reverse?: boolean;
 } & Partial<ChartsXAxisProps | ChartsYAxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
-export type AxisDefaultized<S extends ScaleName = ScaleName, V = any> = Omit<AxisConfig<S, V>, 'scaleType'> & AxisScaleConfig[S] & {
+export type AxisDefaultized<S extends ScaleName = ScaleName, V = any> = Omit<AxisConfig<S, V>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
     /**
      * An indication of the expected number of ticks.
      */

package/models/colorMapping.d.ts

@@ -0,0 +1,45 @@
+export interface ContinuousColorConfig<Value = number | Date> {
+    type: 'continuous';
+    /**
+     * The minimal value of the color scale.
+     * @default 0
+     */
+    min?: Value;
+    /**
+     * The maximal value of the color scale.
+     * @default 100
+     */
+    max?: Value;
+    /**
+     * The colors to render. Can either be and array with the extrem colors, or an interpolation function.
+     */
+    color: [string, string] | ((t: number) => string);
+}
+export interface PiecewiseColorConfig<Value = number | Date> {
+    type: 'piecewise';
+    /**
+     * The thresholds where color should change from one category to another.
+     */
+    thresholds: Value[];
+    /**
+     * The colors used for each band defined by `thresholds`.
+     * Should contain N+1 colors with N the number of thresholds.
+     */
+    colors: string[];
+}
+export interface OrdinalColorConfig<Value = number | Date | string> {
+    type: 'ordinal';
+    /**
+     * The value to map.
+     * If undefined, it will be integers from 0 to the number of colors.
+     */
+    values?: Value[];
+    /**
+     * The color palette.
+     */
+    colors: string[];
+    /**
+     * The color to use when an element is not part of the values.
+     */
+    unknownColor?: string;
+}

package/models/colorMapping.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/index.d.ts

@@ -1,4 +1,4 @@
 export * from './seriesType';
 export * from './layout';
 export * from './stacking';
-export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuouseScaleName, } from './axis';
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, } from './axis';

package/models/seriesType/common.d.ts

@@ -1,15 +1,23 @@
 import type { HighlightScope } from '../../context/HighlightProvider';
 import type { StackOffsetType, StackOrderType } from '../stacking';
 export type SeriesId = number | string;
+export type SeriesValueFormatterContext = {
+    /**
+     * The index of the value in the data array.
+     */
+    dataIndex: number;
+};
+export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string;
 export type CommonSeriesType<TValue> = {
     id?: SeriesId;
     color?: string;
     /**
      * Formatter used to render values in tooltip or other data display.
      * @param {TValue} value The series' value to render.
-     * @returns {string} The string to dispaly.
+     * @param {SeriesValueFormatterContext} context The rendering context of the value.
+     * @returns {string} The string to display.
      */
-    valueFormatter?: <V extends TValue>(value: V) => string;
+    valueFormatter?: SeriesValueFormatter<TValue>;
     highlightScope?: Partial<HighlightScope>;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';

package/models/seriesType/index.d.ts

@@ -14,3 +14,5 @@ export * from './bar';
 export * from './scatter';
 export * from './pie';
 export type { AllSeriesType, CartesianSeriesType, DefaultizedSeriesType, DefaultizedCartesianSeriesType, StackableSeriesType, };
+export declare function isDefaultizedBarSeries(series: DefaultizedSeriesType): series is DefaultizedBarSeriesType;
+export declare function isBarSeries(series: AllSeriesType): series is BarSeriesType;

package/models/seriesType/index.js

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  isDefaultizedBarSeries: true,
+  isBarSeries: true
+};
+exports.isBarSeries = isBarSeries;
+exports.isDefaultizedBarSeries = isDefaultizedBarSeries;
 var _line = require("./line");
 Object.keys(_line).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _line[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +24,7 @@ Object.keys(_line).forEach(function (key) {
 var _bar = require("./bar");
 Object.keys(_bar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _bar[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +36,7 @@ Object.keys(_bar).forEach(function (key) {
 var _scatter = require("./scatter");
 Object.keys(_scatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _scatter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +48,7 @@ Object.keys(_scatter).forEach(function (key) {
 var _pie = require("./pie");
 Object.keys(_pie).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _pie[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -46,4 +56,10 @@ Object.keys(_pie).forEach(function (key) {
       return _pie[key];
     }
   });
-});
+});
+function isDefaultizedBarSeries(series) {
+  return series.type === 'bar';
+}
+function isBarSeries(series) {
+  return series.type === 'bar';
+}

package/modern/BarChart/BarChart.js

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

package/modern/BarChart/BarPlot.js

@@ -7,9 +7,10 @@ import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
-import { isBandScaleConfig } from '../models/axis';
+import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { jsx as _jsx } from "react/jsx-runtime";
+import getColor from './getColor';
+
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -19,6 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -74,6 +76,9 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = xAxisConfig;
+        if (isBandScaleConfig(yAxisConfig) || isPointScaleConfig(yAxisConfig)) {
+          throw new Error(`MUI X Charts: ${yAxisKey === 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 (!isBandScaleConfig(yAxisConfig)) {
           throw new Error(`MUI X Charts: ${yAxisKey === 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}".`);
@@ -82,9 +87,13 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property.`);
         }
         baseScaleConfig = yAxisConfig;
+        if (isBandScaleConfig(xAxisConfig) || isPointScaleConfig(xAxisConfig)) {
+          throw new Error(`MUI X Charts: ${xAxisKey === 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 = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
       const bandWidth = baseScaleConfig.scale.bandwidth();
       const {
         barWidth,
@@ -96,8 +105,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));
@@ -113,7 +121,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/modern/BarChart/extremums.js

@@ -13,7 +13,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/modern/BarChart/getColor.js

@@ -0,0 +1,27 @@
+export default 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/modern/ChartContainer/ChartContainer.js

@@ -8,7 +8,9 @@ import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
+import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
@@ -44,7 +46,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
         dataset: dataset,
         children: /*#__PURE__*/_jsx(InteractionProvider, {
           children: /*#__PURE__*/_jsx(HighlightProvider, {
-            children: /*#__PURE__*/_jsx(ChartsSurface, {
+            children: /*#__PURE__*/_jsxs(ChartsSurface, {
               width: width,
               height: height,
               ref: handleRef,
@@ -52,7 +54,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
               title: title,
               desc: desc,
               disableAxisListener: disableAxisListener,
-              children: children
+              children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
             })
           })
         })
@@ -119,11 +121,26 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   width: PropTypes.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.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
@@ -156,11 +173,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.arrayOf(PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,

package/modern/ChartsAxis/ChartsAxis.js

@@ -6,12 +6,12 @@ import { ChartsXAxis } from '../ChartsXAxis';
 import { ChartsYAxis } from '../ChartsYAxis';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-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;
 };
@@ -55,8 +55,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/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from '../context/DrawingProvider';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * API:
@@ -18,7 +18,7 @@ function ChartsClipPath(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingContext);
+  } = useDrawingArea();
   const offset = _extends({
     top: 0,
     right: 0,

package/modern/ChartsLegend/ChartsLegend.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme } from '@mui/material/styles';
-import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
 import { DefaultChartsLegend } from './DefaultChartsLegend';
+import { useDrawingArea } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -46,7 +46,7 @@ function ChartsLegend(inProps) {
   const classes = useUtilityClasses(_extends({}, props, {
     theme
   }));
-  const drawingArea = React.useContext(DrawingContext);
+  const drawingArea = useDrawingArea();
   const series = React.useContext(SeriesContext);
   const seriesToDisplay = getSeriesToDisplay(series);
   const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -6,6 +6,7 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
 import { isCartesianSeriesType } from './utils';
+import colorGetter from '../internals/colorGetter';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -33,12 +34,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 = colorGetter(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]]);
+          rep.push(_extends({}, 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]);