@mui/x-charts 6.0.0-alpha.1 → 6.0.0-alpha.10

package/BarChart/BarChart.d.ts

@@ -1,19 +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 function BarChart(props: BarChartProps): React.JSX.Element;
-declare namespace BarChart {
-    var propTypes: any;
-}
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BarChart = BarChart;
+exports.BarChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
@@ -20,7 +20,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
 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 BarChart(props) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -29,7 +29,9 @@ function BarChart(props) {
     height,
     margin,
     colors,
+    dataset,
     sx,
+    layout,
     tooltip,
     axisHighlight,
     legend,
@@ -37,43 +39,69 @@ function BarChart(props) {
     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.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]
   });
-}
+});
+exports.BarChart = BarChart;
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -81,11 +109,11 @@ 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.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -97,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,
@@ -107,12 +140,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   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`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -124,13 +159,19 @@ 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({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
+    hidden: _propTypes.default.bool,
     itemWidth: _propTypes.default.number,
     markSize: _propTypes.default.number,
     offset: _propTypes.default.shape({
@@ -141,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({
@@ -151,7 +194,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -163,19 +206,26 @@ 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({
     color: _propTypes.default.string,
-    data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+    data: _propTypes.default.arrayOf(_propTypes.default.number),
+    dataKey: _propTypes.default.string,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
     }),
     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']),
@@ -184,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({
@@ -194,7 +254,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
@@ -206,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({
@@ -221,44 +286,52 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _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({
     axisId: _propTypes.default.string,
     classes: _propTypes.default.object,
     data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
-    max: _propTypes.default.number,
-    maxTicks: _propTypes.default.number,
-    min: _propTypes.default.number,
-    minTicks: _propTypes.default.number,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _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 type { 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,18 +1,47 @@
 "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 _useScale = require("../hooks/useScale");
 var _BarElement = require("./BarElement");
+var _axis = require("../models/axis");
 var _jsxRuntime = require("react/jsx-runtime");
 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 BarPlot() {
+/**
+ * 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 BarPlot(props) {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -37,21 +66,39 @@ function BarPlot() {
       return groupIds.flatMap(seriesId => {
         const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
         const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xScale = xAxis[xAxisKey].scale;
-        const yScale = yAxis[yAxisKey].scale;
-        if (!(0, _useScale.isBandScale)(xScale)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series ${stackingGroups}`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        const xAxisConfig = xAxis[xAxisKey];
+        const yAxisConfig = yAxis[yAxisKey];
+        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;
         }
-
-        // Currently assuming all bars are vertical
-        const bandWidth = xScale.bandwidth();
-        const barWidth = 0.9 * bandWidth / stackingGroups.length;
-        const offset = 0.05 * bandWidth;
-
-        // @ts-ignore TODO: fix when adding a correct API for customisation
+        const xScale = xAxisConfig.scale;
+        const yScale = yAxisConfig.scale;
+        const bandWidth = baseScaleConfig.scale.bandwidth();
+        const {
+          barWidth,
+          offset
+        } = getBandSize({
+          bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: baseScaleConfig.barGapRatio
+        });
+        const barOffset = groupIndex * (barWidth + offset);
         const {
           stackedData,
           color
@@ -59,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;