@mui/x-charts 6.0.0-alpha.7 → 6.0.0-alpha.9

package/esm/LineChart/MarkPlot.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -9,9 +11,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function MarkPlot(props) {
   var _slots$mark;
   const {
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   const Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
@@ -30,7 +33,7 @@ function MarkPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, props, {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -38,8 +41,12 @@ function MarkPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          showMark = true
         } = series[seriesId];
+        if (showMark === false) {
+          return null;
+        }
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
@@ -65,21 +72,33 @@ function MarkPlot(props) {
           return {
             x: xScale(x),
             y: yScale(y),
+            position: x,
+            value: y,
             index
           };
         }).filter(isInRange).map(({
           x,
           y,
-          index
-        }) => /*#__PURE__*/_jsx(Mark, _extends({
-          id: seriesId,
-          dataIndex: index,
-          shape: "circle",
-          color: series[seriesId].color,
-          x: x,
-          y: y,
-          highlightScope: series[seriesId].highlightScope
-        }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`));
+          index,
+          position,
+          value
+        }) => {
+          return showMark === true || showMark({
+            x,
+            y,
+            index,
+            position,
+            value
+          }) ? /*#__PURE__*/_jsx(Mark, _extends({
+            id: seriesId,
+            dataIndex: index,
+            shape: "circle",
+            color: series[seriesId].color,
+            x: x,
+            y: y,
+            highlightScope: series[seriesId].highlightScope
+          }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`) : null;
+        });
       });
     })
   }));

package/esm/LineChart/index.js

@@ -1,7 +1,9 @@
 export { LinePlot } from './LinePlot';
 export { AreaPlot } from './AreaPlot';
 export { MarkPlot } from './MarkPlot';
+export { LineHighlightPlot } from './LineHighlightPlot';
 export { LineChart } from './LineChart';
 export * from './AreaElement';
 export * from './LineElement';
-export * from './MarkElement';
+export * from './MarkElement';
+export * from './LineHighlightElement';

package/esm/PieChart/PieChart.js

@@ -88,7 +88,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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.

package/esm/ScatterChart/ScatterChart.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.

package/esm/SparkLineChart/SparkLineChart.js

@@ -1,23 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { BarPlot } from '../BarChart';
-import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SparkLineMarkPlot = styled(MarkPlot)({
-  [`& .${markElementClasses.root}`]: {
-    display: 'none',
-    [`&.${markElementClasses.highlighted}`]: {
-      display: 'inherit'
-    }
-  }
-});
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
@@ -59,7 +50,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter
     }, plotType === 'bar' ? {} : {
       area,
-      curve
+      curve,
+      disableHighlight: !showHighlight
     })],
     width: width,
     height: height,
@@ -85,7 +77,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
         slotProps: slotProps
-      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
+      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
   });
 });
@@ -102,7 +97,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   area: PropTypes.bool,
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   children: PropTypes.node,
   className: PropTypes.string,

package/esm/context/CartesianContextProvider.js

