@mui/x-charts 8.16.0 → 8.18.0

package/esm/BarChart/BarLabel/BarLabel.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin"];
+const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes", "skipAnimation", "layout", "xOrigin", "yOrigin", "placement"];
 import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -23,8 +23,6 @@ export const BarLabelComponent = styled('text', {
   stroke: 'none',
   fill: (theme.vars || theme)?.palette?.text?.primary,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  textAnchor: 'middle',
-  dominantBaseline: 'central',
   pointerEvents: 'none',
   opacity: 1,
   [`&.${barLabelClasses.faded}`]: {
@@ -38,7 +36,40 @@ function BarLabel(inProps) {
   });
   const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const animatedProps = useAnimateBarLabel(props);
-  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps, animatedProps));
+  const textAnchor = getTextAnchor(props);
+  const dominantBaseline = getDominantBaseline(props);
+  return /*#__PURE__*/_jsx(BarLabelComponent, _extends({
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline
+  }, otherProps, animatedProps));
+}
+function getTextAnchor({
+  placement,
+  layout,
+  xOrigin,
+  x
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return x < xOrigin ? 'end' : 'start';
+    }
+    return 'middle';
+  }
+  return 'middle';
+}
+function getDominantBaseline({
+  placement,
+  layout,
+  yOrigin,
+  y
+}) {
+  if (placement === 'outside') {
+    if (layout === 'horizontal') {
+      return 'central';
+    }
+    return y < yOrigin ? 'auto' : 'hanging';
+  }
+  return 'central';
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -54,6 +85,12 @@ process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
   layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  placement: PropTypes.oneOf(['center', 'outside']),
   seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   skipAnimation: PropTypes.bool.isRequired,
   /**

package/esm/BarChart/BarLabel/BarLabelItem.d.ts

@@ -67,11 +67,17 @@ export type BarLabelItemProps = Omit<BarLabelOwnerState, 'isFaded' | 'isHighligh
    * @returns {string} The formatted label.
    */
   barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered in the center or outside the bar.
+   * @default 'center'
+   */
+  barLabelPlacement?: BarLabelProps['placement'];
 };
 /**
  * @ignore - internal component.
  */
-declare function BarLabelItem(props: BarLabelItemProps): React.JSX.Element | null;
+declare function BarLabelItem(props: BarLabelItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace BarLabelItem {
   var propTypes: any;
 }

package/esm/BarChart/BarLabel/BarLabelItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout"],
+const _excluded = ["seriesId", "classes", "color", "dataIndex", "barLabel", "slots", "slotProps", "xOrigin", "yOrigin", "x", "y", "width", "height", "value", "skipAnimation", "layout", "barLabelPlacement"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -30,7 +30,8 @@ function BarLabelItem(props) {
       height,
       value,
       skipAnimation,
-      layout
+      layout,
+      barLabelPlacement
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -62,6 +63,7 @@ function BarLabelItem(props) {
         y,
         width,
         height,
+        placement: barLabelPlacement,
         className: classes.root
       }),
       ownerState

package/esm/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
 import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: ProcessedBarSeriesData[];
+  processedSeries: ProcessedBarSeriesData;
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };
 /**
  * @ignore - internal component.
  */
-declare function BarLabelPlot(props: BarLabelPlotProps): React.JSX.Element;
+declare function BarLabelPlot(props: BarLabelPlotProps): import("react/jsx-runtime").JSX.Element | null;
 export { BarLabelPlot };

package/esm/BarChart/BarLabel/BarLabelPlot.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["bars", "skipAnimation"];
-import * as React from 'react';
+const _excluded = ["processedSeries", "skipAnimation"];
 import { BarLabelItem } from "./BarLabelItem.js";
 import { useUtilityClasses } from "../barClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,44 +9,50 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function BarLabelPlot(props) {
   const {
-      bars,
+      processedSeries,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    seriesId,
+    data
+  } = processedSeries;
   const classes = useUtilityClasses();
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: bars.flatMap(({
-      seriesId,
-      data
-    }) => /*#__PURE__*/_jsx("g", {
-      className: classes.seriesLabels,
-      "data-series": seriesId,
-      children: data.map(({
-        xOrigin,
-        yOrigin,
-        x,
-        y,
-        dataIndex,
-        color,
-        value,
-        width,
-        height,
-        layout
-      }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
-        seriesId: seriesId,
-        dataIndex: dataIndex,
-        value: value,
-        color: color,
-        xOrigin: xOrigin,
-        yOrigin: yOrigin,
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical'
-      }, other), dataIndex))
-    }, seriesId))
-  });
+  const barLabel = processedSeries.barLabel ?? props.barLabel;
+  if (!barLabel) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    className: classes.seriesLabels,
+    "data-series": seriesId,
+    children: data.map(({
+      xOrigin,
+      yOrigin,
+      x,
+      y,
+      dataIndex,
+      color,
+      value,
+      width,
+      height,
+      layout
+    }) => /*#__PURE__*/_jsx(BarLabelItem, _extends({
+      seriesId: seriesId,
+      dataIndex: dataIndex,
+      value: value,
+      color: color,
+      xOrigin: xOrigin,
+      yOrigin: yOrigin,
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+      skipAnimation: skipAnimation ?? false,
+      layout: layout ?? 'vertical'
+    }, other, {
+      barLabel: barLabel,
+      barLabelPlacement: processedSeries.barLabelPlacement || 'center'
+    }), dataIndex))
+  }, seriesId);
 }
 export { BarLabelPlot };

