@mui/x-charts 6.0.0-alpha.0

package/esm/BarChart/BarChart.js

@@ -0,0 +1,255 @@
+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 { BarPlot } from './BarPlot';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { ChartsAxis } from '../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 BarChart(props) {
+  const {
+    xAxis,
+    yAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    sx,
+    tooltip,
+    axisHighlight,
+    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: 'bar'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: xAxis != null ? xAxis : [{
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: 'band',
+      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__*/_jsx("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: /*#__PURE__*/_jsx(BarPlot, {})
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      x: "band"
+    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+      id: clipPathId
+    }), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? BarChart.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({
+    color: PropTypes.string,
+    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(['bar']),
+    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 { BarChart };

package/esm/BarChart/BarElement.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import { color as d3Color } from 'd3-color';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { InteractionContext } from '../context/InteractionProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getBarElementUtilityClass(slot) {
+  return generateUtilityClass('MuiBarElement', slot);
+}
+export const lineElementClasses = generateUtilityClasses('MuiBarElement', ['root']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`]
+  };
+  return composeClasses(slots, getBarElementUtilityClass, classes);
+};
+const BarElementPath = styled('rect', {
+  name: 'MuiBarElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  stroke: 'none',
+  shapeRendering: 'crispEdges',
+  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
+  opacity: ownerState.isFaded && 0.3 || 1
+}));
+export function BarElement(props) {
+  const {
+      id,
+      dataIndex,
+      classes: innerClasses,
+      color,
+      highlightScope
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const {
+    item
+  } = React.useContext(InteractionContext);
+  const isHighlighted = getIsHighlighted(item, {
+    type: 'bar',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const isFaded = !isHighlighted && getIsFaded(item, {
+    type: 'bar',
+    seriesId: id,
+    dataIndex
+  }, highlightScope);
+  const ownerState = {
+    id,
+    dataIndex,
+    classes: innerClasses,
+    color,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(BarElementPath, _extends({}, other, {
+    ownerState: ownerState,
+    className: classes.root
+  }, getInteractionItemProps({
+    type: 'bar',
+    seriesId: id,
+    dataIndex
+  })));
+}

package/esm/BarChart/BarPlot.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { isBandScale } from '../hooks/useScale';
+import { BarElement } from './BarElement';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BarPlot() {
+  const seriesData = React.useContext(SeriesContext).bar;
+  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(React.Fragment, {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }, groupIndex) => {
+      return groupIds.flatMap(seriesId => {
+        var _series$seriesId$xAxi, _series$seriesId$yAxi;
+        const xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
+        const yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
+        const xScale = xAxis[xAxisKey].scale;
+        const yScale = yAxis[yAxisKey].scale;
+        if (!isBandScale(xScale)) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series ${stackingGroups}`);
+        }
+        if (xAxis[xAxisKey].data === undefined) {
+          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        }
+
+        // Currently assuming all bars are vertical
+        const bandWidth = xScale.bandwidth();
+        const barWidth = 0.9 * bandWidth / stackingGroups.length;
+        const offset = 0.05 * bandWidth;
+
+        // @ts-ignore TODO: fix when adding a correct API for customisation
+        const {
+          stackedData,
+          color
+        } = series[seriesId];
+        return stackedData.map((values, dataIndex) => {
+          var _xAxis$xAxisKey$data;
+          const baseline = Math.min(...values);
+          const value = Math.max(...values);
+          return /*#__PURE__*/_jsx(BarElement, {
+            id: seriesId,
+            dataIndex: dataIndex,
+            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * barWidth + offset,
+            y: yScale(value),
+            height: yScale(baseline) - yScale(value),
+            width: barWidth,
+            color: color,
+            highlightScope: series[seriesId].highlightScope
+          }, `${seriesId}-${dataIndex}`);
+        });
+      });
+    })
+  });
+}

package/esm/BarChart/extremums.js

@@ -0,0 +1,20 @@
+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 [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]);
+    return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
+  }, [null, null]);
+};

package/esm/BarChart/formatter.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { stack as d3Stack } from 'd3-shape';
+import { getStackingGroups } from '../internals/stackSeries';
+import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+const formatter = params => {
+  const {
+    seriesOrder,
+    series
+  } = params;
+  const stackingGroups = getStackingGroups(params);
+
+  // Create a data set with format adapted to d3
+  const d3Dataset = [];
+  seriesOrder.forEach(id => {
+    series[id].data.forEach((value, index) => {
+      if (d3Dataset.length <= index) {
+        d3Dataset.push({
+          [id]: value
+        });
+      } else {
+        d3Dataset[index][id] = value;
+      }
+    });
+  });
+  const completedSeries = {};
+  stackingGroups.forEach(stackingGroup => {
+    const {
+      ids,
+      stackingOffset,
+      stackingOrder
+    } = stackingGroup;
+    // Get stacked values, and derive the domain
+    const stackedSeries = d3Stack().keys(ids).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    ids.forEach((id, index) => {
+      completedSeries[id] = _extends({}, series[id], {
+        stackedData: stackedSeries[index].map(([a, b]) => [a, b])
+      });
+    });
+  });
+  return {
+    seriesOrder,
+    stackingGroups,
+    series: defaultizeValueFormatter(completedSeries, v => v.toLocaleString())
+  };
+};
+export default formatter;

package/esm/BarChart/index.js

@@ -0,0 +1,2 @@
+export { BarPlot } from './BarPlot';
+export { BarChart } from './BarChart';

package/esm/ChartContainer/index.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { DrawingProvider } from '../context/DrawingProvider';
+import { SeriesContextProvider } from '../context/SeriesContextProvider';
+import { InteractionProvider } from '../context/InteractionProvider';
+import { ChartsSurface } from '../ChartsSurface';
+import { CartesianContextProvider } from '../context/CartesianContextProvider';
+import { HighlightProvider } from '../context/HighlightProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChartContainer(props) {
+  const {
+    width,
+    height,
+    series,
+    margin,
+    xAxis,
+    yAxis,
+    colors,
+    sx,
+    title,
+    desc,
+    disableAxisListener,
+    children
+  } = props;
+  const ref = React.useRef(null);
+  return /*#__PURE__*/_jsx(DrawingProvider, {
+    width: width,
+    height: height,
+    margin: margin,
+    svgRef: ref,
+    children: /*#__PURE__*/_jsx(SeriesContextProvider, {
+      series: series,
+      colors: colors,
+      children: /*#__PURE__*/_jsx(CartesianContextProvider, {
+        xAxis: xAxis,
+        yAxis: yAxis,
+        children: /*#__PURE__*/_jsx(InteractionProvider, {
+          children: /*#__PURE__*/_jsx(HighlightProvider, {
+            children: /*#__PURE__*/_jsx(ChartsSurface, {
+              width: width,
+              height: height,
+              ref: ref,
+              sx: sx,
+              title: title,
+              desc: desc,
+              disableAxisListener: disableAxisListener,
+              children: children
+            })
+          })
+        })
+      })
+    })
+  });
+}

package/esm/ChartsAxis/ChartsAxis.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { ChartsXAxis } from '../ChartsXAxis';
+import { ChartsYAxis } from '../ChartsYAxis';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getAxisId = propsValue => {
+  if (propsValue == null) {
+    return null;
+  }
+  if (typeof propsValue === 'object') {
+    return propsValue.axisId;
+  }
+  return propsValue;
+};
+function ChartsAxis(props) {
+  const {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis
+  } = props;
+  const {
+    xAxis,
+    xAxisIds,
+    yAxis,
+    yAxisIds
+  } = React.useContext(CartesianContext);
+
+  // TODO: use for plotting line without ticks or any thing
+  // const drawingArea = React.useContext(DrawingContext);
+
+  const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis);
+  const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis);
+  const topId = getAxisId(topAxis);
+  const rightId = getAxisId(rightAxis);
+  if (topId !== null && !xAxis[topId]) {
+    throw Error(`MUI: id used for top axis "${topId}" is not defined`);
+  }
+  if (leftId !== null && !yAxis[leftId]) {
+    throw Error(`MUI: id used for left axis "${leftId}" is not defined`);
+  }
+  if (rightId !== null && !yAxis[rightId]) {
+    throw Error(`MUI: id used for right axis "${rightId}" is not defined`);
+  }
+  if (bottomId !== null && !xAxis[bottomId]) {
+    throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+      position: "top",
+      axisId: topId
+    }, typeof topAxis === 'object' ? topAxis : {})), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+      position: "bottom",
+      axisId: bottomId
+    }, typeof bottomAxis === 'object' ? bottomAxis : {})), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+      position: "left",
+      axisId: leftId
+    }, typeof leftAxis === 'object' ? leftAxis : {})), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+      position: "right",
+      axisId: rightId
+    }, typeof rightAxis === 'object' ? rightAxis : {}))]
+  });
+}
+process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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]),
+  /**
+   * 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]),
+  /**
+   * 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]),
+  /**
+   * 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])
+} : void 0;
+export { ChartsAxis };

package/esm/ChartsAxis/axisClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getAxisUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsAxis', slot);
+}
+export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/esm/ChartsAxis/index.js

@@ -0,0 +1,2 @@
+export * from './ChartsAxis';
+export * from './axisClasses';