@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.11

package/LineChart/useLineChartProps.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { calculateMargins } from "../internals/calculateMargins.js";
+import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
 
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -25,7 +26,6 @@ export const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
@@ -74,13 +74,11 @@ export const useLineChartProps = props => {
     yAxis,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: LINE_CHART_PLUGINS
   });
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -139,7 +137,6 @@ export const useLineChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/PieChart/PieChart.d.ts

@@ -7,11 +7,13 @@ import { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface PieChartProps extends Omit<ChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', [UseChartInteractionSignature, UseChartHighlightSignature]>, 'series'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * The series to display in the pie chart.
      * An array of [[PieSeriesType]] objects.

package/PieChart/PieChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -14,7 +14,10 @@ import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PIE_CHART_PLUGGINS = [useChartInteraction, useChartHighlight];
 const defaultMargin = {
   top: 5,
   bottom: 5,
@@ -68,11 +71,11 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     height,
     margin,
     colors,
-    disableAxisListener: true,
     highlightedItem,
     onHighlightChange,
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: PIE_CHART_PLUGGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
@@ -112,7 +115,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -120,12 +123,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -199,110 +196,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([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)
-    }), 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
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([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)
-    }), 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
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
+  width: PropTypes.number
 } : void 0;
 export { PieChart };

package/PieChart/PieChart.plugins.d.ts

@@ -0,0 +1,5 @@
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
+import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers';
+export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature];
+export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/PieChart/PieChart.plugins.js

@@ -0,0 +1,3 @@
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];

package/ScatterChart/ScatterChart.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -159,6 +159,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/ScatterChart/ScatterChart.plugins.d.ts

@@ -0,0 +1,12 @@
+import { UseChartZAxisSignature } from '../internals/plugins/featurePlugins/useChartZAxis';
+import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
+import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers';
+export type ScatterChartPluginsSignatures = [
+    UseChartZAxisSignature,
+    UseChartCartesianAxisSignature<'scatter'>,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature
+];
+export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginsSignatures>;

package/ScatterChart/ScatterChart.plugins.js

@@ -0,0 +1,5 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];

package/ScatterChart/useScatterChartProps.d.ts

@@ -8,6 +8,7 @@ import { ChartContainerProps } from '../ChartContainer';
 import type { ScatterChartProps } from './ScatterChart';
 import type { ScatterPlotProps } from './ScatterPlot';
 import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { ScatterChartPluginsSignatures } from './ScatterChart.plugins';
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -17,7 +18,7 @@ import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
     chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-    chartContainerProps: Omit<ChartContainerProps<"scatter">, "plugins">;
+    chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginsSignatures>;
     voronoiHandlerProps: ChartsVoronoiHandlerProps;
     chartsAxisProps: ChartsAxisProps;
     gridProps: ChartsGridProps;

package/ScatterChart/useScatterChartProps.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 import { calculateMargins } from "../internals/calculateMargins.js";
+import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -60,7 +61,8 @@ export const useScatterChartProps = props => {
     zAxis,
     highlightedItem,
     onHighlightChange,
-    className
+    className,
+    plugins: SCATTER_CHART_PLUGINS
   });
   const voronoiHandlerProps = {
     voronoiMaxRadius,

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsColor } from '../colorPalettes';
 import { ChartContainerProps } from '../ChartContainer';
 import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
@@ -87,6 +88,17 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
      * @default {}
      */
     slotProps?: SparkLineChartSlotProps;
+    /**
+     * Color palette used to colorize multiple series.
+     * @default rainbowSurgePalette
+     * @deprecated use the `color` prop instead
+     */
+    colors?: ChartContainerProps['colors'];
+    /**
+     * Color used to colorize the sparkline.
+     * @default rainbowSurgePalette[0]
+     */
+    color?: ChartsColor;
 }
 /**
  * Demos:

package/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
@@ -35,7 +35,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       width,
       height,
       margin = SPARKLINE_DEFAULT_MARGIN,
-      colors,
+      color,
+      colors: deprecatedColors,
       sx,
       showTooltip,
       showHighlight,
@@ -58,6 +59,12 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const colors = React.useMemo(() => {
+    if (color == null) {
+      return undefined;
+    }
+    return typeof color === 'function' ? mode => [color(mode)] : [color];
+  }, [color]);
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
@@ -84,7 +91,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     yAxis: [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, yAxis)],
-    colors: colors,
+    colors: colors ?? deprecatedColors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
@@ -127,9 +134,15 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }),
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
+   * @deprecated use the `color` prop instead
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -185,6 +198,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/colorPalettes/colorPalettes.d.ts

@@ -1,5 +1,7 @@
 export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
 export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
+export type ChartsColor = string | ChartsColorCallback;
 export declare const rainbowSurgePaletteLight: string[];
 export declare const rainbowSurgePaletteDark: string[];
 export declare const rainbowSurgePalette: ChartsColorPaletteCallback;

package/context/ChartProvider/ChartProvider.types.d.ts

@@ -24,12 +24,13 @@ export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignatu
      */
     svgRef: React.RefObject<SVGSVGElement | null>;
 };
