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

package/modern/PieChart/PiePlot.js

@@ -1,31 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
-import PieArc from './PieArc';
-import PieArcLabel from './PieArcLabel';
 import { DrawingContext } from '../context/DrawingProvider';
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { PieArcPlot } from './PieArcPlot';
+import { PieArcLabelPlot } from './PieArcLabelPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
-const RATIO = 180 / Math.PI;
-function getItemLabel(arcLabel, arcLabelMinAngle, item) {
-  if (!arcLabel) {
-    return null;
-  }
-  const angle = (item.endAngle - item.startAngle) * RATIO;
-  if (angle < arcLabelMinAngle) {
-    return null;
-  }
-  if (typeof arcLabel === 'string') {
-    return item[arcLabel]?.toString();
-  }
-  return arcLabel(item);
-}
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+ */
 function PiePlot(props) {
   const {
+    skipAnimation,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
@@ -46,54 +42,67 @@ function PiePlot(props) {
     series,
     seriesOrder
   } = seriesData;
-  const Arc = slots?.pieArc ?? PieArc;
-  const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
-  return /*#__PURE__*/_jsx("g", {
-    children: seriesOrder.map(seriesId => {
+  return /*#__PURE__*/_jsxs("g", {
+    children: [seriesOrder.map(seriesId => {
       const {
         innerRadius,
         outerRadius,
         cornerRadius,
-        arcLabel,
-        arcLabelMinAngle = 0,
+        paddingAngle,
         data,
         cx,
         cy,
         highlighted,
-        faded
+        faded,
+        highlightScope
+      } = series[seriesId];
+      return /*#__PURE__*/_jsx("g", {
+        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        children: /*#__PURE__*/_jsx(PieArcPlot, {
+          innerRadius: innerRadius,
+          outerRadius: outerRadius ?? availableRadius,
+          cornerRadius: cornerRadius,
+          paddingAngle: paddingAngle,
+          id: seriesId,
+          data: data,
+          skipAnimation: skipAnimation,
+          highlightScope: highlightScope,
+          highlighted: highlighted,
+          faded: faded,
+          onClick: onClick,
+          slots: slots,
+          slotProps: slotProps
+        })
+      }, seriesId);
+    }), seriesOrder.map(seriesId => {
+      const {
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        paddingAngle,
+        arcLabel,
+        arcLabelMinAngle,
+        data,
+        cx,
+        cy,
+        highlightScope
       } = series[seriesId];
       return /*#__PURE__*/_jsx("g", {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
-        children: /*#__PURE__*/_jsxs("g", {
-          children: [data.map((item, index) => {
-            return /*#__PURE__*/_createElement(Arc, _extends({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius ?? availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              highlighted: highlighted,
-              faded: faded
-            }, slotProps?.pieArc));
-          }), data.map((item, index) => {
-            return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius ?? availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-            }, slotProps?.pieArcLabel));
-          })]
+        children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
+          innerRadius: innerRadius,
+          outerRadius: outerRadius ?? availableRadius,
+          cornerRadius: cornerRadius,
+          paddingAngle: paddingAngle,
+          id: seriesId,
+          data: data,
+          skipAnimation: skipAnimation,
+          arcLabel: arcLabel,
+          arcLabelMinAngle: arcLabelMinAngle,
+          highlightScope: highlightScope
         })
       }, seriesId);
-    })
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
@@ -101,6 +110,18 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/PieChart/dataTransform/transition.js

@@ -0,0 +1,130 @@
+export const defaultTransitionConfig = {
+  keys: item => item.id,
+  from: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    color,
+    isFaded
+  }) => ({
+    innerRadius,
+    outerRadius: (innerRadius + outerRadius) / 2,
+    cornerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    paddingAngle,
+    fill: color,
+    opacity: isFaded ? 0.3 : 1
+  }),
+  leave: ({
+    innerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius: innerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2
+  }),
+  enter: ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }),
+  update: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    color,
+    isFaded
+  }) => ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    fill: color,
+    opacity: isFaded ? 0.3 : 1
+  }),
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};
+export const defaultLabelTransitionConfig = {
+  keys: item => item.id,
+  from: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle
+  }) => ({
+    innerRadius,
+    outerRadius: (innerRadius + outerRadius) / 2,
+    cornerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    paddingAngle,
+    opacity: 0
+  }),
+  leave: ({
+    innerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius: innerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    opacity: 0
+  }),
+  enter: ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    opacity: 1
+  }),
+  update: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    opacity: 1
+  }),
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};

package/modern/PieChart/dataTransform/useTransformData.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { InteractionContext } from '../../context/InteractionProvider';
+import { getIsHighlighted, getIsFaded } from '../../hooks/useInteractionItemProps';
+export function useTransformData(series) {
+  const {
+    id: seriesId,
+    highlightScope,
+    data,
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    innerRadius: baseInnerRadius = 0,
+    outerRadius: baseOuterRadius,
+    cornerRadius: baseCornerRadius = 0
+  } = series;
+  const {
+    item: highlightedItem
+  } = React.useContext(InteractionContext);
+  const getHighlightStatus = React.useCallback(dataIndex => {
+    const isHighlighted = getIsHighlighted(highlightedItem, {
+      type: 'pie',
+      seriesId,
+      dataIndex
+    }, highlightScope);
+    const isFaded = !isHighlighted && getIsFaded(highlightedItem, {
+      type: 'pie',
+      seriesId,
+      dataIndex
+    }, highlightScope);
+    return {
+      isHighlighted,
+      isFaded
+    };
+  }, [highlightScope, highlightedItem, seriesId]);
+  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
+    const {
+      isHighlighted,
+      isFaded
+    } = getHighlightStatus(itemIndex);
+    const attibuesOverride = _extends({
+      additionalRadius: 0
+    }, isFaded && faded || isHighlighted && highlighted || {});
+    const paddingAngle = Math.max(0, Math.PI * (attibuesOverride.paddingAngle ?? basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
+    const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
+    const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
+    return _extends({}, item, attibuesOverride, {
+      isFaded,
+      isHighlighted,
+      paddingAngle,
+      innerRadius,
+      outerRadius,
+      cornerRadius
+    });
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  return dataWithHighlight;
+}

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();
       });
     });
@@ -103,10 +103,10 @@ export const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function R
       width: inWidth,
       height: inHeight
     },
-    children: /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
+    children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
       width: width,
       height: height,
       ref: ref
-    }))
+    })) : null
   });
 });

package/modern/ScatterChart/Scatter.js

@@ -5,6 +5,16 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { InteractionContext } from '../context/InteractionProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [Scatter API](https://mui.com/x/api/charts/scatter/)
+ */
 function Scatter(props) {
   const {
     series,

package/modern/ScatterChart/ScatterChart.js

@@ -9,6 +9,16 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
 const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
@@ -85,11 +95,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -118,33 +132,33 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -165,11 +179,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -210,6 +228,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -225,11 +245,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -254,6 +278,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -262,6 +287,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -280,6 +308,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -288,6 +317,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/modern/ScatterChart/ScatterPlot.js

@@ -5,6 +5,16 @@ import { Scatter } from './Scatter';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+ */
 function ScatterPlot(props) {
   const {
     slots,

package/modern/SparkLineChart/SparkLineChart.js

@@ -1,29 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { BarPlot } from '../BarChart';
-import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SparkLineMarkPlot = styled(MarkPlot)({
-  [`& .${markElementClasses.root}`]: {
-    display: 'none',
-    [`&.${markElementClasses.highlighted}`]: {
-      display: 'inherit'
-    }
-  }
-});
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
   left: 5,
   right: 5
 };
+
+/**
+ * Demos:
+ *
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
+ *
+ * API:
+ *
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+ */
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
@@ -59,14 +60,15 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter
     }, plotType === 'bar' ? {} : {
       area,
-      curve
+      curve,
+      disableHighlight: !showHighlight
     })],
     width: width,
     height: height,
     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),
@@ -77,7 +79,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,
@@ -85,8 +90,14 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
         slotProps: slotProps
-      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slotProps: slotProps,
+      slots: slots
+    })), children]
   });
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -161,6 +172,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -192,6 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -200,6 +214,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/modern/constants.js

@@ -1,7 +1,7 @@
 export const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 export const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 export const DEFAULT_MARGINS = {
-  top: 100,
+  top: 50,
   bottom: 50,
   left: 50,
   right: 50