package/esm/BarChart/BarPlot.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarElementSlotProps, BarElementSlots } from "./BarElement.js";
 import { BarItemIdentifier } from "../models/index.js";
-import { BarLabelItemProps, BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
+import { BarLabelSlotProps, BarLabelSlots } from "./BarLabel/BarLabelItem.js";
+import { BarItem, BarLabelContext } from "./BarLabel/index.js";
 export interface BarPlotSlots extends BarElementSlots, BarLabelSlots {}
 export interface BarPlotSlotProps extends BarElementSlotProps, BarLabelSlotProps {}
-export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
+export interface BarPlotProps {
   /**
    * If `true`, animations are skipped.
    * @default undefined
@@ -20,6 +21,15 @@ export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
    * Defines the border radius of the bar element.
    */
   borderRadius?: number;
+  /**
+   * @deprecated Use `barLabel` in the chart series instead.
+   * If provided, the function will be used to format the label of the bar.
+   * It can be set to 'value' to display the current value.
+   * @param {BarItem} item The item to format.
+   * @param {BarLabelContext} context data about the bar.
+   * @returns {string} The formatted label.
+   */
+  barLabel?: 'value' | ((item: BarItem, context: BarLabelContext) => string | null | undefined);
   /**
    * The props used for each component slot.
    * @default {}
@@ -42,7 +52,7 @@ export interface BarPlotProps extends Pick<BarLabelItemProps, 'barLabel'> {
  *
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
-declare function BarPlot(props: BarPlotProps): React.JSX.Element;
+declare function BarPlot(props: BarPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BarPlot {
   var propTypes: any;
 }

package/esm/BarChart/BarPlot.js

@@ -135,11 +135,11 @@ function BarPlot(props) {
           }, dataIndex);
         })
       }, seriesId);
-    }), barLabel && /*#__PURE__*/_jsx(BarLabelPlot, _extends({
-      bars: completedData,
+    }), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
+      processedSeries: processedSeries,
       skipAnimation: skipAnimation,
       barLabel: barLabel
-    }, other))]
+    }, other), processedSeries.seriesId))]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -155,6 +155,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
    * @returns {string} The formatted label.
    */
   barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
+  /**
+   * The placement of the bar label.
+   * It controls whether the label is rendered inside or outside the bar.
+   */
+  barLabelPlacement: PropTypes.oneOf(['outside', 'inside']),
   /**
    * Defines the border radius of the bar element.
    */

package/esm/BarChart/seriesConfig/{extremums.d.ts → bar/extremums.d.ts}