+export type ChartPluginParams<TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'params'>;
 export interface ChartProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> {
     /**
      * Array of plugins used to add features to the chart.
      */
     plugins?: ConvertSignaturesIntoPlugins<TSignatures>;
-    pluginParams?: UseChartBaseProps<TSignatures> & MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'params'>;
+    pluginParams?: ChartPluginParams<TSignatures>;
     /**
      * The configuration helpers used to compute attributes according to the serries type.
      * @ignore Unstable props for internal usage.

package/hooks/useAxisEvents.d.ts

@@ -1 +0,0 @@
-export declare const useAxisEvents: (disableAxisListener: boolean) => void;

package/hooks/useAxisEvents.js

@@ -1,165 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
-import { getSVGPoint } from "../internals/getSVGPoint.js";
-import { useSvgRef } from "./useSvgRef.js";
-import { useStore } from "../internals/store/useStore.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
-import { useXAxes, useYAxes } from "./useAxis.js";
-function getAsANumber(value) {
-  return value instanceof Date ? value.getTime() : value;
-}
-export const useAxisEvents = disableAxisListener => {
-  const svgRef = useSvgRef();
-  const {
-    instance
-  } = useChartContext();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const store = useStore();
-  const usedXAxis = xAxisIds[0];
-  const usedYAxis = yAxisIds[0];
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const mousePosition = React.useRef({
-    isInChart: false,
-    x: -1,
-    y: -1
-  });
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || disableAxisListener || !store) {
-      return () => {};
-    }
-    function getNewAxisState(axisConfig, mouseValue) {
-      const {
-        scale,
-        data: axisData,
-        reverse
-      } = axisConfig;
-      if (!isBandScale(scale)) {
-        const value = scale.invert(mouseValue);
-        if (axisData === undefined) {
-          return {
-            value,
-            index: -1
-          };
-        }
-        const valueAsNumber = getAsANumber(value);
-        const closestIndex = axisData?.findIndex((pointValue, index) => {
-          const v = getAsANumber(pointValue);
-          if (v > valueAsNumber) {
-            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
-              return true;
-            }
-          }
-          if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
-              return true;
-            }
-          }
-          return false;
-        });
-        return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
-          index: closestIndex
-        };
-      }
-      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
-      if (dataIndex < 0 || dataIndex >= axisData.length) {
-        return null;
-      }
-      if (reverse) {
-        const reverseIndex = axisData.length - 1 - dataIndex;
-        return {
-          index: reverseIndex,
-          value: axisData[reverseIndex]
-        };
-      }
-      return {
-        index: dataIndex,
-        value: axisData[dataIndex]
-      };
-    }
-    const handleOut = () => {
-      mousePosition.current = {
-        isInChart: false,
-        x: -1,
-        y: -1
-      };
-      store.update(prev => _extends({}, prev, {
-        interaction: {
-          item: null,
-          axis: {
-            x: null,
-            y: null
-          }
-        }
-      }));
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
-      mousePosition.current.x = svgPoint.x;
-      mousePosition.current.y = svgPoint.y;
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
-        if (mousePosition.current.isInChart) {
-          store.update(prev => _extends({}, prev, {
-            interaction: {
-              item: null,
-              axis: {
-                x: null,
-                y: null
-              }
-            }
-          }));
-          mousePosition.current.isInChart = false;
-        }
-        return;
-      }
-      mousePosition.current.isInChart = true;
-      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      store.update(prev => _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
-            x: newStateX
-          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
-            y: newStateY
-          } : {})
-        })
-      }));
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
-      }
-      if (target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
-      }
-    };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointerout', handleOut);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointerout', handleOut);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
-    };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
-};

package/index.d.ts

@@ -15,7 +15,6 @@ export * from './ChartsLabel';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
 export * from './ChartsVoronoiHandler';
-export * from './ChartsOnAxisClickHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.10
+ * @mui/x-charts v8.0.0-alpha.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,7 +22,6 @@ export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";
-export * from "./ChartsOnAxisClickHandler/index.js";
 export * from "./BarChart/index.js";
 export * from "./LineChart/index.js";
 export * from "./PieChart/index.js";

package/internals/plugins/allPlugins.d.ts

@@ -11,4 +11,4 @@ export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesTyp
     UseChartHighlightSignature
 ];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartCartesianAxisSignature<keyof import("..").ChartsSeriesConfig>> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartHighlightSignature>)[];
+export declare const ALL_PLUGINS: (import("./models").ChartPlugin<UseChartInteractionSignature> | import("./models").ChartPlugin<UseChartZAxisSignature> | import("./models").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("./models").ChartPlugin<UseChartHighlightSignature>)[];