@@ -156,17 +156,17 @@ function CartesianContextProvider({
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati2;
         const categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
-        completedXAxis[axis.id] = _extends({
+        completedYAxis[axis.id] = _extends({
           categoryGapRatio,
           barGapRatio: 0
         }, axis, {
-          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+          scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
-        completedXAxis[axis.id] = _extends({}, axis, {
-          scale: scalePoint(axis.data, range),
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scale: scalePoint(axis.data, [range[1], range[0]]),
           ticksNumber: axis.data.length
         });
       }

package/esm/hooks/useAxisEvents.js

@@ -33,66 +33,49 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdateY = y => {
-      if (usedYAxis === null) {
-        return null;
-      }
-      const {
-        scale: yScale,
-        data: yAxisData
-      } = yAxis[usedYAxis];
-      if (!isBandScale(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    const getUpdateX = x => {
+    const getUpdate = (axisConfig, mouseValue) => {
       if (usedXAxis === null) {
         return null;
       }
       const {
-        scale: xScale,
-        data: xAxisData
-      } = xAxis[usedXAxis];
-      if (!isBandScale(xScale)) {
-        const value = xScale.invert(x);
-        const closestIndex = xAxisData == null ? void 0 : xAxisData.findIndex((v, index) => {
+        scale,
+        data: axisData
+      } = axisConfig;
+      if (!isBandScale(scale)) {
+        const value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value
+          };
+        }
+        const closestIndex = axisData == null ? void 0 : axisData.findIndex((v, index) => {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     const handleMouseOut = () => {
@@ -130,8 +113,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(svgPt.x);
-      const newStateY = getUpdateY(svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/esm/hooks/useTicks.js

@@ -25,11 +25,11 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map((value, index) => {
+        return [...domain.map(value => {
           var _valueFormatter;
           return {
             formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
-            offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+            offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
         }), {

package/hooks/useAxisEvents.js

@@ -41,66 +41,49 @@ const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdateY = y => {
-      if (usedYAxis === null) {
-        return null;
-      }
-      const {
-        scale: yScale,
-        data: yAxisData
-      } = yAxis[usedYAxis];
-      if (!(0, _isBandScale.isBandScale)(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    const getUpdateX = x => {
+    const getUpdate = (axisConfig, mouseValue) => {
       if (usedXAxis === null) {
         return null;
       }
       const {
-        scale: xScale,
-        data: xAxisData
-      } = xAxis[usedXAxis];
-      if (!(0, _isBandScale.isBandScale)(xScale)) {
-        const value = xScale.invert(x);
-        const closestIndex = xAxisData?.findIndex((v, index) => {
+        scale,
+        data: axisData
+      } = axisConfig;
+      if (!(0, _isBandScale.isBandScale)(scale)) {
+        const value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value
+          };
+        }
+        const closestIndex = axisData?.findIndex((v, index) => {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     const handleMouseOut = () => {
@@ -138,8 +121,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(svgPt.x);
-      const newStateY = getUpdateY(svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useTicks.js

@@ -34,9 +34,9 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map((value, index) => ({
+        return [...domain.map(value => ({
           formattedValue: valueFormatter?.(value) ?? value,
-          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
           formattedValue: undefined,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.7
+ * @mui/x-charts v6.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/defaultizeColor.d.ts

@@ -39,6 +39,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     data?: number[] | undefined;
     dataKey?: string | undefined;
     label?: string | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: number) => string) | undefined;
@@ -56,6 +57,8 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     area?: boolean | undefined;
     label?: string | undefined;
     curve?: import("../models/seriesType").CurveType | undefined;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean) | undefined;
+    disableHighlight?: boolean | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: number) => string) | undefined;

package/legacy/BarChart/BarChart.js

@@ -1,12 +1,12 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 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 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     colors = props.colors,
     dataset = props.dataset,
     sx = props.sx,
+    layout = props.layout,
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
     legend = props.legend,
@@ -35,29 +36,43 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     slotProps = props.slotProps;
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
+  var hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(function (item) {
+    return item.layout === 'horizontal';
+  });
+  var defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max.apply(Math, _toConsumableArray(series.map(function (s) {
+        var _ref, _s$data;
+        return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
+      })))
+    }, function (_, index) {
+      return index;
+    })
+  };
+  var defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(function (s) {
       return _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.apply(Math, _toConsumableArray(series.map(function (s) {
-          var _ref, _s$data;
-          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-        })))
-      }, function (_, index) {
-        return 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,
@@ -78,9 +93,7 @@ var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
-      x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -95,7 +108,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.
@@ -130,6 +143,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`.
@@ -210,6 +224,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']),

package/legacy/BarChart/BarPlot.js

@@ -57,40 +57,50 @@ function BarPlot(props) {
         var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
         var xAxisConfig = xAxis[xAxisKey];
         var yAxisConfig = yAxis[yAxisKey];
-        if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+        var verticalLayout = series[seriesId].layout === 'vertical';
+        var baseScaleConfig;
+        if (verticalLayout) {
+          if (!isBandScaleConfig(xAxisConfig)) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          }
+          if (xAxis[xAxisKey].data === undefined) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          }
+          baseScaleConfig = xAxisConfig;
+        } else {
+          if (!isBandScaleConfig(yAxisConfig)) {
+            throw new Error("Axis with id \"".concat(yAxisKey, "\" shoud be of type \"band\" to display the bar series of id \"").concat(seriesId, "\""));
+          }
+          if (yAxis[yAxisKey].data === undefined) {
+            throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud have data property"));
+          }
+          baseScaleConfig = yAxisConfig;
         }
         var xScale = xAxisConfig.scale;
         var yScale = yAxisConfig.scale;
-
-        // Currently assuming all bars are vertical
-        var bandWidth = xScale.bandwidth();
+        var bandWidth = baseScaleConfig.scale.bandwidth();
         var _getBandSize = getBandSize({
             bandWidth: bandWidth,
             numberOfGroups: stackingGroups.length,
-            gapRatio: xAxisConfig.barGapRatio
+            gapRatio: baseScaleConfig.barGapRatio
           }),
           barWidth = _getBandSize.barWidth,
           offset = _getBandSize.offset;
-
-        // @ts-ignore TODO: fix when adding a correct API for customisation
+        var barOffset = groupIndex * (barWidth + offset);
         var _series$seriesId = series[seriesId],
           stackedData = _series$seriesId.stackedData,
           color = _series$seriesId.color;
         return stackedData.map(function (values, dataIndex) {
-          var _xAxis$xAxisKey$data;
+          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
           var baseline = Math.min.apply(Math, _toConsumableArray(values));
           var value = Math.max.apply(Math, _toConsumableArray(values));
           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
           }, props), "".concat(seriesId, "-").concat(dataIndex));