@mui/x-charts 6.0.0-alpha.2 → 6.0.0-alpha.3

package/ChartContainer/index.d.ts

@@ -6,4 +6,6 @@ import { CartesianContextProviderProps } from '../context/CartesianContextProvid
 export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps, 'children'> & {
     children?: React.ReactNode;
 };
-export declare function ChartContainer(props: ChartContainerProps): React.JSX.Element;
+export declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps, "children"> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;

package/ChartContainer/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartContainer = ChartContainer;
+exports.ChartContainer = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
@@ -14,7 +16,7 @@ var _HighlightProvider = require("../context/HighlightProvider");
 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 ChartContainer(props) {
+const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -29,12 +31,13 @@ function ChartContainer(props) {
     disableAxisListener,
     children
   } = props;
-  const ref = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, svgRef);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
     width: width,
     height: height,
     margin: margin,
-    svgRef: ref,
+    svgRef: svgRef,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesContextProvider.SeriesContextProvider, {
       series: series,
       colors: colors,
@@ -46,7 +49,7 @@ function ChartContainer(props) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -58,4 +61,5 @@ function ChartContainer(props) {
       })
     })
   });
-}
+});
+exports.ChartContainer = ChartContainer;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _useScale = require("../hooks/useScale");
+var _isBandScale = require("../internals/isBandScale");
 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; }
@@ -33,8 +34,8 @@ function ChartsAxisHighlight(props) {
   } = React.useContext(_InteractionProvider.InteractionContext);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _useScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: `M ${xScale(axis.x.value)} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[1]} L ${xScale(axis.x.value)} ${yScale.range()[1]} Z`,
+    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       fill: "gray",
       fillOpacity: 0.1,
       style: {

package/LineChart/LineChart.d.ts

@@ -12,8 +12,5 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
 }
-declare function LineChart(props: LineChartProps): React.JSX.Element;
-declare namespace LineChart {
-    var propTypes: any;
-}
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<unknown>>;
 export { LineChart };

package/LineChart/LineChart.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LineChart = LineChart;
+exports.LineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
@@ -22,7 +22,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 LineChart(props) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -46,6 +46,7 @@ function LineChart(props) {
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'line'
     }, s)),
@@ -75,7 +76,8 @@ function LineChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
+exports.LineChart = LineChart;
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ResponsiveChartContainer/index.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { ChartContainerProps } from '../ChartContainer';
 import { MakeOptional } from '../models/helpers';
 export type ResponsiveChartContainerProps = MakeOptional<ChartContainerProps, 'width' | 'height'>;
-export declare function ResponsiveChartContainer(props: ResponsiveChartContainerProps): React.JSX.Element;
+export declare const ResponsiveChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "height" | "width"> & Partial<Pick<ChartContainerProps, "height" | "width">> & React.RefAttributes<unknown>>;

package/ResponsiveChartContainer/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResponsiveChartContainer = ResponsiveChartContainer;
+exports.ResponsiveChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -99,22 +99,24 @@ const ResizableContainer = (0, _styles.styled)('div', {
     height: '100%'
   }
 }));
-function ResponsiveChartContainer(props) {
+const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: propsWidth,
-      height: propsHeight
+      width: inWidth,
+      height: inHeight
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [containerRef, width, height] = useChartDimensions(propsWidth, propsHeight);
+  const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
     ref: containerRef,
     ownerState: {
-      width: props.width,
-      height: props.height
+      width: inWidth,
+      height: inHeight
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
       width: width,
-      height: height
+      height: height,
+      ref: ref
     }))
   });
-}
+});
+exports.ResponsiveChartContainer = ResponsiveChartContainer;

package/ScatterChart/Scatter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DefaultizedScatterSeriesType } from '../models/seriesType/scatter';
-import { D3Scale } from '../hooks/useScale';
+import { D3Scale } from '../models/axis';
 export interface ScatterProps {
     series: DefaultizedScatterSeriesType;
     xScale: D3Scale;

package/ScatterChart/ScatterChart.d.ts

@@ -12,8 +12,5 @@ export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, '
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
 }
