@mui/x-charts 8.6.0 → 8.7.0

package/LineChart/useLinePlotData.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLinePlotData = useLinePlotData;
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _isBandScale = require("../internals/isBandScale");
+var _getCurve = require("../internals/getCurve");
+var _hooks = require("../hooks");
+var _constants = require("../constants");
+function useLinePlotData(xAxes, yAxes) {
+  const seriesData = (0, _hooks.useLineSeriesContext)();
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const linePlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
+        linePlotData.push({
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return linePlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/ScatterChart/Scatter.js

@@ -12,15 +12,15 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _useScale = require("../hooks/useScale");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
 var _useChartVoronoi = require("../internals/plugins/featurePlugins/useChartVoronoi");
-var _ChartProvider = require("../context/ChartProvider");
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
+var _useScatterPlotData = require("./useScatterPlotData");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -55,37 +55,7 @@ function Scatter(props) {
     isFaded,
     isHighlighted
   } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const cleanData = React.useMemo(() => {
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-    const temp = [];
-    for (let i = 0; i < series.data.length; i += 1) {
-      const scatterPoint = series.data[i];
-      const x = getXPosition(scatterPoint.x);
-      const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside(x, y);
-      if (isInRange) {
-        const currentItem = {
-          seriesId: series.id,
-          dataIndex: i
-        };
-        const isItemHighlighted = isHighlighted(currentItem);
-        temp.push({
-          x,
-          y,
-          isHighlighted: isItemHighlighted,
-          isFaded: !isItemHighlighted && isFaded(currentItem),
-          id: scatterPoint.id,
-          seriesId: series.id,
-          type: 'scatter',
-          dataIndex: i,
-          color: colorGetter ? colorGetter(i) : color
-        });
-      }
-    }
-    return temp;
-  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, colorGetter, color, instance]);
-  const interactionItemProps = (0, _useInteractionItemProps.useInteractionAllItemProps)(cleanData, skipInteractionHandlers);
+  const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Marker,
@@ -101,21 +71,25 @@ function Scatter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
     className: classes.root,
-    children: cleanData.map((dataPoint, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
-      dataIndex: dataPoint.dataIndex,
-      color: dataPoint.color,
-      isHighlighted: dataPoint.isHighlighted,
-      isFaded: dataPoint.isFaded,
-      x: dataPoint.x,
-      y: dataPoint.y,
-      onClick: onItemClick && (event => onItemClick(event, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: dataPoint.dataIndex
-      })),
-      "data-highlighted": dataPoint.isHighlighted || undefined,
-      "data-faded": dataPoint.isFaded || undefined
-    }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
+    children: scatterPlotData.map((dataPoint, i) => {
+      const isItemHighlighted = isHighlighted(dataPoint);
+      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        isHighlighted: isItemHighlighted,
+        isFaded: isItemFaded,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'scatter',
+          seriesId: series.id,
+          dataIndex: dataPoint.dataIndex
+        })),
+        "data-highlighted": isItemHighlighted || undefined,
+        "data-faded": isItemFaded || undefined
+      }, skipInteractionHandlers ? undefined : (0, _useInteractionItemProps.getInteractionItemProps)(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

package/ScatterChart/useScatterPlotData.d.ts

@@ -0,0 +1,8 @@
+import { SeriesId } from "../models/seriesType/common.js";
+import { D3Scale } from "../models/axis.js";
+import { DefaultizedScatterSeriesType, ScatterValueType } from "../models/index.js";
+export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
+  dataIndex: number;
+  seriesId: SeriesId;
+  type: "scatter";
+})[];

package/ScatterChart/useScatterPlotData.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScatterPlotData = useScatterPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../hooks");
+function useScatterPlotData(series, xScale, yScale, isPointInside) {
+  return React.useMemo(() => {
+    const getXPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _hooks.getValueToPositionMapper)(yScale);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = isPointInside(x, y);
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          id: scatterPoint.id,
+          seriesId: series.id,
+          type: 'scatter',
+          dataIndex: i
+        });
+      }
+    }
+    return temp;
+  }, [xScale, yScale, series.data, series.id, isPointInside]);
+}

package/context/ChartApi.d.ts

