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

package/colorPalettes/colorPalettes.js

@@ -16,9 +16,9 @@ const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FF
 exports.mangoFusionPaletteDark = mangoFusionPaletteDark;
 const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
 exports.mangoFusionPalette = mangoFusionPalette;
-const cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
+const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
 exports.cheerfulFiestaPaletteDark = cheerfulFiestaPaletteDark;
-const cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
+const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
 exports.cheerfulFiestaPaletteLight = cheerfulFiestaPaletteLight;
 const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;
 exports.cheerfulFiestaPalette = cheerfulFiestaPalette;

package/context/CartesianContextProvider.js

@@ -134,7 +134,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -160,17 +161,17 @@ function CartesianContextProvider({
       const range = [drawingArea.top + drawingArea.height, drawingArea.top];
       if ((0, _axis.isBandScaleConfig)(axis)) {
         const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        completedXAxis[axis.id] = (0, _extends2.default)({
+        completedYAxis[axis.id] = (0, _extends2.default)({
           categoryGapRatio,
           barGapRatio: 0
         }, axis, {
-          scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+          scale: (0, _d3Scale.scaleBand)(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
-        completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scale: (0, _d3Scale.scalePoint)(axis.data, range),
+        completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
+          scale: (0, _d3Scale.scalePoint)(axis.data, [range[1], range[0]]),
           ticksNumber: axis.data.length
         });
       }
@@ -181,7 +182,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -230,15 +232,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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({
@@ -254,15 +258,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.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/esm/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -23,6 +23,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     colors,
     dataset,
     sx,
+    layout,
     tooltip,
     axisHighlight,
     legend,
@@ -30,44 +31,67 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = useId();
   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 => {
+        var _ref, _s$data;
+        return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
+      }))
+    }, (_, index) => index)
+  };
+  const defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => _extends({
       type: 'bar'
-    }, s)),
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'band',
-      data: Array.from({
-        length: Math.max(...series.map(s => {
-          var _ref, _s$data;
-          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-        }))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
+    xAxis: xAxis != null ? xAxis : hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)],
+    yAxis: yAxis != null ? yAxis : hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined,
     colors: colors,
     dataset: dataset,
     sx: sx,
     disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [/*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/_jsx(BarPlot, {})
+      children: /*#__PURE__*/_jsx(BarPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
-      x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -79,7 +103,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -95,8 +119,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -109,6 +138,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
+  layout: PropTypes.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`.
@@ -123,8 +153,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   legend: PropTypes.shape({
@@ -141,6 +176,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -163,8 +200,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.shape({
@@ -177,6 +219,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     }),
     id: PropTypes.string,
     label: PropTypes.string,
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
     stack: PropTypes.string,
     stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
@@ -185,6 +228,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -207,8 +260,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -231,15 +289,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -255,15 +315,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/BarChart/BarElement.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
@@ -24,7 +25,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = styled('rect', {
+export const BarElementPath = styled('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,12 +39,15 @@ const BarElementPath = styled('rect', {
   opacity: ownerState.isFaded && 0.3 || 1
 }));
 export function BarElement(props) {
+  var _slots$bar;
   const {
       id,
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -69,12 +73,18 @@ export function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BarElementPath, _extends({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  })));
+  const Bar = (_slots$bar = slots == null ? void 0 : slots.bar) != null ? _slots$bar : BarElementPath;
+  const barProps = useSlotProps({
+    elementType: Bar,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.bar,
+    additionalProps: _extends({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
 }

package/esm/BarChart/BarPlot.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
@@ -32,7 +34,7 @@ function getBandSize({
     offset
   };
 }
-export function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -60,47 +62,74 @@ export function BarPlot() {
         const yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
         const xAxisConfig = xAxis[xAxisKey];
         const yAxisConfig = yAxis[yAxisKey];
-        if (!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 (!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 (!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
         } = series[seriesId];
         return stackedData.map((values, dataIndex) => {
-          var _xAxis$xAxisKey$data;
+          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, {
+          return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * (barWidth + offset),
-            y: yScale(value),
-            height: yScale(baseline) - yScale(value),
-            width: barWidth,
+            x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(baseline),
+            y: verticalLayout ? yScale(value) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarPlot };

package/esm/BarChart/extremums.js

@@ -1,4 +1,4 @@
-export const getExtremumX = params => {
+const getBaseExtremum = params => {
   var _axis$data, _axis$data2;
   const {
     axis
@@ -7,7 +7,7 @@ export const getExtremumX = params => {
   const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
-export const getExtremumY = params => {
+const getValueExtremum = params => {
   const {
     series,
     axis,
@@ -17,4 +17,20 @@ export const getExtremumY = params => {
     const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]);
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);
+};
+export 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);
+};
+export const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum(params);
 };

package/esm/BarChart/formatter.js

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