-declare function ScatterChart(props: ScatterChartProps): React.JSX.Element;
-declare namespace ScatterChart {
-    var propTypes: any;
-}
+declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<unknown>>;
 export { ScatterChart };

package/ScatterChart/ScatterChart.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScatterChart = ScatterChart;
+exports.ScatterChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,7 +17,7 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 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 ScatterChart(props) {
+const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -37,6 +37,7 @@ function ScatterChart(props) {
     children
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'scatter'
     }, s)),
@@ -59,7 +60,8 @@ function ScatterChart(props) {
       trigger: "item"
     }, tooltip)), children]
   });
-}
+});
+exports.ScatterChart = ScatterChart;
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/context/CartesianContextProvider.js

@@ -13,7 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _extremums = require("../BarChart/extremums");
 var _extremums2 = require("../ScatterChart/extremums");
 var _extremums3 = require("../LineChart/extremums");
-var _useScale = require("../hooks/useScale");
+var _axis = require("../models/axis");
+var _getScale = require("../internals/getScale");
 var _DrawingProvider = require("./DrawingProvider");
 var _SeriesContextProvider = require("./SeriesContextProvider");
 var _constants = require("../constants");
@@ -21,6 +22,8 @@ var _useTicks = require("../hooks/useTicks");
 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; }
+const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
   bar: _extremums.getExtremumX,
