@mui/x-charts 8.19.0 → 8.21.0

package/esm/ChartContainer/ChartContainer.js

@@ -208,6 +208,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   /**
@@ -269,6 +270,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -322,6 +324,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -367,6 +370,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -413,6 +417,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -458,6 +463,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -503,6 +509,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -552,6 +559,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -601,6 +609,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
@@ -646,6 +655,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })]).isRequired),
   /**
@@ -738,6 +748,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -790,6 +801,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -834,6 +846,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -879,6 +892,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -923,6 +937,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -967,6 +982,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -1015,6 +1031,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -1063,6 +1080,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -1107,6 +1125,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })]).isRequired),
   /**
@@ -1165,6 +1184,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1216,6 +1236,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1259,6 +1280,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1303,6 +1325,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1346,6 +1369,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1389,6 +1413,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1436,6 +1461,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1483,6 +1509,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1526,6 +1553,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   })]).isRequired),

package/esm/ChartsGrid/ChartsHorizontalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridHorizontal(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -15,19 +19,21 @@ export function ChartsGridHorizontal(props) {
   const {
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    tickSpacing
   } = axis;
   const yTicks = useTicks({
     scale,
     tickNumber,
     tickInterval,
+    tickSpacing,
     direction: 'y'
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: yTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isYInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: start,

package/esm/ChartsGrid/ChartsVerticalGrid.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
 import { GridLine } from "./styledComponents.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */
 export function ChartsGridVertical(props) {
+  const {
+    instance
+  } = useChartContext();
   const {
     axis,
     start,
@@ -15,19 +19,21 @@ export function ChartsGridVertical(props) {
   const {
     scale,
     tickNumber,
-    tickInterval
+    tickInterval,
+    tickSpacing
   } = axis;
   const xTicks = useTicks({
     scale,
     tickNumber,
     tickInterval,
+    tickSpacing,
     direction: 'x'
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: xTicks.map(({
       value,
       offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
+    }) => !instance.isXInside(offset) ? null : /*#__PURE__*/_jsx(GridLine, {
       y1: start,
       y2: end,
       x1: offset,

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -23,6 +23,7 @@ import { useSvgRef } from "../hooks/index.js";
 import { selectorBrushShouldPreventTooltip } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectorReturnFalse = () => false;
+const selectorReturnNull = () => null;
 function getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush) {
   if (shouldPreventBecauseOfBrush) {
     return selectorReturnFalse;
@@ -85,7 +86,7 @@ function ChartsTooltipContainer(inProps) {
   const isOpen = useSelector(store, getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush));
   const lastInteraction = useSelector(store, selectorChartsLastInteraction);
   const computedAnchor = lastInteraction === 'keyboard' ? 'node' : anchor;
-  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : () => null, [position]);
+  const itemPosition = useSelector(store, trigger === 'item' && computedAnchor === 'node' ? selectorChartsTooltipItemPosition : selectorReturnNull, position);
   React.useEffect(() => {
     const svgElement = svgRef.current;
     if (svgElement === null) {

package/esm/ChartsXAxis/ChartsSingleXAxisTicks.js

@@ -43,6 +43,7 @@ function ChartsSingleXAxisTicks(inProps) {
     tickPlacement,
     tickLabelPlacement,
     tickLabelMinGap,
+    tickSpacing,
     height: axisHeight
   } = defaultizedProps;
   const drawingArea = useDrawingArea();
@@ -58,6 +59,7 @@ function ChartsSingleXAxisTicks(inProps) {
     tickInterval,
     tickPlacement,
     tickLabelPlacement,
+    tickSpacing,
     direction: 'x'
   });
   const visibleLabels = getVisibleLabels(xTicks, {

package/esm/ChartsXAxis/ChartsXAxisImpl.js

@@ -64,7 +64,9 @@ export function ChartsXAxisImpl(_ref) {
   const Label = slots?.axisLabel ?? ChartsText;
   const axisLabelProps = useSlotProps({
     elementType: Label,
+    // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     externalSlotProps: slotProps?.axisLabel,
+    // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     additionalProps: {
       style: _extends({}, theme.typography.body1, {
         lineHeight: 1,