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

package/internals/isBandScale.d.ts

@@ -0,0 +1,3 @@
+import type { ScaleBand, ScalePoint } from 'd3-scale';
+import { D3Scale } from '../models/axis';
+export declare function isBandScale(scale: D3Scale): scale is ScaleBand<any> | ScalePoint<any>;

package/internals/isBandScale.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBandScale = isBandScale;
+function isBandScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/legacy/BarChart/BarChart.js

@@ -13,7 +13,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) {
+var BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
     series = props.series,
@@ -33,6 +33,7 @@ function BarChart(props) {
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'bar'
@@ -70,7 +71,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/legacy/BarChart/BarPlot.js

@@ -2,9 +2,36 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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(_ref) {
+  var W = _ref.bandWidth,
+    N = _ref.numberOfGroups,
+    r = _ref.gapRatio;
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  var barWidth = W / (N + (N - 1) * r);
+  var offset = r * barWidth;
+  return {
+    barWidth: barWidth,
+    offset: offset
+  };
+}
 export function BarPlot() {
   var seriesData = React.useContext(SeriesContext).bar;
   var axisData = React.useContext(CartesianContext);
@@ -20,25 +47,32 @@ export function BarPlot() {
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(function (_ref, groupIndex) {
-      var groupIds = _ref.ids;
+    children: stackingGroups.flatMap(function (_ref2, groupIndex) {
+      var groupIds = _ref2.ids;
       return groupIds.flatMap(function (seriesId) {
         var _series$seriesId$xAxi, _series$seriesId$yAxi;
         var xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
         var yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
-        var xScale = xAxis[xAxisKey].scale;
-        var yScale = yAxis[yAxisKey].scale;
-        if (!isBandScale(xScale)) {
-          throw new Error("Axis with id \"".concat(xAxisKey, "\" shoud be of type \"band\" to display the bar series ").concat(stackingGroups));
+        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 xScale = xAxisConfig.scale;
+        var yScale = yAxisConfig.scale;
 
         // Currently assuming all bars are vertical
         var bandWidth = xScale.bandwidth();
-        var barWidth = 0.9 * bandWidth / stackingGroups.length;
-        var offset = 0.05 * bandWidth;
+        var _getBandSize = getBandSize({
+            bandWidth: bandWidth,
+            numberOfGroups: stackingGroups.length,
+            gapRatio: xAxisConfig.barGapRatio
+          }),
+          barWidth = _getBandSize.barWidth,
+          offset = _getBandSize.offset;
 
         // @ts-ignore TODO: fix when adding a correct API for customisation
         var _series$seriesId = series[seriesId],
@@ -51,7 +85,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/legacy/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 var ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   var width = props.width,
     height = props.height,
     series = props.series,
@@ -19,12 +20,13 @@ export function ChartContainer(props) {
     desc = props.desc,
     disableAxisListener = props.disableAxisListener,
     children = props.children;
-  var ref = React.useRef(null);
+  var svgRef = React.useRef(null);
+  var 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,
@@ -36,7 +38,7 @@ export function ChartContainer(props) {
             children: /*#__PURE__*/_jsx(ChartsSurface, {
               width: width,
               height: height,
-              ref: ref,
+              ref: handleRef,
               sx: sx,
               title: title,
               desc: desc,
@@ -48,4 +50,4 @@ export function ChartContainer(props) {
       })
     })
   });
-}
+});

package/legacy/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) {
@@ -22,7 +23,7 @@ function ChartsAxisHighlight(props) {
   var getXPosition = getValueToPositionMapper(xScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(xScale(axis.x.value), " ").concat(yScale.range()[0], " L ").concat(xScale(axis.x.value) + xScale.bandwidth(), " ").concat(yScale.range()[0], " L ").concat(xScale(axis.x.value) + xScale.bandwidth(), " ").concat(yScale.range()[1], " L ").concat(xScale(axis.x.value), " ").concat(yScale.range()[1], " Z"),
+      d: "M ".concat(xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2, " ").concat(yScale.range()[0], " l ").concat(xScale.step(), " 0 l 0 ").concat(yScale.range()[1] - yScale.range()[0], " l ").concat(-xScale.step(), " 0 Z"),
       fill: "gray",
       fillOpacity: 0.1,
       style: {

package/legacy/LineChart/LineChart.js

@@ -15,7 +15,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) {
+var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
     series = props.series,
@@ -38,6 +38,7 @@ function LineChart(props) {
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'line'
@@ -73,7 +74,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/legacy/ResponsiveChartContainer/index.js

@@ -99,11 +99,11 @@ var ResizableContainer = styled('div', {
     }
   };
 });
-export function ResponsiveChartContainer(props) {
-  var propsWidth = props.width,
-    propsHeight = props.height,
+export var ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
+  var inWidth = props.width,
+    inHeight = props.height,
     other = _objectWithoutProperties(props, _excluded);
-  var _useChartDimensions = useChartDimensions(propsWidth, propsHeight),
+  var _useChartDimensions = useChartDimensions(inWidth, inHeight),
     _useChartDimensions2 = _slicedToArray(_useChartDimensions, 3),
     containerRef = _useChartDimensions2[0],
     width = _useChartDimensions2[1],
@@ -111,12 +111,13 @@ export function ResponsiveChartContainer(props) {
   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/legacy/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) {
+var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
     series = props.series,
@@ -27,6 +27,7 @@ function ScatterChart(props) {
     bottomAxis = props.bottomAxis,
     children = props.children;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
     series: series.map(function (s) {
       return _extends({
         type: 'scatter'
@@ -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 |

package/legacy/context/CartesianContextProvider.js

@@ -7,12 +7,15 @@ import PropTypes from 'prop-types';
 import { getExtremumX as getBarExtremumX, getExtremumY as getBarExtremumY } from '../BarChart/extremums';
 import { getExtremumX as getScatterExtremumX, getExtremumY as getScatterExtremumY } from '../ScatterChart/extremums';
 import { getExtremumX as getLineExtremumX, getExtremumY as getLineExtremumY } from '../LineChart/extremums';
-import { getScale } from '../hooks/useScale';
+import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { getScale } from '../internals/getScale';
 import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTicksNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+
 // TODO: those might be better placed in a distinct file
 var xExtremumGetters = {
   bar: getBarExtremumX,
@@ -86,24 +89,29 @@ function CartesianContextProvider(_ref) {
         _getAxisExtremum2 = _slicedToArray(_getAxisExtremum, 2),
         minData = _getAxisExtremum2[0],
         maxData = _getAxisExtremum2[1];
-      var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       var range = [drawingArea.left, drawingArea.left + drawingArea.width];
-      if (scaleType === 'band') {
-        completedXAxis[axis.id] = _extends({}, axis, {
-          scaleType: scaleType,
-          scale: scaleBand(axis.data, range),
+      if (isBandScaleConfig(axis)) {
+        var _axis$categoryGapRati;
+        var categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = _extends({
+          categoryGapRatio: categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
+      if (isPointScaleConfig(axis)) {
         completedXAxis[axis.id] = _extends({}, axis, {
-          scaleType: scaleType,
           scale: 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;
       }
+      var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
       var ticksNumber = getTicksNumber(_extends({}, axis, {
         range: range
@@ -137,23 +145,28 @@ function CartesianContextProvider(_ref) {
         minData = _getAxisExtremum4[0],
         maxData = _getAxisExtremum4[1];
       var range = [drawingArea.top + drawingArea.height, drawingArea.top];
-      var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
-      if (scaleType === 'band') {
-        completedYAxis[axis.id] = _extends({}, axis, {
-          scaleType: scaleType,
-          scale: scaleBand(axis.data, range),
+      if (isBandScaleConfig(axis)) {
+        var _axis$categoryGapRati2;
+        var categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
+        completedXAxis[axis.id] = _extends({
+          categoryGapRatio: categoryGapRatio,
+          barGapRatio: 0
+        }, axis, {
+          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
-        return;
       }
-      if (scaleType === 'point') {
-        completedYAxis[axis.id] = _extends({}, axis, {
-          scaleType: scaleType,
+      if (isPointScaleConfig(axis)) {
+        completedXAxis[axis.id] = _extends({}, axis, {
           scale: 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;
       }
+      var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
       var ticksNumber = getTicksNumber(_extends({}, axis, {
         range: range

package/legacy/context/SeriesContextProvider.js

@@ -16,8 +16,8 @@ var seriesTypeFormatter = {
   pie: pieSeriesFormatter
 };
 /**
- * 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/legacy/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useDrawingArea';
+export * from './useScale';

package/legacy/hooks/useAxisEvents.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export var useAxisEvents = function useAxisEvents(disableAxisListener) {
   var svgRef = React.useContext(SVGContext);
   var _React$useContext = React.useContext(DrawingContext),
@@ -104,12 +104,17 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
       });
     };
     var handleMouseMove = function handleMouseMove(event) {
+      // Get mouse coordinate in global SVG space
+      var pt = svgRef.current.createSVGPoint();
+      pt.x = event.clientX;
+      pt.y = event.clientY;
+      var svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
       mousePosition.current = {
-        x: event.offsetX,
-        y: event.offsetY
+        x: svgPt.x,
+        y: svgPt.y
       };
-      var outsideX = event.offsetX < left || event.offsetX > left + width;
-      var outsideY = event.offsetY < top || event.offsetY > top + height;
+      var outsideX = svgPt.x < left || svgPt.x > left + width;
+      var outsideY = svgPt.y < top || svgPt.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
           type: 'updateAxis',
@@ -120,8 +125,8 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
         });
         return;
       }
-      var newStateX = getUpdateX(event.offsetX);
-      var newStateY = getUpdateY(event.offsetY);
+      var newStateX = getUpdateX(svgPt.x);
+      var newStateY = getUpdateY(svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/legacy/hooks/useDrawingArea.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+export function useDrawingArea() {
+  var _React$useContext = React.useContext(DrawingContext),
+    left = _React$useContext.left,
+    top = _React$useContext.top,
+    width = _React$useContext.width,
+    height = _React$useContext.height;
+  return React.useMemo(function () {
+    return {
+      left: left,
+      top: top,
+      width: width,
+      height: height
+    };
+  }, [height, left, top, width]);
+}

package/legacy/hooks/useScale.js

@@ -1,24 +1,6 @@
-import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
-export function getScale(scaleType, domain, range) {
-  switch (scaleType) {
-    case 'log':
-      return scaleLog(domain, range);
-    case 'pow':
-      return scalePow(domain, range);
-    case 'sqrt':
-      return scaleSqrt(domain, range);
-    case 'time':
-      return scaleTime(domain, range);
-    case 'utc':
-      return scaleUtc(domain, range);
-    default:
-      return scaleLinear(domain, range);
-  }
-}
-export function isBandScale(scale) {
-  return scale.bandwidth !== undefined;
-}
-
+import * as React from 'react';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
  * Usefull when dealing with specific scale such as band.
@@ -34,4 +16,18 @@ export function getValueToPositionMapper(scale) {
   return function (value) {
     return scale(value);
   };
+}
+export function useXScale(identifier) {
+  var _React$useContext = React.useContext(CartesianContext),
+    xAxis = _React$useContext.xAxis,
+    xAxisIds = _React$useContext.xAxisIds;
+  var id = typeof identifier === 'string' ? identifier : xAxisIds[identifier != null ? identifier : 0];
+  return xAxis[id].scale;
+}
+export function useYScale(identifier) {
+  var _React$useContext2 = React.useContext(CartesianContext),
+    yAxis = _React$useContext2.yAxis,
+    yAxisIds = _React$useContext2.yAxisIds;
+  var id = typeof identifier === 'string' ? identifier : yAxisIds[identifier != null ? identifier : 0];
+  return yAxis[id].scale;
 }

package/legacy/hooks/useTicks.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
-import { isBandScale } from './useScale';
+import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   var _params$maxTicks = params.maxTicks,
     maxTicks = _params$maxTicks === void 0 ? 999 : _params$maxTicks,
@@ -20,23 +20,36 @@ function useTicks(options) {
     // band scale
     if (isBandScale(scale)) {
       var domain = scale.domain();
-      return [].concat(_toConsumableArray(domain.map(function (value) {
-        var _valueFormatter, _scale;
+      if (scale.bandwidth() > 0) {
+        // scale type = 'band'
+        return [].concat(_toConsumableArray(domain.map(function (value, index) {
+          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,
+            labelOffset: scale.step() / 2
+          };
+        })), [{
+          formattedValue: undefined,
+          offset: scale.range()[1],
+          labelOffset: 0
+        }]);
+      }
+
+      // scale type = 'point'
+      return domain.map(function (value) {
+        var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
-          offset: (_scale = scale(value)) != null ? _scale : 0,
-          labelOffset: scale.bandwidth() / 2
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          offset: scale(value),
+          labelOffset: 0
         };
-      })), _toConsumableArray(scale.bandwidth() > 0 ? [{
-        formattedValue: undefined,
-        offset: scale.range()[1],
-        labelOffset: 0
-      }] : []));
+      });
     }
     return scale.ticks(ticksNumber).map(function (value) {
-      var _valueFormatter2;
+      var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : scale.tickFormat(ticksNumber)(value),
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.2
+ * @mui/x-charts v6.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7,6 +7,7 @@
  */
 export * from './constants';
 export * from './context';
+export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';

package/legacy/internals/getScale.js

@@ -0,0 +1,17 @@
+import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
+export function getScale(scaleType, domain, range) {
+  switch (scaleType) {
+    case 'log':
+      return scaleLog(domain, range);
+    case 'pow':
+      return scalePow(domain, range);
+    case 'sqrt':
+      return scaleSqrt(domain, range);
+    case 'time':
+      return scaleTime(domain, range);
+    case 'utc':
+      return scaleUtc(domain, range);
+    default:
+      return scaleLinear(domain, range);
+  }
+}

package/legacy/internals/isBandScale.js

@@ -0,0 +1,3 @@
+export function isBandScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/legacy/models/axis.js

@@ -1 +1,6 @@
-export {};
+export function isBandScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'band';
+}
+export function isPointScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'point';
+}