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

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -1,40 +1,130 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "classes", "className", "markType", "labelPosition", "axisDirection", "axisId", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { piecewiseColorLegendClasses, useUtilityClasses } from "./piecewiseColorLegendClasses.js";
 import { useAxis } from "./useAxis.js";
-import { LegendPerItem } from "./LegendPerItem.js";
-import { notNull } from "../internals/notNull.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function defaultLabelFormatter(params) {
-  if (params.min === null) {
-    return `<${params.formattedMax}`;
-  }
-  if (params.max === null) {
-    return `>${params.formattedMin}`;
-  }
-  return `${params.formattedMin}-${params.formattedMax}`;
-}
-const piecewiseColorContextBuilder = context => ({
-  type: 'piecewiseColor',
-  color: context.color,
-  label: context.label,
-  maxValue: context.maxValue,
-  minValue: context.minValue
+import { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RootElement = styled('ul', {
+  name: 'MuiPiecewiseColorLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  return _extends({}, theme.typography.caption, {
+    color: (theme.vars || theme).palette.text.primary,
+    lineHeight: '100%',
+    display: 'flex',
+    flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
+    flexShrink: 0,
+    gap: theme.spacing(0.5),
+    listStyleType: 'none',
+    paddingInlineStart: 0,
+    marginBlock: theme.spacing(1),
+    marginInline: theme.spacing(1),
+    width: 'max-content',
+    [`button.${piecewiseColorLegendClasses.item}`]: {
+      // Reset button styles
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: ownerState.onItemClick ? 'pointer' : 'unset',
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      color: 'inherit'
+    },
+    [`.${piecewiseColorLegendClasses.item}`]: {
+      display: 'flex',
+      gap: theme.spacing(0.5)
+    },
+    [`li :not(.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}) .${piecewiseColorLegendClasses?.mark}`]: {
+      alignSelf: 'center'
+    },
+    [`&.${piecewiseColorLegendClasses.start}`]: {
+      alignItems: 'end'
+    },
+    [`&.${piecewiseColorLegendClasses.end}`]: {
+      alignItems: 'start'
+    },
+    [`&.${piecewiseColorLegendClasses.horizontal}`]: {
+      alignItems: 'center',
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'column'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`.${piecewiseColorLegendClasses.minLabel}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'row'
+        }
+      }
+    },
+    [`&.${piecewiseColorLegendClasses.vertical}`]: {
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        alignItems: 'center',
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }
+    }
+  });
 });
-function PiecewiseColorLegend(props) {
+const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'extremes',
+    labelFormatter: piecewiseColorDefaultLabelFormatter
+  },
+  classesResolver: useUtilityClasses
+}, function PiecewiseColorLegend(props, ref) {
   const {
+      direction,
+      classes,
+      className,
+      markType,
+      labelPosition,
       axisDirection,
       axisId,
-      hideFirst,
-      hideLast,
-      labelFormatter = defaultLabelFormatter,
+      labelFormatter,
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isVertical = direction === 'vertical';
+  const isReverse = isVertical;
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -47,42 +137,83 @@ function PiecewiseColorLegend(props) {
     location: 'legend'
   }) ?? v.toLocaleString();
   const formattedLabels = colorMap.thresholds.map(valueFormatter);
-  const itemsToDisplay = colorMap.colors.map((color, index) => {
-    const isFirst = index === 0;
-    const isLast = index === colorMap.colors.length - 1;
-    if (hideFirst && isFirst || hideLast && isLast) {
-      return null;
-    }
-    const data = _extends({}, isFirst ? {
-      min: null,
-      formattedMin: null
-    } : {
-      min: colorMap.thresholds[index - 1],
-      formattedMin: formattedLabels[index - 1]
-    }, isLast ? {
-      max: null,
-      formattedMax: null
-    } : {
-      max: colorMap.thresholds[index],
-      formattedMax: formattedLabels[index]
-    });
-    const label = labelFormatter(data);
-    if (label === null) {
-      return null;
-    }
-    return {
-      id: label,
+  const startClass = isReverse ? classes?.maxLabel : classes?.minLabel;
+  const endClass = isReverse ? classes?.minLabel : classes?.maxLabel;
+  const colors = colorMap.colors.map((color, colorIndex) => ({
+    color,
+    colorIndex
+  }));
+  const orderedColors = isReverse ? colors.reverse() : colors;
+  const isStart = labelPosition === 'start';
+  const isEnd = labelPosition === 'end';
+  const isExtremes = labelPosition === 'extremes';
+  return /*#__PURE__*/_jsx(RootElement, _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: orderedColors.map(({
       color,
-      label,
-      minValue: data.min,
-      maxValue: data.max
-    };
-  }).filter(notNull);
-  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+      colorIndex
+    }, index) => {
+      const isFirst = index === 0;
+      const isLast = index === colorMap.colors.length - 1;
+      const isFirstColor = colorIndex === 0;
+      const isLastColor = colorIndex === colorMap.colors.length - 1;
+      const data = _extends({
+        index: colorIndex,
+        length: formattedLabels.length
+      }, isFirstColor ? {
+        min: null,
+        formattedMin: null
+      } : {
+        min: colorMap.thresholds[colorIndex - 1],
+        formattedMin: formattedLabels[colorIndex - 1]
+      }, isLastColor ? {
+        max: null,
+        formattedMax: null
+      } : {
+        max: colorMap.thresholds[colorIndex],
+        formattedMax: formattedLabels[colorIndex]
+      });
+      const label = labelFormatter?.(data);
+      if (label === null || label === undefined) {
+        return null;
+      }
+      const isTextBefore = isStart || isExtremes && isFirst;
+      const isTextAfter = isEnd || isExtremes && isLast;
+      const clickObject = {
+        type: 'piecewiseColor',
+        color,
+        label,
+        minValue: data.min,
+        maxValue: data.max
+      };
+      const Element = onItemClick ? 'button' : 'div';
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsxs(Element, {
+          role: onItemClick ? 'button' : undefined,
+          type: onItemClick ? 'button' : undefined,
+          onClick:
+          // @ts-ignore onClick is only attached to a button
+          onItemClick ? event => onItemClick(event, clickObject, index) : undefined,
+          className: clsx(classes?.item, index === 0 && `${startClass}`, index === orderedColors.length - 1 && `${endClass}`),
+          children: [isTextBefore && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          }), /*#__PURE__*/_jsx(ChartsLabelMark, {
+            className: classes?.mark,
+            type: markType,
+            color: color
+          }), isTextAfter && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          })]
+        })
+      }, colorIndex);
+    })
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -102,76 +233,35 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
-   * @default false
+   * @default 'horizontal'
    */
-  hideFirst: PropTypes.bool,
-  /**
-   * Hide the last item of the legend, corresponding to the [max, +infinity] piece.
-   * @default false
-   */
-  hideLast: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Format the legend labels.
    * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
-   * @returns {string|null} The displayed label, or `null` to skip the item.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
    */
   labelFormatter: PropTypes.func,
   /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
    */
-  labelStyle: PropTypes.object,
+  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
   /**
-   * Space between the mark and the label (in px).
-   * @default 5
+   * The type of the mark.
+   * @default 'square'
    */
-  markGap: PropTypes.number,
+  markType: PropTypes.oneOf(['square', 'circle', 'line']),
   /**
    * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
    * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
    * @param {number} index The index of the clicked legend item.
    */
   onItemClick: PropTypes.func,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PiecewiseColorLegend };

package/modern/ChartsLegend/chartsLegendClasses.js

@@ -1,6 +1,20 @@
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLegendUtilityClass(slot) {
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mark: ['mark'],
+    label: ['label'],
+    series: ['series']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/modern/ChartsLegend/continuousColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiContinuousColorLegend', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    gradient: ['gradient'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const continuousColorLegendClasses = generateUtilityClasses('MuiContinuousColorLegend', ['root', 'minLabel', 'maxLabel', 'gradient', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'label']);

package/modern/ChartsLegend/index.js

@@ -1,6 +1,12 @@
 export * from "./ChartsLegend.js";
-export * from "./DefaultChartsLegend.js";
+export * from "./chartsLegend.types.js";
+export * from "./direction.js";
+export * from "./legendContext.types.js";
+export { legendClasses } from "./chartsLegendClasses.js";
 export * from "./ContinuousColorLegend.js";
+export * from "./colorLegend.types.js";
+export { continuousColorLegendClasses } from "./continuousColorLegendClasses.js";
 export * from "./PiecewiseColorLegend.js";
-export * from "./chartsLegendClasses.js";
-export * from "./utils.js";
+export { piecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+export { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+export * from "./legend.types.js";

package/modern/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,7 @@
+export const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});

package/modern/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,9 @@
+export function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/modern/ChartsLegend/piecewiseColorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/piecewiseColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiPiecewiseColorLegendClasses', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);

package/modern/ChartsLegend/useAxis.js

@@ -1,8 +1,7 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
-import { useZAxis } from "../hooks/useZAxis.js";
-
+import { useZAxes } from "../hooks/useZAxis.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -12,14 +11,16 @@ export function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   switch (axisDirection) {
     case 'x':
       {

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -3,8 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useSeries } from "../hooks/useSeries.js";
-import { useSvgRef } from "../hooks/index.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useSvgRef, useXAxes, useYAxes } from "../hooks/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
@@ -15,11 +14,13 @@ function ChartsOnAxisClickHandler(props) {
   const series = useSeries();
   const store = useStore();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {

package/modern/ChartsSurface/ChartsSurface.js

@@ -9,8 +9,10 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea, useSvgRef } from "../hooks/index.js";
-import { useSize } from "../context/SizeProvider/index.js";
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -22,7 +24,6 @@ const ChartsSurfaceStyles = styled('svg', {
   height: ownerState.height ?? '100%',
   display: 'flex',
   position: 'relative',
-  flexGrow: 1,
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
@@ -47,22 +48,17 @@ const ChartsSurfaceStyles = styled('svg', {
  * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
  */
 const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const store = useStore();
   const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = useDrawingArea();
+    width: svgWidth,
+    height: svgHeight
+  } = useSelector(store, selectorChartContainerSize);
   const {
-    hasIntrinsicSize,
-    svgRef: containerRef,
-    inHeight,
-    inWidth
-  } = useSize();
+    width: propsWidth,
+    height: propsHeight
+  } = useSelector(store, selectorChartPropsSize);
   const svgRef = useSvgRef();
-  const handleRef = useForkRef(containerRef, svgRef, ref);
+  const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -75,21 +71,14 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
       desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const svgWidth = width + left + right;
-  const svgHeight = height + top + bottom;
-  const svgView = {
-    width: svgWidth,
-    height: svgHeight,
-    x: 0,
-    y: 0
-  };
+  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
   useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
     ownerState: {
-      width: inWidth,
-      height: inHeight
+      width: propsWidth,
+      height: propsHeight
     },
-    viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
+    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
     className: className
   }, other, {
     ref: handleRef,

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import clsx from 'clsx';
 import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
 import { useAxisTooltip } from "./useAxisTooltip.js";
 import { useXAxis, useYAxis } from "../hooks/index.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsAxisTooltipContent(props) {
   const {
@@ -49,7 +50,8 @@ function ChartsAxisTooltipContent(props) {
           seriesId,
           color,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType
         }) => {
           if (formattedValue == null) {
             return null;
@@ -58,7 +60,8 @@ function ChartsAxisTooltipContent(props) {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
+              children: color && /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
                 color: color,
                 className: classes.mark
               })