@@ -82,29 +85,33 @@ function CartesianContextProvider({
     allXAxis.forEach((axis, axisIndex) => {
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
-      const scaleType = axis.scaleType ?? 'linear';
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
-      if (scaleType === 'band') {
-        completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scaleType,
-          scale: (0, _d3Scale.scaleBand)(axis.data, range),
+      if ((0, _axis.isBandScaleConfig)(axis)) {
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = (0, _extends2.default)({
+          categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
+      if ((0, _axis.isPointScaleConfig)(axis)) {
         completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scaleType,
           scale: (0, _d3Scale.scalePoint)(axis.data, range),
           ticksNumber: axis.data.length
         });
+      }
+      if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+        // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
+      const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
         range
       }));
-      const niceScale = (0, _useScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
@@ -126,28 +133,32 @@ function CartesianContextProvider({
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis);
       const range = [drawingArea.top + drawingArea.height, drawingArea.top];
-      const scaleType = axis.scaleType ?? 'linear';
-      if (scaleType === 'band') {
-        completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scaleType,
-          scale: (0, _d3Scale.scaleBand)(axis.data, range),
+      if ((0, _axis.isBandScaleConfig)(axis)) {
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = (0, _extends2.default)({
+          categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
-        completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scaleType,
+      if ((0, _axis.isPointScaleConfig)(axis)) {
+        completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, range),
           ticksNumber: axis.data.length
         });
+      }
+      if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+        // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
+      const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = (0, _useTicks.getTicksNumber)((0, _extends2.default)({}, axis, {
         range
       }));
-      const niceScale = (0, _useScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = (0, _getScale.getScale)(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
       const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {

package/context/SeriesContextProvider.js

@@ -27,8 +27,8 @@ const seriesTypeFormatter = {
   pie: _formatter4.default
 };
 /**
- * This methods is the interface between what the developper is providing and what compoenents receives
- * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if soe line data are modified
+ * This methods is the interface between what the developer is providing and what components receives
+ * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
  * It also add defaultized values such as the ids, colors
  * @param series The array of series provided by devs
  * @param colors The color palette used to defaultize series colors

package/esm/BarChart/BarChart.js

@@ -12,7 +12,7 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function BarChart(props) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -34,6 +34,7 @@ function BarChart(props) {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'bar'
     }, s)),
@@ -65,7 +66,7 @@ function BarChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/BarChart/BarPlot.js

@@ -1,9 +1,37 @@
 import * as React from 'react';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { isBandScale } from '../hooks/useScale';
 import { BarElement } from './BarElement';
+import { isBandScaleConfig } from '../models/axis';
+
+/**
+ * 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.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+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
+  };
+}
 export function BarPlot() {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
@@ -30,19 +58,27 @@ export function BarPlot() {
         var _series$seriesId$xAxi, _series$seriesId$yAxi;
         const xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
         const yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        const xScale = xAxis[xAxisKey].scale;
-        const yScale = yAxis[yAxisKey].scale;
-        if (!isBandScale(xScale)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series ${stackingGroups}`);
+        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 xScale = xAxisConfig.scale;
+        const yScale = yAxisConfig.scale;
 
         // Currently assuming all bars are vertical
         const bandWidth = xScale.bandwidth();
-        const barWidth = 0.9 * bandWidth / stackingGroups.length;
-        const offset = 0.05 * bandWidth;
+        const {
+          barWidth,
+          offset
+        } = getBandSize({
+          bandWidth,
+          numberOfGroups: stackingGroups.length,
+          gapRatio: xAxisConfig.barGapRatio
+        });
 
         // @ts-ignore TODO: fix when adding a correct API for customisation
         const {
@@ -56,7 +92,7 @@ export function BarPlot() {
           return /*#__PURE__*/_jsx(BarElement, {
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * barWidth + offset,
+            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,

package/esm/ChartContainer/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
@@ -6,7 +7,7 @@ import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ChartContainer(props) {
+export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -21,12 +22,13 @@ export function ChartContainer(props) {
     disableAxisListener,
     children
   } = props;
-  const ref = React.useRef(null);
+  const svgRef = React.useRef(null);
+  const handleRef = useForkRef(ref, svgRef);
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,
     margin: margin,
-    svgRef: ref,
+    svgRef: svgRef,
     children: /*#__PURE__*/_jsx(SeriesContextProvider, {
       series: series,
       colors: colors,
@@ -38,7 +40,7 @@ export function ChartContainer(props) {
             children: /*#__PURE__*/_jsx(ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -50,4 +52,4 @@ export function ChartContainer(props) {
       })
     })
   });
-}
+});

package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { getValueToPositionMapper, isBandScale } from '../hooks/useScale';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { isBandScale } from '../internals/isBandScale';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisHighlight(props) {
@@ -26,7 +27,7 @@ function ChartsAxisHighlight(props) {
   const getXPosition = getValueToPositionMapper(xScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
-      d: `M ${xScale(axis.x.value)} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[0]} L ${xScale(axis.x.value) + xScale.bandwidth()} ${yScale.range()[1]} L ${xScale(axis.x.value)} ${yScale.range()[1]} Z`,
+      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       fill: "gray",
       fillOpacity: 0.1,
       style: {

package/esm/LineChart/LineChart.js

@@ -14,7 +14,7 @@ import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function LineChart(props) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -38,6 +38,7 @@ function LineChart(props) {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'line'
     }, s)),
@@ -67,7 +68,7 @@ function LineChart(props) {
       id: clipPathId
     }), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ResponsiveChartContainer/index.js

@@ -93,22 +93,23 @@ const ResizableContainer = styled('div', {
     }
   };
 });
-export function ResponsiveChartContainer(props) {
+export const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: propsWidth,
-      height: propsHeight
+      width: inWidth,
+      height: inHeight
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [containerRef, width, height] = useChartDimensions(propsWidth, propsHeight);
+  const [containerRef, width, height] = useChartDimensions(inWidth, inHeight);
   return /*#__PURE__*/_jsx(ResizableContainer, {
     ref: containerRef,
     ownerState: {
-      width: props.width,
-      height: props.height
+      width: inWidth,
+      height: inHeight
     },
     children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
       width: width,
-      height: height
+      height: height,
+      ref: ref
     }))
   });
-}
+});

package/esm/ScatterChart/ScatterChart.js

@@ -9,7 +9,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function ScatterChart(props) {
+const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -29,6 +29,7 @@ function ScatterChart(props) {
     children
   } = props;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'scatter'
     }, s)),
@@ -51,7 +52,7 @@ function ScatterChart(props) {
       trigger: "item"
     }, tooltip)), children]
   });
-}
+});
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |