@mui/x-charts 8.20.0 → 8.22.0

package/BarChart/BarPlot.js

@@ -21,6 +21,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useBarPlotData = require("./useBarPlotData");
 var _barClasses = require("./barClasses");
+var _animation = require("../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 const BarPlotRoot = (0, _styles.styled)('g', {
@@ -28,7 +29,9 @@ const BarPlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({
   [`& .${_barElementClasses.barElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });
 
@@ -95,6 +98,9 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
       data
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
@@ -104,11 +110,8 @@ function BarPlot(props) {
           dataIndex,
           color,
           maskId,
-          layout,
           x,
-          xOrigin,
           y,
-          yOrigin,
           width,
           height
         }) => {
@@ -143,6 +146,7 @@ function BarPlot(props) {
         })
       }, seriesId);
     }), completedData.map(processedSeries => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
+      className: classes.seriesLabels,
       processedSeries: processedSeries,
       skipAnimation: skipAnimation,
       barLabel: barLabel

package/BarChart/FocusedBar.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function FocusedBar(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/BarChart/FocusedBar.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedBar = FocusedBar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _hooks = require("../hooks");
+var _getBarDimensions = require("../internals/getBarDimensions");
+var _jsxRuntime = require("react/jsx-runtime");
+function FocusedBar(props) {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const barSeries = (0, _hooks.useBarSeriesContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  if (focusedItem === null || focusedItem.seriesType !== 'bar' || !barSeries) {
+    return null;
+  }
+  const series = barSeries?.series[focusedItem.seriesId];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const xAxisConfig = xAxis[xAxisId];
+  const yAxisConfig = yAxis[yAxisId];
+  const verticalLayout = barSeries.series[focusedItem.seriesId].layout === 'vertical';
+  const groupIndex = barSeries.stackingGroups.findIndex(group => group.ids.includes(focusedItem.seriesId));
+  const barDimensions = (0, _getBarDimensions.getBarDimensions)({
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    dataIndex: focusedItem.dataIndex,
+    numberOfGroups: barSeries.stackingGroups.length,
+    groupIndex
+  });
+  if (barDimensions === null) {
+    return null;
+  }
+  const {
+    x,
+    y,
+    height,
+    width
+  } = barDimensions;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    fill: "none",
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    strokeWidth: 2,
+    x: x - 3,
+    y: y - 3,
+    width: width + 6,
+    height: height + 6,
+    rx: 3,
+    ry: 3
+  }, props));
+}

package/BarChart/barElementClasses.d.ts

@@ -1,4 +1,4 @@
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface BarElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/BarChart/checkBarChartScaleErrors.d.ts

@@ -0,0 +1,7 @@
+import { type AxisId, type ComputedXAxis, type ComputedYAxis } from "../models/axis.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+export declare function checkBarChartScaleErrors(verticalLayout: boolean, seriesId: SeriesId, seriesDataLength: number, xAxisId: AxisId, xAxis: {
+  [axisId: AxisId]: Pick<ComputedXAxis, 'scaleType' | 'data'>;
+}, yAxisId: AxisId, yAxis: {
+  [axisId: AxisId]: Pick<ComputedYAxis, 'scaleType' | 'data'>;
+}): void;

package/BarChart/{checkScaleErrors.js → checkBarChartScaleErrors.js}

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkScaleErrors = checkScaleErrors;
+exports.checkBarChartScaleErrors = checkBarChartScaleErrors;
 var _warning = require("@mui/x-internals/warning");
 var _constants = require("../constants");
-var _axis = require("../models/axis");
 const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisIdName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
   return axisId === axisDefaultKey ? `The first \`${axisIdName}\`` : `The ${axisName} with id "${axisId}"`;
 };
-function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxis, yAxisId, yAxis) {
+function checkBarChartScaleErrors(verticalLayout, seriesId, seriesDataLength, xAxisId, xAxis, yAxisId, yAxis) {
   const xAxisConfig = xAxis[xAxisId];
   const yAxisConfig = yAxis[yAxisId];
   const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
@@ -22,18 +21,18 @@ function checkScaleErrors(verticalLayout, seriesId, series, xAxisId, xAxis, yAxi
   const continuousAxisId = verticalLayout ? yAxisId : xAxisId;
   const discreteAxisDirection = verticalLayout ? 'x' : 'y';
   const continuousAxisDirection = verticalLayout ? 'y' : 'x';
-  if (!(0, _axis.isBandScaleConfig)(discreteAxisConfig)) {
+  if (discreteAxisConfig.scaleType !== 'band') {
     throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should be of type "band" to display the bar series of id "${seriesId}".`);
   }
   if (discreteAxisConfig.data === undefined) {
     throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} should have data property.`);
   }
-  if ((0, _axis.isBandScaleConfig)(continuousAxisConfig) || (0, _axis.isPointScaleConfig)(continuousAxisConfig)) {
+  if (continuousAxisConfig.scaleType === 'band' || continuousAxisConfig.scaleType === 'point') {
     throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisId)} should be a continuous type to display the bar series of id "${seriesId}".`);
   }
   if (process.env.NODE_ENV !== 'production') {
-    if (discreteAxisConfig.data.length < series.stackedData.length) {
-      (0, _warning.warnOnce)([`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${series.stackedData.length} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
+    if (discreteAxisConfig.data.length < seriesDataLength) {
+      (0, _warning.warnOnce)([`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisId)} has less data (${discreteAxisConfig.data.length} values) than the bar series of id "${seriesId}" (${seriesDataLength} values).`, 'The axis data should have at least the same length than the series using it.'], 'error');
     }
   }
 }

package/BarChart/index.d.ts

@@ -2,6 +2,7 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
+export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { type BarProps } from "./AnimatedBarElement.js";

package/BarChart/index.js

@@ -67,6 +67,18 @@ Object.keys(_BarLabel).forEach(function (key) {
     }
   });
 });