@@ -1,3 +1,3 @@
-import { CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { CartesianExtremumGetter } from "../../../internals/plugins/models/seriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'bar'>;
 export declare const getExtremumY: CartesianExtremumGetter<'bar'>;

package/esm/BarChart/seriesConfig/{extremums.js → bar/extremums.js}

@@ -1,4 +1,4 @@
-import { findMinMax } from "../../internals/findMinMax.js";
+import { findMinMax } from "../../../internals/findMinMax.js";
 const createResult = (data, direction) => {
   if (direction === 'x') {
     return {

package/esm/BarChart/seriesConfig/bar/getColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorProcessor } from "../../../internals/plugins/models/index.js";
+declare const getColor: ColorProcessor<'bar'>;
+export default getColor;

package/esm/BarChart/seriesConfig/{getColor.js → bar/getColor.js}

@@ -1,17 +1,25 @@
+import { getSeriesColorFn } from "../../../internals/getSeriesColorFn.js";
 const 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;
+  const getSeriesColor = getSeriesColorFn(series);
   if (valueColorScale) {
     return dataIndex => {
       if (dataIndex === undefined) {
         return series.color;
       }
       const value = series.data[dataIndex];
-      const color = value === null ? series.color : valueColorScale(value);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : valueColorScale(value);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
@@ -22,13 +30,28 @@ const getColor = (series, xAxis, yAxis) => {
         return series.color;
       }
       const value = bandValues[dataIndex];
-      const color = value === null ? series.color : bandColorScale(value);
+      const color = value === null ? getSeriesColor({
+        value,
+        dataIndex
+      }) : bandColorScale(value);
       if (color === null) {
-        return series.color;
+        return getSeriesColor({
+          value,
+          dataIndex
+        });
       }
       return color;
     };
   }
-  return () => series.color;
+  return dataIndex => {
+    if (dataIndex === undefined) {
+      return series.color;
+    }
+    const value = series.data[dataIndex];
+    return getSeriesColor({
+      value,
+      dataIndex
+    });
+  };
 };
 export default getColor;

package/esm/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -0,0 +1,3 @@
+import type { GetSeriesWithDefaultValues } from "../../../internals/plugins/models/seriesConfig/index.js";
+declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
+export default getSeriesWithDefaultValues;

package/esm/BarChart/seriesConfig/bar/legend.d.ts

@@ -0,0 +1,3 @@
+import { LegendGetter } from "../../../internals/plugins/models/index.js";
+declare const legendGetter: LegendGetter<'bar'>;
+export default legendGetter;

package/esm/BarChart/seriesConfig/{legend.js → bar/legend.js}

@@ -1,4 +1,4 @@
-import { getLabel } from "../../internals/getLabel.js";
+import { getLabel } from "../../../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,

package/esm/BarChart/seriesConfig/bar/seriesProcessor.d.ts

@@ -0,0 +1,3 @@
+import { SeriesProcessor } from "../../../internals/plugins/models/index.js";
+declare const seriesProcessor: SeriesProcessor<'bar'>;
+export default seriesProcessor;

package/esm/BarChart/seriesConfig/{seriesProcessor.js → bar/seriesProcessor.js}

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../internals/stackSeries.js";
+import { getStackingGroups } from "../../../internals/stackSeries.js";
 const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {

package/esm/BarChart/seriesConfig/bar/tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { AxisTooltipGetter, TooltipGetter } from "../../../internals/plugins/models/index.js";
+declare const tooltipGetter: TooltipGetter<'bar'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'bar', 'x' | 'y'>;
+export default tooltipGetter;

package/esm/BarChart/seriesConfig/{tooltip.js → bar/tooltip.js}

@@ -1,4 +1,4 @@
-import { getLabel } from "../../internals/getLabel.js";
+import { getLabel } from "../../../internals/getLabel.js";
 const tooltipGetter = params => {
   const {
     series,

package/esm/BarChart/seriesConfig/bar/tooltipPosition.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipItemPositionGetter } from "../../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'>;
+export default tooltipItemPositionGetter;

package/esm/BarChart/seriesConfig/{tooltipPosition.js → bar/tooltipPosition.js}

@@ -1,4 +1,4 @@
-import { getBarDimensions } from "../useBarPlotData.js";
+import { getBarDimensions } from "../../useBarPlotData.js";
 const tooltipItemPositionGetter = params => {
   const {
     series,

package/esm/BarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
 import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
-export declare const seriesConfig: ChartSeriesTypeConfig<'bar'>;
+export declare const barSeriesConfig: ChartSeriesTypeConfig<'bar'>;

package/esm/BarChart/seriesConfig/index.js

@@ -1,11 +1,11 @@
-import { getExtremumX, getExtremumY } from "./extremums.js";
-import seriesProcessor from "./seriesProcessor.js";
-import legendGetter from "./legend.js";
-import getColor from "./getColor.js";
-import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
-import tooltipItemPositionGetter from "./tooltipPosition.js";
-import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
-export const seriesConfig = {
+import { getExtremumX, getExtremumY } from "./bar/extremums.js";
+import seriesProcessor from "./bar/seriesProcessor.js";
+import legendGetter from "./bar/legend.js";
+import getColor from "./bar/getColor.js";
+import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.js";
+import tooltipItemPositionGetter from "./bar/tooltipPosition.js";
+import getSeriesWithDefaultValues from "./bar/getSeriesWithDefaultValues.js";
+export const barSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,

package/esm/BarChart/types.d.ts

@@ -12,6 +12,8 @@ export type AnimationData = {
 export interface ProcessedBarSeriesData {
   seriesId: SeriesId;
   data: ProcessedBarData[];
+  barLabel?: BarSeriesType['barLabel'];
+  barLabelPlacement?: BarSeriesType['barLabelPlacement'];
 }
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;

package/esm/BarChart/useBarPlotData.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import getColor from "./seriesConfig/getColor.js";
+import getColor from "./seriesConfig/bar/getColor.js";
 import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
@@ -55,8 +55,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0
+          xOrigin: Math.round(xScale(0) ?? 0),
+          yOrigin: Math.round(yScale(0) ?? 0)
         }, barDimensions, {
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],
@@ -91,6 +91,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       }
       return {
         seriesId,
+        barLabel: series[seriesId].barLabel,
+        barLabelPlacement: series[seriesId].barLabelPlacement,
         data: seriesDataPoints
       };
     });

package/esm/ChartDataProvider/ChartDataProvider.d.ts

@@ -42,7 +42,7 @@ export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeries
  * </ChartDataProvider>
  * ```
  */
-declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): React.JSX.Element;
+declare function ChartDataProvider<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartDataProvider {
   var propTypes: any;
 }

package/esm/ChartsAxis/ChartsAxis.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
 export interface ChartsAxisProps {
   /**
@@ -21,7 +20,7 @@ export interface ChartsAxisProps {
  *
  * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
+declare function ChartsAxis(props: ChartsAxisProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsAxis {
   var propTypes: any;
 }

package/esm/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
 /**
  * Demos:
@@ -9,7 +8,7 @@ import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
  *
  * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
  */
-declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
+declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsAxisHighlight {
   var propTypes: any;
 }

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -7,4 +6,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element[] | null;
+}): import("react/jsx-runtime").JSX.Element[] | null;

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
 import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 /**
@@ -7,4 +6,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element[] | null;
+}): import("react/jsx-runtime").JSX.Element[] | null;

package/esm/ChartsBrushOverlay/ChartsBrushOverlay.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 export interface ChartsBrushOverlayProps {}
 /**
  * Component that renders visual feedback during brush interaction
  */
-export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): React.JSX.Element | null;
+export declare function ChartsBrushOverlay(props: ChartsBrushOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/ChartsClipPath/ChartsClipPath.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export type ChartsClipPathProps = {
   /**
    * The id of the clip path.
@@ -21,7 +20,7 @@ export type ChartsClipPathProps = {
  *
  * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
  */
-declare function ChartsClipPath(props: ChartsClipPathProps): React.JSX.Element;
+declare function ChartsClipPath(props: ChartsClipPathProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsClipPath {
   var propTypes: any;
 }

package/esm/ChartsClipPath/ChartsClipPath.js

@@ -1,7 +1,6 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/ChartsGrid/ChartsGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 export interface ChartsGridProps {
   /**
@@ -23,7 +22,7 @@ export interface ChartsGridProps {
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-declare function ChartsGrid(inProps: ChartsGridProps): React.JSX.Element;
+declare function ChartsGrid(inProps: ChartsGridProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartsGrid {
   var propTypes: any;
 }

package/esm/ChartsGrid/ChartsGrid.js

@@ -3,7 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["vertical", "horizontal"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';

package/esm/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ComputedYAxis } from "../models/axis.js";
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridHorizontalProps {
@@ -10,5 +9,5 @@ interface ChartsGridHorizontalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): React.JSX.Element;
+export declare function ChartsGridHorizontal(props: ChartsGridHorizontalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { ComputedXAxis } from "../models/axis.js";
 import { ChartsGridClasses } from "./chartsGridClasses.js";
 interface ChartsGridVerticalProps {
@@ -10,5 +9,5 @@ interface ChartsGridVerticalProps {
 /**
  * @ignore - internal component.
  */
-export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): import("react/jsx-runtime").JSX.Element;
 export {};