@mui/x-charts 7.7.0 → 7.8.0

package/esm/context/CartesianProvider/computeValue.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
+import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
+import { getTickNumber } from '../../hooks/useTicks';
+import { getScale } from '../../internals/getScale';
+import { getAxisExtremum } from './getAxisExtremum';
+const getRange = (drawingArea, axisName, isReverse) => {
+  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return isReverse ? range.reverse() : range;
+};
+const isDateData = data => data?.[0] instanceof Date;
+function createDateFormatter(axis, range) {
+  const timeScale = scaleTime(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  const allAxis = [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+  const completeAxis = {};
+  allAxis.forEach((axis, axisIndex) => {
+    const isDefaultAxis = axisIndex === 0;
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
+    const range = getRange(drawingArea, axisName, axis.reverse);
+    if (isBandScaleConfig(axis)) {
+      const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+      const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+      // Reverse range because ordinal scales are presented from top to bottom on y-axis
+      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      completeAxis[axis.id] = _extends({
+        categoryGapRatio,
+        barGapRatio
+      }, axis, {
+        scale: scaleBand(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (isPointScaleConfig(axis)) {
+      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      completeAxis[axis.id] = _extends({}, axis, {
+        scale: scalePoint(axis.data, scaleRange),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
+      return;
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const extremums = [axis.min ?? minData, axis.max ?? maxData];
+    const tickNumber = getTickNumber(_extends({}, axis, {
+      range,
+      domain: extremums
+    }));
+    const scale = getScale(scaleType, extremums, range).nice(tickNumber);
+    const [minDomain, maxDomain] = scale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = _extends({}, axis, {
+      scaleType: scaleType,
+      scale: scale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/esm/context/CartesianProvider/getAxisExtremum.js

@@ -0,0 +1,21 @@
+const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
+  const getter = getters[chartType];
+  const series = formattedSeries[chartType]?.series ?? {};
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    isDefaultAxis
+  }) ?? [null, null];
+  const [minData, maxData] = acc;
+  if (minData === null || maxData === null) {
+    return [minChartTypeData, maxChartTypeData];
+  }
+  if (minChartTypeData === null || maxChartTypeData === null) {
+    return [minData, maxData];
+  }
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+  const charTypes = Object.keys(getters);
+  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [null, null]);
+};

package/esm/context/CartesianProvider/index.js

@@ -0,0 +1,10 @@
+import { computeValue } from './computeValue';
+import { normalizeAxis } from './normalizeAxis';
+export * from './CartesianProvider';
+export * from './CartesianContext';
+export * from './useCartesianContext';
+const cartesianProviderUtils = {
+  computeValue,
+  normalizeAxis
+};
+export { cartesianProviderUtils };

package/esm/context/CartesianProvider/normalizeAxis.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const normalizeAxis = (axis, dataset, axisName) => {
+  return axis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+};

package/esm/context/CartesianProvider/useCartesianContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CartesianContext } from './CartesianContext';
+export const useCartesianContext = () => {
+  const {
+    data
+  } = React.useContext(CartesianContext);
+  return data;
+};

package/esm/hooks/useAxisEvents.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useSvgRef } from './useSvgRef';
 import { useDrawingArea } from './useDrawingArea';
 function getAsANumber(value) {
@@ -21,7 +21,7 @@ export const useAxisEvents = disableAxisListener => {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const {
     dispatch
   } = React.useContext(InteractionContext);
@@ -38,10 +38,7 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -89,7 +86,7 @@ export const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -114,8 +111,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/esm/hooks/useColorScale.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 export function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -13,7 +13,7 @@ export function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }

package/esm/hooks/useScale.js

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
@@ -9,7 +8,7 @@ import { isBandScale } from '../internals/isBandScale';
  */
 export function getValueToPositionMapper(scale) {
   if (isBandScale(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }
@@ -17,7 +16,7 @@ export function useXScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].scale;
 }
@@ -25,7 +24,7 @@ export function useYScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].scale;
 }

package/esm/hooks/useTicks.js

@@ -34,7 +34,8 @@ export function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/esm/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CartesianContext } from '../../../context/CartesianContextProvider';
+import { useCartesianContext } from '../../../context/CartesianProvider';
 import { DrawingContext } from '../../../context/DrawingProvider';
 import { useDrawingArea } from '../../../hooks';
 import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
@@ -28,7 +28,7 @@ export function ChartsAxesGradients() {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   return /*#__PURE__*/_jsxs("defs", {
     children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
       const gradientId = getGradientId(axisId, 'y');

package/esm/internals/getSVGPoint.js

@@ -0,0 +1,11 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/esm/internals/index.js

@@ -6,19 +6,25 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
 // hooks
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useDrawingArea } from '../hooks/useDrawingArea';
+export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
+export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
+export { useLineChartProps } from '../LineChart/useLineChartProps';
+export { useBarChartProps } from '../BarChart/useBarChartProps';
 
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getSVGPoint';
 
 // contexts
 
-export * from '../context/CartesianContextProvider';
+export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
+export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
 export * from '../context/SeriesContextProvider';
 export * from '../context/ZAxisContextProvider';
-
 // series configuration
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/esm/internals/utils.js

@@ -3,18 +3,6 @@ export function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
 }
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}
-
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/hooks/useAxisEvents.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAxisEvents = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
-var _utils = require("../internals/utils");
+var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
 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); }
@@ -29,7 +29,7 @@ const useAxisEvents = disableAxisListener => {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const {
     dispatch
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -46,10 +46,7 @@ const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -97,7 +94,7 @@ const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -109,7 +106,7 @@ const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svgRef.current, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -122,8 +119,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useChartDimensions.d.ts

@@ -1,5 +1,5 @@
 import { LayoutConfig } from '../models/layout';
-declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig['margin']) => {
+declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig["margin"]) => {
     left: number;
     top: number;
     right: number;

package/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeriesType } from '../internals';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ColorProcessorsConfig } from '../models/plugin';
 export declare function useColorProcessor<T extends ChartSeriesType>(seriesType: T): ColorProcessorsConfig<ChartSeriesType>;
 export declare function useColorProcessor(): ColorProcessorsConfig<ChartSeriesType>;

package/hooks/useColorScale.js

@@ -7,7 +7,7 @@ exports.useXColorScale = useXColorScale;
 exports.useYColorScale = useYColorScale;
 exports.useZColorScale = useZColorScale;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 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; }
@@ -15,7 +15,7 @@ function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -23,7 +23,7 @@ function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }

package/hooks/useDrawingArea.d.ts

@@ -1,8 +1,2 @@
-export declare function useDrawingArea(): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    bottom: number;
-    right: number;
-};
+import { DrawingArea } from '../context/DrawingProvider';
+export declare function useDrawingArea(): DrawingArea;

package/hooks/useScale.js

@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var React = _interopRequireWildcard(require("react"));
-var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-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; }
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -19,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 function getValueToPositionMapper(scale) {
   if ((0, _isBandScale.isBandScale)(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }
@@ -27,7 +24,7 @@ function useXScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].scale;
 }
@@ -35,7 +32,7 @@ function useYScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].scale;
 }

package/hooks/useTicks.js

@@ -43,7 +43,8 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.7.0
+ * @mui/x-charts v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-export declare function useChartGradient(): (axisId: string, direction: 'x' | 'y') => string;
+import { AxisId } from '../../../models/axis';
+export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y") => string;
 export declare function ChartsAxesGradients(): React.JSX.Element;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianContextProvider = require("../../../context/CartesianContextProvider");
+var _CartesianProvider = require("../../../context/CartesianProvider");
 var _DrawingProvider = require("../../../context/DrawingProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
@@ -38,7 +38,7 @@ function ChartsAxesGradients() {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  } = (0, _CartesianProvider.useCartesianContext)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
     children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
       const gradientId = getGradientId(axisId, 'y');