@@ -0,0 +1,22 @@
+import type { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import type { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
+import type { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { ChartPublicAPI } from "../internals/plugins/models/index.js";
+export type PluginsPerSeriesType = {
+  line: LineChartPluginsSignatures;
+  scatter: ScatterChartPluginsSignatures;
+  bar: BarChartPluginsSignatures;
+  pie: PieChartPluginSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartApi<'composition'>
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;

package/context/ChartApi.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/context/ChartProvider/ChartContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/context/index.d.ts

@@ -1,2 +1,3 @@
 export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./useChartApiContext.js";
+export * from "./useChartApiContext.js";
+export type { ChartApi } from "./ChartApi.js";

package/context/useChartApiContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartApi } from "../ChartContainer/index.js";
+import { ChartApi } from "./ChartApi.js";
 /**
  * The `useChartApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

package/esm/BarChart/BarPlot.js

@@ -8,160 +8,14 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { barElementClasses } from "./barElementClasses.js";
 import { BarElement } from "./BarElement.js";
-import getColor from "./seriesConfig/getColor.js";
-import { useChartId, useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
+import { useDrawingArea, useXAxes, useYAxes } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
-import { checkScaleErrors } from "./checkScaleErrors.js";
-import { useBarSeriesContext } from "../hooks/useBarSeries.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useBarPlotData } from "./useBarPlotData.js";
 import { useUtilityClasses } from "./barClasses.js";
-
-/**
- * Solution of the equations
- * W = barWidth * N + offset * (N-1)
- * offset / (offset + barWidth) = r
- * @param bandWidth The width available to place bars.
- * @param numberOfGroups The number of bars to place in that space.
- * @param gapRatio The ratio of the gap between bars over the bar width.
- * @returns The bar width and the offset between bars.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getBandSize({
-  bandWidth: W,
-  numberOfGroups: N,
-  gapRatio: r
-}) {
-  if (r === 0) {
-    return {
-      barWidth: W / N,
-      offset: 0
-    };
-  }
-  const barWidth = W / (N + (N - 1) * r);
-  const offset = r * barWidth;
-  return {
-    barWidth,
-    offset
-  };
-}
-const useAggregatedData = () => {
-  const seriesData = useBarSeriesContext() ?? {
-    series: {},
-    stackingGroups: [],
-    seriesOrder: []
-  };
-  const drawingArea = useDrawingArea();
-  const chartId = useChartId();
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const masks = {};
-  const data = stackingGroups.flatMap(({
-    ids: seriesIds
-  }, groupIndex) => {
-    const xMin = drawingArea.left;
-    const xMax = drawingArea.left + drawingArea.width;
-    const yMin = drawingArea.top;
-    const yMax = drawingArea.top + drawingArea.height;
-    return seriesIds.map(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
-      const xAxisConfig = xAxis[xAxisId];
-      const yAxisConfig = yAxis[yAxisId];
-      const verticalLayout = series[seriesId].layout === 'vertical';
-      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxis, yAxisId, yAxis);
-      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-      const xScale = xAxisConfig.scale;
-      const yScale = yAxisConfig.scale;
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-      const bandWidth = baseScaleConfig.scale.bandwidth();
-      const {
-        barWidth,
-        offset
-      } = getBandSize({
-        bandWidth,
-        numberOfGroups: stackingGroups.length,
-        gapRatio: baseScaleConfig.barGapRatio
-      });
-      const barOffset = groupIndex * (barWidth + offset);
-      const {
-        stackedData,
-        data: currentSeriesData,
-        layout
-      } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
-        }
-        const values = stackedData[dataIndex];
-        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
-        const minValueCoord = Math.round(Math.min(...valueCoordinates));
-        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        const stackId = series[seriesId].stack;
-        const result = {
-          seriesId,
-          dataIndex,
-          layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
-          xOrigin: xScale(0) ?? 0,
-          yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color: colorGetter(dataIndex),
-          value: currentSeriesData[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
-        };
-        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
-        }
-        if (!masks[result.maskId]) {
-          masks[result.maskId] = {
-            id: result.maskId,
-            width: 0,
-            height: 0,
-            hasNegative: false,
-            hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
-            x: 0,
-            y: 0
-          };
-        }
-        const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
-        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
-        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
-      return {
-        seriesId,
-        data: seriesDataPoints
-      };
-    });
-  });
-  return {
-    completedData: data,
-    masksData: Object.values(masks)
-  };
-};
 const BarPlotRoot = styled('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
@@ -183,10 +37,6 @@ const BarPlotRoot = styled('g', {
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const {
-    completedData,
-    masksData
-  } = useAggregatedData();
   const {
       skipAnimation: inSkipAnimation,
       onItemClick,
@@ -196,6 +46,16 @@ function BarPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
+  const {
+    xAxis: xAxes
+  } = useXAxes();
+  const {
+    yAxis: yAxes
+  } = useYAxes();
+  const {
+    completedData,
+    masksData
+  } = useBarPlotData(useDrawingArea(), xAxes, yAxes);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsxs(BarPlotRoot, {

package/esm/BarChart/useBarPlotData.d.ts

@@ -0,0 +1,8 @@
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
+import { ChartDrawingArea } from "../hooks/index.js";
+import { MaskData, ProcessedBarSeriesData } from "./types.js";
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+};

package/esm/BarChart/useBarPlotData.js

@@ -0,0 +1,139 @@
+import getColor from "./seriesConfig/getColor.js";
+import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeriesContext } from "../hooks/useBarSeries.js";
+export function useBarPlotData(drawingArea, xAxes, yAxes) {
+  const seriesData = useBarSeriesContext() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const chartId = useChartId();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return seriesIds.map(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxes[xAxisId];
+      const yAxisConfig = yAxes[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        data: currentSeriesData,
+        layout
+      } = series[seriesId];
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
+        const values = stackedData[dataIndex];
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+        const stackId = series[seriesId].stack;
+        const result = {
+          seriesId,
+          dataIndex,
+          layout,
+          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          xOrigin: xScale(0) ?? 0,
+          yOrigin: yScale(0) ?? 0,
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          color: colorGetter(dataIndex),
+          value: currentSeriesData[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+        };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
+      }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+}
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,30 +1,10 @@
 import * as React from 'react';
-import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
-import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
-import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
-import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-type PluginsPerSeriesType = {
-  line: LineChartPluginsSignatures;
-  scatter: ScatterChartPluginsSignatures;
-  bar: BarChartPluginsSignatures;
-  pie: PieChartPluginSignatures;
-  composition: DefaultPluginSignatures;
-};
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *