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

package/modern/PieChart/PieArc.js

@@ -35,7 +35,7 @@ const PieArcRoot = styled('path', {
   ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
   strokeLinejoin: 'round',
   fill: ownerState.color,

package/modern/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ const PieArcLabelRoot = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle'
 }));
 export default function PieArcLabel(props) {

package/modern/ResponsiveChartContainer/index.js

@@ -42,7 +42,7 @@ const useChartDimensions = (inWidth, inHeight) => {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         computeSize();
       });
     });

package/modern/SparkLineChart/SparkLineChart.js

@@ -58,7 +58,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -69,7 +69,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/modern/context/CartesianContextProvider.js

@@ -12,7 +12,8 @@ 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";
-const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
@@ -102,9 +103,10 @@ function CartesianContextProvider({
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
         const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length

package/modern/index.js

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

package/modern/internals/components/AxisSharedComponents.js

@@ -47,7 +47,7 @@ export const ChartsLine = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -58,7 +58,7 @@ export const ChartsTick = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 export const ChartsTickLabel = styled('text', {
@@ -68,7 +68,7 @@ export const ChartsTickLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
@@ -77,5 +77,5 @@ export const ChartsLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.12",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@mui/base": "^5.0.0-alpha.87",
+    "@mui/base": "^5.0.0-beta.14",
     "clsx": "^2.0.0",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",