+var _FocusedBar = require("./FocusedBar");
+Object.keys(_FocusedBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FocusedBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FocusedBar[key];
+    }
+  });
+});
 var _barElementClasses = require("./barElementClasses");
 Object.keys(_barElementClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/BarChart/seriesConfig/bar/extremums.d.ts

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

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

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

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

@@ -1,3 +1,5 @@
-import type { GetSeriesWithDefaultValues } from "../../../internals/plugins/models/seriesConfig/index.js";
-declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'>;
-export default getSeriesWithDefaultValues;
+import { type AllSeriesType } from "../../../models/seriesType/index.js";
+export declare function getSeriesWithDefaultValues<T extends 'bar'>(seriesData: AllSeriesType<T>, seriesIndex: number, colors: readonly string[]): AllSeriesType<T> & {
+  id: import("../../../index.js").SeriesId;
+  color: string;
+};

package/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.js

@@ -4,12 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getSeriesWithDefaultValues = getSeriesWithDefaultValues;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
+function getSeriesWithDefaultValues(seriesData, seriesIndex, colors) {
   return (0, _extends2.default)({}, seriesData, {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
     color: seriesData.color ?? colors[seriesIndex % colors.length]
   });
-};
-var _default = exports.default = getSeriesWithDefaultValues;
+}

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

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

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

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

