@mui/x-charts 6.0.0-alpha.6 → 6.0.0-alpha.8

package/LineChart/LineChart.d.ts

@@ -1,16 +1,34 @@
 import * as React from 'react';
+import { AreaPlotSlotComponentProps, AreaPlotSlotsComponent } from './AreaPlot';
+import { LinePlotSlotComponentProps, LinePlotSlotsComponent } from './LinePlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { MarkPlotSlotComponentProps, MarkPlotSlotsComponent } from './MarkPlot';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { LineSeriesType } from '../models/seriesType/line';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent } from '../models/axis';
+export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: LineChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: LineChartSlotComponentProps;
 }
 declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<unknown>>;
 export { LineChart };

package/LineChart/LineChart.js

@@ -42,7 +42,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -68,13 +70,27 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
       clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, {})]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, 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)(_MarkPlot.MarkPlot, {
+      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)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -87,7 +103,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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.
@@ -103,8 +119,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -131,8 +152,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -149,6 +175,8 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -171,8 +199,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -195,6 +228,16 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -217,8 +260,13 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -241,15 +289,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _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({
@@ -265,15 +315,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _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/LineChart/LineElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentProps } from '@mui/base';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface LineElementClasses {
     /** Styles applied to the root element. */
@@ -18,8 +19,29 @@ export interface LineElementOwnerState {
 }
 export declare function getLineElementUtilityClass(slot: string): string;
 export declare const lineElementClasses: LineElementClasses;
+export declare const LineElementPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: LineElementOwnerState;
+}, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 export type LineElementProps = Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
     highlightScope?: Partial<HighlightScope>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: {
+        line?: SlotComponentProps<'path', {}, LineElementOwnerState>;
+    };
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: {
+        /**
+         * The component that renders the root.
+         * @default LineElementPath
+         */
+        line?: React.ElementType;
+    };
 };
 declare function LineElement(props: LineElementProps): React.JSX.Element;
 declare namespace LineElement {

package/LineChart/LineElement.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineElement = LineElement;
+exports.LineElementPath = void 0;
 exports.getLineElementUtilityClass = getLineElementUtilityClass;
 exports.lineElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -13,13 +14,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Color = require("d3-color");
 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 _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "highlightScope"];
+const _excluded = ["id", "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 getLineElementUtilityClass(slot) {
@@ -53,6 +55,7 @@ const LineElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
+exports.LineElementPath = LineElementPath;
 LineElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -73,7 +76,9 @@ function LineElement(props) {
       id,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -96,13 +101,19 @@ function LineElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  })));
+  const Line = slots?.line ?? LineElementPath;
+  const lineProps = (0, _utils.useSlotProps)({
+    elementType: Line,
+    externalSlotProps: slotProps?.line,
+    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, lineProps));
 }
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -113,5 +124,15 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   highlightScope: _propTypes.default.shape({
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  })
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
 } : void 0;

package/LineChart/LinePlot.d.ts

@@ -1,2 +1,15 @@
 import * as React from 'react';
-export declare function LinePlot(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element | null;
+import { LineElementProps } from './LineElement';
+export interface LinePlotSlotsComponent {
+    line?: React.JSXElementConstructor<LineElementProps>;
+}
+export interface LinePlotSlotComponentProps {
+    line?: Partial<LineElementProps>;
+}
+export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps'> {
+}
+declare function LinePlot(props: LinePlotProps): React.JSX.Element | null;
+declare namespace LinePlot {
+    var propTypes: any;
+}
+export { LinePlot };

package/LineChart/LinePlot.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LinePlot = LinePlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
@@ -14,9 +16,15 @@ var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["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 LinePlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -34,7 +42,7 @@ function LinePlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -51,18 +59,41 @@ function LinePlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         const linePath = (0, _d3Shape.line)().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData.length !== stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) does not match length of series (${stackedData.length} items)`);
+          }
+        }
         const curve = (0, _getCurve.default)(series[seriesId].curve);
         const d3Data = xData?.map((x, index) => ({
           x,
-          y: stackedData[index]
+          y: stackedData[index] ?? [0, 0]
         }));
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
           id: seriesId,
           d: linePath.curve(curve)(d3Data) || undefined,
           color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          slots: slots,
+          slotProps: slotProps
         }, seriesId);
       });
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? LinePlot.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;

package/LineChart/MarkPlot.d.ts

@@ -1,2 +1,25 @@
 import * as React from 'react';
-export declare function MarkPlot(props: React.SVGAttributes<SVGSVGElement>): React.JSX.Element | null;
+import { MarkElementProps } from './MarkElement';
+export interface MarkPlotSlotsComponent {
+    mark?: React.JSXElementConstructor<MarkElementProps>;
+}
+export interface MarkPlotSlotComponentProps {
+    mark?: Partial<MarkElementProps>;
+}
+export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: MarkPlotSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MarkPlotSlotComponentProps;
+}
+declare function MarkPlot(props: MarkPlotProps): React.JSX.Element | null;
+declare namespace MarkPlot {
+    var propTypes: any;
+}
+export { MarkPlot };

package/LineChart/MarkPlot.js

@@ -6,17 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MarkPlot = MarkPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["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 MarkPlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
   }
@@ -32,7 +41,7 @@ function MarkPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -73,7 +82,7 @@ function MarkPlot(props) {
           x,
           y,
           index
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkElement.MarkElement, {
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
           id: seriesId,
           dataIndex: index,
           shape: "circle",
@@ -81,8 +90,24 @@ function MarkPlot(props) {
           x: x,
           y: y,
           highlightScope: series[seriesId].highlightScope
-        }, `${seriesId}-${index}`));
+        }, slotProps?.mark), `${seriesId}-${index}`));
       });
     })
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? MarkPlot.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;

package/PieChart/PieArcLabel.js

@@ -47,7 +47,6 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
   theme
 }) => ({
   fill: theme.palette.text.primary,
-  alignmentBaseline: 'baseline',
   textAnchor: 'middle'
 }));
 function PieArcLabel(props) {

package/PieChart/PieChart.d.ts

@@ -4,14 +4,26 @@ import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { PieSeriesType } from '../models/seriesType';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+export interface PieChartSlotsComponent extends ChartsAxisSlotsComponent, PiePlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface PieChartSlotComponentProps extends ChartsAxisSlotComponentProps, PiePlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    slots?: PieChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: PieChartSlotComponentProps;
 }
 declare function PieChart(props: PieChartProps): React.JSX.Element;
 declare namespace PieChart {