@mui/x-charts 6.0.0-alpha.6 → 6.0.0-alpha.8

package/BarChart/BarChart.d.ts

@@ -1,16 +1,33 @@
 import * as React from 'react';
+import { BarPlotSlotComponentProps, BarPlotSlotsComponent } from './BarPlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotsComponent, ChartsLegendSlotComponentProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<BarSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: BarChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BarChartSlotComponentProps;
+    layout?: BarSeriesType['layout'];
 }
 declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -31,6 +31,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     colors,
     dataset,
     sx,
+    layout,
     tooltip,
     axisHighlight,
     legend,
@@ -38,41 +39,64 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
+  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
+  const defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  };
+  const defaultizedAxisHighlight = (0, _extends2.default)({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'bar'
-    }, s)),
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis ?? [{
-      id: _constants.DEFAULT_X_AXIS_KEY,
-      scaleType: 'band',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [(0, _extends2.default)({
+      id: _constants.DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [(0, _extends2.default)({
+      id: _constants.DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined),
     colors: colors,
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
-      x: "band"
-    }, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, defaultizedAxisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -85,7 +109,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
-    y: _propTypes.default.oneOf(['line', 'none'])
+    y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -101,8 +125,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -115,6 +144,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   desc: _propTypes.default.string,
   disableAxisListener: _propTypes.default.bool,
   height: _propTypes.default.number,
+  layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -129,8 +159,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   legend: _propTypes.default.shape({
@@ -147,6 +182,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     spacing: _propTypes.default.number
   }),
   margin: _propTypes.default.shape({
@@ -169,8 +206,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -183,6 +225,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     }),
     id: _propTypes.default.string,
     label: _propTypes.default.string,
+    layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
     stack: _propTypes.default.string,
     stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
@@ -191,6 +234,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     xAxisKey: _propTypes.default.string,
     yAxisKey: _propTypes.default.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
   tooltip: _propTypes.default.shape({
@@ -213,8 +266,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -237,15 +295,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -261,15 +321,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))
 } : void 0;

package/BarChart/BarElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentProps } from '@mui/base';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -15,7 +16,28 @@ export interface BarElementOwnerState {
 }
 export declare function getBarElementUtilityClass(slot: string): string;
 export declare const lineElementClasses: BarElementClasses;
+export declare const BarElementPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: BarElementOwnerState;
+}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
     highlightScope?: Partial<HighlightScope>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: {
+        bar?: SlotComponentProps<'path', {}, BarElementOwnerState>;
+    };
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: {
+        /**
+         * The component that renders the root.
+         * @default BarElementPath
+         */
+        bar?: React.ElementType;
+    };
 };
 export declare function BarElement(props: BarElementProps): React.JSX.Element;

package/BarChart/BarElement.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarElement = BarElement;
+exports.BarElementPath = void 0;
 exports.getBarElementUtilityClass = getBarElementUtilityClass;
 exports.lineElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
@@ -18,7 +20,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function getBarElementUtilityClass(slot) {
@@ -49,13 +51,16 @@ const BarElementPath = (0, _styles.styled)('rect', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
+exports.BarElementPath = BarElementPath;
 function BarElement(props) {
   const {
       id,
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -81,12 +86,18 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarElementPath, (0, _extends2.default)({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  })));
+  const Bar = slots?.bar ?? BarElementPath;
+  const barProps = (0, _utils.useSlotProps)({
+    elementType: Bar,
+    externalSlotProps: slotProps?.bar,
+    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));
 }

package/BarChart/BarPlot.d.ts

@@ -1,2 +1,15 @@
 import * as React from 'react';
-export declare function BarPlot(): React.JSX.Element | null;
+import { BarElementProps } from './BarElement';
+export interface BarPlotSlotsComponent {
+    bar?: React.JSXElementConstructor<BarElementProps>;
+}
+export interface BarPlotSlotComponentProps {
+    bar?: Partial<BarElementProps>;
+}
+export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
+}
+declare function BarPlot(props: BarPlotProps): React.JSX.Element | null;
+declare namespace BarPlot {
+    var propTypes: any;
+}
+export { BarPlot };

package/BarChart/BarPlot.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarPlot = BarPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
@@ -38,7 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     offset
   };
 }
-function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -65,27 +68,37 @@ function BarPlot() {
         const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
         const xAxisConfig = xAxis[xAxisKey];
         const yAxisConfig = yAxis[yAxisKey];
-        if (!(0, _axis.isBandScaleConfig)(xAxisConfig)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        const verticalLayout = series[seriesId].layout === 'vertical';
+        let baseScaleConfig;
+        if (verticalLayout) {
+          if (!(0, _axis.isBandScaleConfig)(xAxisConfig)) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          }
+          if (xAxis[xAxisKey].data === undefined) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          }
+          baseScaleConfig = xAxisConfig;
+        } else {
+          if (!(0, _axis.isBandScaleConfig)(yAxisConfig)) {
+            throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          }
+          if (yAxis[yAxisKey].data === undefined) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          }
+          baseScaleConfig = yAxisConfig;
         }
         const xScale = xAxisConfig.scale;
         const yScale = yAxisConfig.scale;
-
-        // Currently assuming all bars are vertical
-        const bandWidth = xScale.bandwidth();
+        const bandWidth = baseScaleConfig.scale.bandwidth();
         const {
           barWidth,
           offset
         } = getBandSize({
           bandWidth,
           numberOfGroups: stackingGroups.length,
-          gapRatio: xAxisConfig.barGapRatio
+          gapRatio: baseScaleConfig.barGapRatio
         });
-
-        // @ts-ignore TODO: fix when adding a correct API for customisation
+        const barOffset = groupIndex * (barWidth + offset);
         const {
           stackedData,
           color
@@ -93,18 +106,34 @@ function BarPlot() {
         return stackedData.map((values, dataIndex) => {
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
-            y: yScale(value),
-            height: yScale(baseline) - yScale(value),
-            width: barWidth,
+            x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(baseline),
+            y: verticalLayout ? yScale(value) : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+            height: verticalLayout ? Math.abs(yScale(baseline) - yScale(value)) : barWidth,
+            width: verticalLayout ? barWidth : Math.abs(xScale(baseline) - xScale(value)),
             color: color,
             highlightScope: series[seriesId].highlightScope
-          }, `${seriesId}-${dataIndex}`);
+          }, props), `${seriesId}-${dataIndex}`);
         });
       });
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/BarChart/extremums.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExtremumY = exports.getExtremumX = void 0;
-const getExtremumX = params => {
+const getBaseExtremum = params => {
   const {
     axis
   } = params;
@@ -12,8 +12,7 @@ const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
-exports.getExtremumX = getExtremumX;
-const getExtremumY = params => {
+const getValueExtremum = params => {
   const {
     series,
     axis,
@@ -24,4 +23,21 @@ const getExtremumY = params => {
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);
 };
+const getExtremumX = params => {
+  // Notice that bar should be all horizontal or all vertical.
+  // Don't think it's a problem for now
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getValueExtremum(params);
+  }
+  return getBaseExtremum(params);
+};
+exports.getExtremumX = getExtremumX;
+const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum(params);
+};
 exports.getExtremumY = getExtremumY;

package/BarChart/formatter.js

@@ -49,7 +49,9 @@ const formatter = (params, dataset) => {
     })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
-      completedSeries[id] = (0, _extends2.default)({}, series[id], {
+      completedSeries[id] = (0, _extends2.default)({
+        layout: 'vertical'
+      }, series[id], {
         data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });