@mui/x-charts 6.0.0-alpha.0

package/esm/LineChart/LineChart.js

@@ -0,0 +1,259 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import PropTypes from 'prop-types';
+import { AreaPlot } from './AreaPlot';
+import { LinePlot } from './LinePlot';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { MarkPlot } from './MarkPlot';
+import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsLegend } from '../ChartsLegend';
+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) {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    sx,
+    tooltip,
+    axisHighlight = {
+      x: 'line'
+    },
+    legend,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    children
+  } = props;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    series: series.map(s => _extends({
+      type: 'line'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis != null ? xAxis : [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'point',
+      data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
+    }],
+    yAxis: yAxis,
+    colors: colors,
+    sx: sx,
+    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
+    children: [/*#__PURE__*/_jsxs("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {})]
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/_jsx(MarkPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      id: clipPathId
+    }), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  /**
+   * Indicate which axis to display the the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  legend: PropTypes.shape({
+    classes: PropTypes.object,
+    direction: PropTypes.oneOf(['column', 'row']),
+    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
+    }),
+    spacing: PropTypes.number
+  }),
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * Indicate which axis to display the the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * @default null
+   */
+  rightAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['left', 'right']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  series: PropTypes.arrayOf(PropTypes.shape({
+    area: PropTypes.bool,
+    color: PropTypes.string,
+    curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+    data: PropTypes.arrayOf(PropTypes.number).isRequired,
+    highlightScope: PropTypes.shape({
+      faded: PropTypes.oneOf(['global', 'none', 'series']),
+      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+    }),
+    id: PropTypes.string,
+    label: PropTypes.string,
+    stack: PropTypes.string,
+    stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
+    stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
+    type: PropTypes.oneOf(['line']),
+    valueFormatter: PropTypes.func,
+    xAxisKey: PropTypes.string,
+    yAxisKey: PropTypes.string
+  })).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * @default null
+   */
+  topAxis: PropTypes.oneOfType([PropTypes.shape({
+    axisId: PropTypes.string.isRequired,
+    classes: PropTypes.object,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'top']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number
+  }), PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })),
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.number,
+    maxTicks: PropTypes.number,
+    min: PropTypes.number,
+    minTicks: PropTypes.number,
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
+    valueFormatter: PropTypes.func
+  }))
+} : void 0;
+export { LineChart };

package/esm/LineChart/LineElement.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "classes", "color", "highlightScope"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { color as d3Color } from 'd3-color';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { InteractionContext } from '../context/InteractionProvider';
+import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getLineElementUtilityClass(slot) {
+  return generateUtilityClass('MuiLineElement', slot);
+}
+export const lineElementClasses = generateUtilityClasses('MuiLineElement', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getLineElementUtilityClass, classes);
+};
+const LineElementPath = styled('path', {
+  name: 'MuiLineElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  strokeWidth: 2,
+  strokeLinejoin: 'round',
+  fill: 'none',
+  stroke: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
+  transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
+  opacity: ownerState.isFaded ? 0.3 : 1
+}));
+LineElementPath.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  as: PropTypes.elementType,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired
+  }).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+};
+function LineElement(props) {
+  const {
+      id,
+      classes: innerClasses,
+      color,
+      highlightScope
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const isHighlighted = getIsHighlighted(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
+    ownerState: ownerState,
+    className: classes.root
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id
+  })));
+}
+process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  })
+} : void 0;
+export { LineElement };

package/esm/LineChart/LinePlot.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { line as d3Line } from 'd3-shape';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { LineElement } from './LineElement';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import getCurveFactory from '../internals/getCurve';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinePlot() {
+  const seriesData = React.useContext(SeriesContext).line;
+  const axisData = React.useContext(CartesianContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  return /*#__PURE__*/_jsx("g", {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData
+        } = series[seriesId];
+        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+        const yScale = yAxis[yAxisKey].scale;
+        const xData = xAxis[xAxisKey].data;
+        if (xData === undefined) {
+          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+        }
+        const linePath = d3Line().x(d => xScale(d.x)).y(d => yScale(d.y[1]));
+        const curve = getCurveFactory(series[seriesId].curve);
+        const d3Data = xData == null ? void 0 : xData.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        }));
+        return /*#__PURE__*/_jsx(LineElement, {
+          id: seriesId,
+          d: linePath.curve(curve)(d3Data) || undefined,
+          color: series[seriesId].color,
+          highlightScope: series[seriesId].highlightScope
+        }, seriesId);
+      });
+    })
+  });
+}

package/esm/LineChart/MarkElement.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
+import { getSymbol } from '../internals/utils';
+import { InteractionContext } from '../context/InteractionProvider';
+import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};
+const MarkElementPath = styled('path', {
+  name: 'MuiMarkElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: (theme.vars || theme).palette.background.paper,
+  stroke: ownerState.color,
+  strokeWidth: 2,
+  '&.MuiMarkElement-highlighted': {
+    fill: ownerState.color
+  }
+}));
+MarkElementPath.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  as: PropTypes.elementType,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired,
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired
+  }).isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+};
+function MarkElement(props) {
+  var _axis$x;
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      shape,
+      dataIndex,
+      highlightScope
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const {
+    item,
+    axis
+  } = React.useContext(InteractionContext);
+  const isHighlighted = ((_axis$x = axis.x) == null ? void 0 : _axis$x.index) === dataIndex || getIsHighlighted(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'line',
+    seriesId: id
+  }, highlightScope);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted,
+    isFaded,
+    color,
+    x,
+    y
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
+    ownerState: ownerState,
+    className: classes.root,
+    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  /**
+   * The shape of the marker.
+   */
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+} : void 0;
+export { MarkElement };

package/esm/LineChart/MarkPlot.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { MarkElement } from './MarkElement';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MarkPlot() {
+  const seriesData = React.useContext(SeriesContext).line;
+  const axisData = React.useContext(CartesianContext);
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  return /*#__PURE__*/_jsx("g", {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData
+        } = series[seriesId];
+        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+        const yScale = yAxis[yAxisKey].scale;
+        const xData = xAxis[xAxisKey].data;
+        const xRange = xAxis[xAxisKey].scale.range();
+        const yRange = yScale.range();
+        const isInRange = ({
+          x,
+          y
+        }) => {
+          if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
+            return false;
+          }
+          if (y < Math.min(...yRange) || y > Math.max(...yRange)) {
+            return false;
+          }
+          return true;
+        };
+        if (xData === undefined) {
+          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
+        }
+        return xData == null ? void 0 : xData.map((x, index) => {
+          const y = stackedData[index][1];
+          return {
+            x: xScale(x),
+            y: yScale(y),
+            index
+          };
+        }).filter(isInRange).map(({
+          x,
+          y,
+          index
+        }) => /*#__PURE__*/_jsx(MarkElement, {
+          id: seriesId,
+          dataIndex: index,
+          shape: "circle",
+          color: series[seriesId].color,
+          x: x,
+          y: y,
+          highlightScope: series[seriesId].highlightScope
+        }, `${seriesId}-${index}`));
+      });
+    })
+  });
+}

package/esm/LineChart/extremums.js

@@ -0,0 +1,29 @@
+export const getExtremumX = params => {
+  var _axis$data, _axis$data2;
+  const {
+    axis
+  } = params;
+  const minX = Math.min(...((_axis$data = axis.data) != null ? _axis$data : []));
+  const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
+  return [minX, maxX];
+};
+export const getExtremumY = params => {
+  const {
+    series,
+    axis,
+    isDefaultAxis
+  } = params;
+  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+    const isArea = series[seriesId].area !== undefined;
+    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Id area should go from bottom to top, without area should only consider the top
+
+    const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, stackedValue) => {
+      const [min, max] = getValues(stackedValue);
+      return [Math.min(min, seriesAcc[0]), Math.max(max, seriesAcc[1])];
+    }, getValues(series[seriesId].stackedData[0]));
+    if (acc[0] === null || acc[1] === null) {
+      return [seriesMin, seriesMax];
+    }
+    return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
+  }, [null, null]);
+};