package/BarChart/seriesConfig/bar/tooltipPosition.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _useBarPlotData = require("../../useBarPlotData");
+var _getBarDimensions = require("../../../internals/getBarDimensions");
 const tooltipItemPositionGetter = params => {
   const {
     series,
@@ -22,7 +22,7 @@ const tooltipItemPositionGetter = params => {
   if (axesConfig.x === undefined || axesConfig.y === undefined) {
     return null;
   }
-  const dimensions = (0, _useBarPlotData.getBarDimensions)({
+  const dimensions = (0, _getBarDimensions.getBarDimensions)({
     verticalLayout: itemSeries.layout === 'vertical',
     xAxisConfig: axesConfig.x,
     yAxisConfig: axesConfig.y,

package/BarChart/seriesConfig/index.d.ts

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

package/BarChart/seriesConfig/index.js

@@ -12,7 +12,7 @@ var _legend = _interopRequireDefault(require("./bar/legend"));
 var _getColor = _interopRequireDefault(require("./bar/getColor"));
 var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
-var _getSeriesWithDefaultValues = _interopRequireDefault(require("./bar/getSeriesWithDefaultValues"));
+var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
 const barSeriesConfig = exports.barSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -22,5 +22,5 @@ const barSeriesConfig = exports.barSeriesConfig = {
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues
 };

package/BarChart/types.d.ts

@@ -5,15 +5,15 @@ export type AnimationData = {
   y: number;
   width: number;
   height: number;
-  yOrigin: number;
-  xOrigin: number;
-  layout: BarSeriesType['layout'];
 };
 export interface ProcessedBarSeriesData {
   seriesId: SeriesId;
   data: ProcessedBarData[];
   barLabel?: BarSeriesType['barLabel'];
   barLabelPlacement?: BarSeriesType['barLabelPlacement'];
+  layout: 'vertical' | 'horizontal';
+  xOrigin: number;
+  yOrigin: number;
 }
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
@@ -26,4 +26,7 @@ export interface MaskData extends AnimationData {
   id: string;
   hasNegative: boolean;
   hasPositive: boolean;
+  xOrigin: number;
+  yOrigin: number;
+  layout: 'horizontal' | 'vertical';
 }

package/BarChart/useBarChartProps.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { BarChartProps } from "./BarChart.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { BarPlotProps } from "./BarPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
-import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { ChartsAxisProps } from "../ChartsAxis/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type BarPlotProps } from "./BarPlot.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
+import { type ChartsAxisProps } from "../ChartsAxis/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { BarChartPluginSignatures } from "./BarChart.plugins.js";
+import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/BarChart/useBarPlotData.d.ts

@@ -1,23 +1,8 @@
-import { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } 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";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
+import { type ChartDrawingArea } from "../hooks/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+import { type 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[];
-};
-export declare function getBarDimensions(params: {
-  verticalLayout: boolean;
-  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
-  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
-  series: ChartSeriesDefaultized<'bar'>;
-  dataIndex: number;
-  numberOfGroups: number;
-  groupIndex: number;
-}): {
-  x: number;
-  y: number;
-  height: number;
-  width: number;
-} | null;
+};

package/BarChart/useBarPlotData.js

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBarDimensions = getBarDimensions;
 exports.useBarPlotData = useBarPlotData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _getColor = _interopRequireDefault(require("./seriesConfig/bar/getColor"));
 var _hooks = require("../hooks");
-var _checkScaleErrors = require("./checkScaleErrors");
+var _checkBarChartScaleErrors = require("./checkBarChartScaleErrors");
 var _useBarSeries = require("../hooks/useBarSeries");
+var _getBarDimensions = require("../internals/getBarDimensions");
 function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
     series: {},
@@ -35,18 +35,21 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
     return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const layout = series[seriesId].layout;
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
       const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      (0, _checkBarChartScaleErrors.checkBarChartScaleErrors)(verticalLayout, seriesId, series[seriesId].stackedData.length, xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
+      const xOrigin = Math.round(xScale(0) ?? 0);
+      const yOrigin = Math.round(yScale(0) ?? 0);
       const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
       const seriesDataPoints = [];
       for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
-        const barDimensions = getBarDimensions({
+        const barDimensions = (0, _getBarDimensions.getBarDimensions)({
           verticalLayout,
           xAxisConfig,
           yAxisConfig,
@@ -61,10 +64,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         const stackId = series[seriesId].stack;
         const result = (0, _extends2.default)({
           seriesId,
-          dataIndex,
-          layout: series[seriesId].layout,
-          xOrigin: Math.round(xScale(0) ?? 0),
-          yOrigin: Math.round(yScale(0) ?? 0)
+          dataIndex
         }, barDimensions, {
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],
@@ -80,16 +80,16 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
             height: 0,
             hasNegative: false,
             hasPositive: false,
-            layout: result.layout,
-            xOrigin: xScale(0),
-            yOrigin: yScale(0),
+            layout,
+            xOrigin,
+            yOrigin,
             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.width = layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = 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);
         const value = result.value ?? 0;
@@ -101,7 +101,10 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         seriesId,
         barLabel: series[seriesId].barLabel,
         barLabelPlacement: series[seriesId].barLabelPlacement,
-        data: seriesDataPoints
+        data: seriesDataPoints,
+        layout,
+        xOrigin,
+        yOrigin
       };
     });
   });
@@ -109,79 +112,4 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
     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
-  };
-}
-function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
-  const isVerticalAndPositive = verticalLayout && baseValue > 0;
-  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
-  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
-  return reverse ? !invertStartCoordinate : invertStartCoordinate;
-}
-function getBarDimensions(params) {
-  const {
-    verticalLayout,
-    xAxisConfig,
-    yAxisConfig,
-    series,
-    dataIndex,
-    numberOfGroups,
-    groupIndex
-  } = params;
-  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
-  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
-  const {
-    barWidth,
-    offset
-  } = getBandSize({
-    bandWidth: baseScaleConfig.scale.bandwidth(),
-    numberOfGroups,
-    gapRatio: baseScaleConfig.barGapRatio
-  });
-  const barOffset = groupIndex * (barWidth + offset);
-  const xScale = xAxisConfig.scale;
-  const yScale = yAxisConfig.scale;
-  const baseValue = baseScaleConfig.data[dataIndex];
-  const seriesValue = series.data[dataIndex];
-  if (seriesValue == null) {
-    return null;
-  }
-  const values = series.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 barSize = seriesValue === 0 ? 0 : Math.max(series.minBarSize, maxValueCoord - minValueCoord);
-  const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
-  return {
-    x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
-    y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
-    height: verticalLayout ? barSize : barWidth,
-    width: verticalLayout ? barWidth : barSize
-  };
 }