@mui/x-charts 8.10.2 → 8.11.1

package/esm/hooks/useInteractionItemProps.js

@@ -14,25 +14,14 @@ export const useInteractionItemProps = (data, skip) => {
   const interactionActive = React.useRef(false);
   const onPointerEnter = React.useCallback(() => {
     interactionActive.current = true;
-    instance.setItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-    instance.setHighlight({
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+    instance.setItemInteraction(data);
+    instance.setHighlight(data);
+  }, [instance, data]);
   const onPointerLeave = React.useCallback(() => {
     interactionActive.current = false;
-    instance.removeItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
+    instance.removeItemInteraction(data);
     instance.clearHighlight();
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+  }, [instance, data]);
   React.useEffect(() => {
     return () => {
       /* Clean up state if this item is unmounted while active. */
@@ -67,10 +56,7 @@ export function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setItemInteraction(item);
-    instance.setHighlight({
-      seriesId: item.seriesId,
-      dataIndex: item.dataIndex
-    });
+    instance.setHighlight(item);
   }
   function onPointerLeave() {
     if (!item) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.10.2
+ * @mui/x-charts v8.11.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/getWordsByLines.d.ts

@@ -1,4 +1,5 @@
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto' | 'text-after-edge' | 'text-before-edge';
+export type ChartsTextAnchor = 'start' | 'middle' | 'end';
 export interface ChartsTextStyle extends React.CSSProperties {
   angle?: number;
   /**
@@ -6,6 +7,11 @@ export interface ChartsTextStyle extends React.CSSProperties {
    * @default 'central'
    */
   dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
 }
 export interface GetWordsByLinesParams {
   /**

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -1,5 +1,5 @@
 import { ChartPluginSignature } from "../../models/index.js";
-import { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ChartItemIdentifier, ChartSeriesType, type ChartItemIdentifierWithData } from "../../../../models/seriesType/config.js";
 export type Coordinate = {
   x: number;
   y: number;
@@ -13,7 +13,7 @@ export interface UseChartInteractionInstance {
    * Setter for the item the user is interacting with.
    * @param {ChartItemIdentifier} newItem The identifier of the item.
    */
-  setItemInteraction: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  setItemInteraction: (newItem: ChartItemIdentifierWithData<ChartSeriesType>) => void;
   /**
    * Remove item interaction if the current if the provided item is still the one interacting.
    * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
@@ -30,7 +30,7 @@ export interface UseChartInteractionState {
     /**
      * The item currently interacting.
      */
-    item: null | ChartItemIdentifier<ChartSeriesType>;
+    item: null | ChartItemIdentifierWithData<ChartSeriesType>;
     /**
      * The x/y SVG coordinate of the "main" pointer
      */

package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+import type { ChartItemIdentifierWithData, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { AxisId, ChartsRotationAxisProps, ChartsRadiusAxisProps, PolarAxisDefaultized, ComputedXAxis, ComputedYAxis } from "../../../../models/axis.js";
 import { ChartsLabelMarkProps } from "../../../../ChartsLabel/ChartsLabelMark.js";
@@ -7,7 +7,7 @@ export interface ItemTooltip<T extends ChartSeriesType> {
   /**
    * An object that identifies the item to display.
    */
-  identifier: ChartItemIdentifier<T>;
+  identifier: ChartItemIdentifierWithData<T>;
   /**
    * The color associated with the item.
    */
@@ -59,7 +59,7 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<TSeriesType>;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: ChartItemIdentifierWithData<TSeriesType> | null;
 }) => (TSeriesType extends 'radar' ? ItemTooltipWithMultipleValues<TSeriesType> : ItemTooltip<TSeriesType>) | null;
 /**
  * If `axisId` is set to undefined, the default axis will be used.

package/esm/models/axis.d.ts

@@ -55,11 +55,6 @@ export interface ChartsAxisProps extends TickParams {
    * @default false
    */
   disableTicks?: boolean;
-  /**
-   * The fill color of the axis text.
-   * @default 'currentColor'
-   */
-  fill?: string;
   /**
    * The style applied to ticks text.
    */
@@ -79,11 +74,6 @@ export interface ChartsAxisProps extends TickParams {
    * The label of the axis.
    */
   label?: string;
-  /**
-   * The stroke color of the axis line.
-   * @default 'currentColor'
-   */
-  stroke?: string;
   /**
    * The size of the ticks.
    * @default 6

package/esm/models/seriesType/config.d.ts

@@ -21,6 +21,7 @@ export interface ChartsSeriesConfig {
      */
     seriesProp: BarSeriesType;
     itemIdentifier: BarItemIdentifier;
+    itemIdentifierWithData: BarItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -32,6 +33,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedLineSeriesType;
     seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
+    itemIdentifierWithData: LineItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -44,6 +46,7 @@ export interface ChartsSeriesConfig {
     seriesProp: ScatterSeriesType;
     valueType: ScatterValueType;
     itemIdentifier: ScatterItemIdentifier;
+    itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
   };
   pie: {
@@ -55,6 +58,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedPieSeriesType;
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
+    itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
   };
   radar: {
@@ -64,6 +68,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedRadarSeriesType;
     seriesProp: RadarSeriesType;
     itemIdentifier: RadarItemIdentifier;
+    itemIdentifierWithData: RadarItemIdentifier;
     valueType: number;
     axisType: 'polar';
   };
@@ -85,6 +90,7 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
   stackedData: [number, number][];
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
+export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {
   [key: string]: Readonly<T>;
 };

package/esm/models/seriesType/index.d.ts

@@ -18,6 +18,7 @@ type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeries
  */
 type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
+export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export * from "./line.js";
 export * from "./bar.js";
 export * from "./scatter.js";

package/hooks/animation/useAnimatePieArcLabel.js

@@ -41,8 +41,8 @@ function useAnimatePieArcLabel(props) {
   return (0, _useAnimate.useAnimate)({
     startAngle: props.startAngle,
     endAngle: props.endAngle,
-    innerRadius: props?.arcLabelRadius ?? props.innerRadius,
-    outerRadius: props?.arcLabelRadius ?? props.outerRadius,
+    innerRadius: props.arcLabelRadius ?? props.innerRadius,
+    outerRadius: props.arcLabelRadius ?? props.outerRadius,
     paddingAngle: props.paddingAngle,
     cornerRadius: props.cornerRadius
   }, {

package/hooks/useInteractionItemProps.d.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { SeriesItemIdentifier } from "../models/index.js";
+import { SeriesItemIdentifierWithData } from "../models/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { ChartItemIdentifier, ChartSeriesType } from "../models/seriesType/config.js";
+import { ChartSeriesType, type ChartItemIdentifierWithData } from "../models/seriesType/config.js";
 import { ChartInstance } from "../internals/plugins/models/index.js";
-export declare const useInteractionItemProps: (data: SeriesItemIdentifier, skip?: boolean) => {
+export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithData, skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => {
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData[], skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 }[];
-export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifier<ChartSeriesType>): {
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifierWithData<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.js

@@ -21,25 +21,14 @@ const useInteractionItemProps = (data, skip) => {
   const interactionActive = React.useRef(false);
   const onPointerEnter = React.useCallback(() => {
     interactionActive.current = true;
-    instance.setItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-    instance.setHighlight({
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+    instance.setItemInteraction(data);
+    instance.setHighlight(data);
+  }, [instance, data]);
   const onPointerLeave = React.useCallback(() => {
     interactionActive.current = false;
-    instance.removeItemInteraction({
-      type: data.type,
-      seriesId: data.seriesId,
-      dataIndex: data.dataIndex
-    });
+    instance.removeItemInteraction(data);
     instance.clearHighlight();
-  }, [instance, data.type, data.seriesId, data.dataIndex]);
+  }, [instance, data]);
   React.useEffect(() => {
     return () => {
       /* Clean up state if this item is unmounted while active. */
@@ -76,10 +65,7 @@ function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setItemInteraction(item);
-    instance.setHighlight({
-      seriesId: item.seriesId,
-      dataIndex: item.dataIndex
-    });
+    instance.setHighlight(item);
   }
   function onPointerLeave() {
     if (!item) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.10.2
+ * @mui/x-charts v8.11.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/getWordsByLines.d.ts

@@ -1,4 +1,5 @@
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto' | 'text-after-edge' | 'text-before-edge';
+export type ChartsTextAnchor = 'start' | 'middle' | 'end';
 export interface ChartsTextStyle extends React.CSSProperties {
   angle?: number;
   /**
@@ -6,6 +7,11 @@ export interface ChartsTextStyle extends React.CSSProperties {
    * @default 'central'
    */
   dominantBaseline?: ChartsTextBaseline;
+  /**
+   * The text anchor
+   * @default 'middle'
+   */
+  textAnchor?: ChartsTextAnchor;
 }
 export interface GetWordsByLinesParams {
   /**

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -1,5 +1,5 @@
 import { ChartPluginSignature } from "../../models/index.js";
-import { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ChartItemIdentifier, ChartSeriesType, type ChartItemIdentifierWithData } from "../../../../models/seriesType/config.js";
 export type Coordinate = {
   x: number;
   y: number;
@@ -13,7 +13,7 @@ export interface UseChartInteractionInstance {
    * Setter for the item the user is interacting with.
    * @param {ChartItemIdentifier} newItem The identifier of the item.
    */
-  setItemInteraction: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  setItemInteraction: (newItem: ChartItemIdentifierWithData<ChartSeriesType>) => void;
   /**
    * Remove item interaction if the current if the provided item is still the one interacting.
    * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
@@ -30,7 +30,7 @@ export interface UseChartInteractionState {
     /**
      * The item currently interacting.
      */
-    item: null | ChartItemIdentifier<ChartSeriesType>;
+    item: null | ChartItemIdentifierWithData<ChartSeriesType>;
     /**
      * The x/y SVG coordinate of the "main" pointer
      */

package/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+import type { ChartItemIdentifierWithData, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { AxisId, ChartsRotationAxisProps, ChartsRadiusAxisProps, PolarAxisDefaultized, ComputedXAxis, ComputedYAxis } from "../../../../models/axis.js";
 import { ChartsLabelMarkProps } from "../../../../ChartsLabel/ChartsLabelMark.js";
@@ -7,7 +7,7 @@ export interface ItemTooltip<T extends ChartSeriesType> {
   /**
    * An object that identifies the item to display.
    */
-  identifier: ChartItemIdentifier<T>;
+  identifier: ChartItemIdentifierWithData<T>;
   /**
    * The color associated with the item.
    */
@@ -59,7 +59,7 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<TSeriesType>;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: ChartItemIdentifierWithData<TSeriesType> | null;
 }) => (TSeriesType extends 'radar' ? ItemTooltipWithMultipleValues<TSeriesType> : ItemTooltip<TSeriesType>) | null;
 /**
  * If `axisId` is set to undefined, the default axis will be used.

package/models/axis.d.ts

@@ -55,11 +55,6 @@ export interface ChartsAxisProps extends TickParams {
    * @default false
    */
   disableTicks?: boolean;
-  /**
-   * The fill color of the axis text.
-   * @default 'currentColor'
-   */
-  fill?: string;
   /**
    * The style applied to ticks text.
    */
@@ -79,11 +74,6 @@ export interface ChartsAxisProps extends TickParams {
    * The label of the axis.
    */
   label?: string;
-  /**
-   * The stroke color of the axis line.
-   * @default 'currentColor'
-   */
-  stroke?: string;
   /**
    * The size of the ticks.
    * @default 6

package/models/seriesType/config.d.ts

@@ -21,6 +21,7 @@ export interface ChartsSeriesConfig {
      */
     seriesProp: BarSeriesType;
     itemIdentifier: BarItemIdentifier;
+    itemIdentifierWithData: BarItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -32,6 +33,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedLineSeriesType;
     seriesProp: LineSeriesType;
     itemIdentifier: LineItemIdentifier;
+    itemIdentifierWithData: LineItemIdentifier;
     valueType: number | null;
     canBeStacked: true;
     axisType: 'cartesian';
@@ -44,6 +46,7 @@ export interface ChartsSeriesConfig {
     seriesProp: ScatterSeriesType;
     valueType: ScatterValueType;
     itemIdentifier: ScatterItemIdentifier;
+    itemIdentifierWithData: ScatterItemIdentifier;
     axisType: 'cartesian';
   };
   pie: {
@@ -55,6 +58,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedPieSeriesType;
     seriesProp: PieSeriesType<MakeOptional<PieValueType, 'id'>>;
     itemIdentifier: PieItemIdentifier;
+    itemIdentifierWithData: PieItemIdentifier;
     valueType: DefaultizedPieValueType;
   };
   radar: {
@@ -64,6 +68,7 @@ export interface ChartsSeriesConfig {
     series: DefaultizedRadarSeriesType;
     seriesProp: RadarSeriesType;
     itemIdentifier: RadarItemIdentifier;
+    itemIdentifierWithData: RadarItemIdentifier;
     valueType: number;
     axisType: 'polar';
   };
@@ -85,6 +90,7 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
   stackedData: [number, number][];
 } : ChartsSeriesConfig[T]['series'];
 export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
+export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {
   [key: string]: Readonly<T>;
 };

package/models/seriesType/index.d.ts

@@ -18,6 +18,7 @@ type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeries
  */
 type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
+export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export * from "./line.js";
 export * from "./bar.js";
 export * from "./scatter.js";

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.10.2",
+  "version": "8.11.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
-  "main": "./index.js",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
@@ -35,9 +34,9 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.10.2",
-    "@mui/x-charts-vendor": "8.6.0",
-    "@mui/x-internal-gestures": "0.2.4"
+    "@mui/x-internal-gestures": "0.2.5",
+    "@mui/x-charts-vendor": "8.11.0",
+    "@mui/x-internals": "8.11.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -59,27 +58,28 @@
     "node": ">=14.0.0"
   },
   "type": "commonjs",
+  "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "require": {
         "types": "./index.d.ts",
         "default": "./index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
       }
     },
     "./*": {
-      "import": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
-      },
       "require": {
         "types": "./*/index.d.ts",
         "default": "./*/index.js"
+      },
+      "default": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
       }
     },
     "./esm": null