@mui/x-charts 7.0.0-beta.1 → 7.0.0-beta.3

package/esm/ScatterChart/ScatterChart.js

@@ -8,6 +8,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
+import { ChartsGrid } from '../ChartsGrid';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -35,6 +36,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     margin,
     colors,
     sx,
+    grid,
     topAxis,
     leftAxis,
     rightAxis,
@@ -66,6 +68,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
+    }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
+      vertical: grid.vertical,
+      horizontal: grid.horizontal
     }), /*#__PURE__*/_jsx(ScatterPlot, {
       slots: slots,
       slotProps: slotProps,
@@ -86,6 +91,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @default { x: 'none', y: 'none' }
+   */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
@@ -96,7 +106,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -140,6 +150,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid: PropTypes.shape({
+    horizontal: PropTypes.bool,
+    vertical: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -151,7 +168,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -210,7 +227,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -231,6 +248,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The series to display in the scatter chart.
+   */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * The props used for each component slot.
@@ -244,6 +264,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   * @default { trigger: 'item' }
+   */
   tooltip: PropTypes.shape({
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
@@ -258,7 +283,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
@@ -301,7 +326,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -309,13 +334,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, 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']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -335,7 +361,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -343,13 +369,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, 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']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/esm/SparkLineChart/SparkLineChart.js

@@ -42,7 +42,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     slotProps,
     data,
     plotType = 'line',
-    valueFormatter = v => v === null ? '' : v.toString(),
+    valueFormatter = value => value === null ? '' : value.toString(),
     area,
     curve = 'linear'
   } = props;
@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
    * @returns {string} the formatted value.
-   * @default (v: number | null) => (v === null ? '' : v.toString())
+   * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: PropTypes.func,
   viewBox: PropTypes.shape({
@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single configuration object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -234,13 +234,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, 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']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/esm/context/CartesianContextProvider.js

@@ -110,7 +110,7 @@ function CartesianContextProvider(props) {
       var _axis$scaleType, _axis$min, _axis$max, _axis$min2, _axis$max2;
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
-      const range = [drawingArea.left, drawingArea.left + drawingArea.width];
+      const range = axis.reverse ? [drawingArea.left + drawingArea.width, drawingArea.left] : [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati, _axis$barGapRatio;
         const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
@@ -161,7 +161,7 @@ function CartesianContextProvider(props) {
       var _axis$scaleType2, _axis$min3, _axis$max3, _axis$min4, _axis$max4;
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis);
-      const range = [drawingArea.top + drawingArea.height, drawingArea.top];
+      const range = axis.reverse ? [drawingArea.top, drawingArea.top + drawingArea.height] : [drawingArea.top + drawingArea.height, drawingArea.top];
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati2;
         const categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
@@ -231,7 +231,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -239,13 +239,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, 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']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
@@ -265,7 +266,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
    * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.string,
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -273,13 +274,14 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
-    id: PropTypes.string,
+    id: PropTypes.oneOfType([PropTypes.number, 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']),
+    reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,

package/esm/hooks/useTicks.js

@@ -13,7 +13,7 @@ export function getTickNumber(params) {
   const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
-function useTicks(options) {
+export function useTicks(options) {
   const {
     scale,
     tickNumber,
@@ -64,5 +64,4 @@ function useTicks(options) {
       };
     });
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-export default useTicks;
+}

package/esm/index.js

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
@@ -19,6 +20,7 @@ export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
+export * from './Gauge';
 export * from './ChartContainer';
 export * from './ChartsSurface';
 export * from './ResponsiveChartContainer';

package/hooks/useTicks.d.ts

@@ -39,8 +39,7 @@ export type TickItemType = {
     offset: number;
     labelOffset: number;
 };
-declare function useTicks(options: {
+export declare function useTicks(options: {
     scale: D3Scale;
     valueFormatter?: (value: any) => string;
 } & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
-export default useTicks;

package/hooks/useTicks.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
 exports.getTickNumber = getTickNumber;
+exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _isBandScale = require("../internals/isBandScale");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -64,5 +64,4 @@ function useTicks(options) {
       labelOffset: 0
     }));
   }, [tickNumber, scale, valueFormatter, tickInterval]);
-}
-var _default = exports.default = useTicks;
+}

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsGrid';
 export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
@@ -19,6 +20,7 @@ export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
 export * from './SparkLineChart';
+export * from './Gauge';
 export * from './ChartContainer';
 export * from './ChartsSurface';
 export * from './ResponsiveChartContainer';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.1
+ * @mui/x-charts v7.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -120,6 +120,17 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
     }
   });
 });
+var _ChartsGrid = require("./ChartsGrid");
+Object.keys(_ChartsGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsGrid[key];
+    }
+  });
+});
 var _ChartsText = require("./ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -241,6 +252,17 @@ Object.keys(_SparkLineChart).forEach(function (key) {
     }
   });
 });
+var _Gauge = require("./Gauge");
+Object.keys(_Gauge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Gauge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Gauge[key];
+    }
+  });
+});
 var _ChartContainer = require("./ChartContainer");
 Object.keys(_ChartContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -4,7 +4,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         color: string;
         label?: string | undefined;
         value: number;
-        id?: string | number | undefined;
+        id?: import("../models/seriesType").PieItemId | undefined;
     }[];
     type: "pie";
     innerRadius?: string | number | undefined;
@@ -37,7 +37,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
         arcLabelRadius?: number | undefined;
         color?: string | undefined;
     } | undefined;
-    id?: string | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
     color?: string | undefined;
     valueFormatter?: (<V extends import("../models/helpers").MakeOptional<import("../models/seriesType").PieValueType, "id">>(value: V) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
@@ -48,7 +48,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     label?: string | undefined;
     layout?: "horizontal" | "vertical" | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
-    id?: string | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
     color: string;
     valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
@@ -56,6 +56,18 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     yAxisKey?: string | undefined;
     stack?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
+} | {
+    type: "scatter";
+    data: import("../models/seriesType").ScatterValueType[];
+    markerSize?: number | undefined;
+    label?: string | undefined;
+    disableHover?: boolean | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
+    color: string;
+    valueFormatter?: (<V_2 extends import("../models/seriesType").ScatterValueType>(value: V_2) => string) | undefined;
+    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    xAxisKey?: string | undefined;
+    yAxisKey?: string | undefined;
 } | {
     type: "line";
     data?: (number | null)[] | undefined;
@@ -68,23 +80,11 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     disableHighlight?: boolean | undefined;
     connectNulls?: boolean | undefined;
     stackOffset?: import("..").StackOffsetType | undefined;
-    id?: string | undefined;
+    id?: import("../models/seriesType/common").SeriesId | undefined;
     color: string;
     valueFormatter?: (<V_1 extends number | null>(value: V_1) => string) | undefined;
     highlightScope?: Partial<import("..").HighlightScope> | undefined;
     xAxisKey?: string | undefined;
     yAxisKey?: string | undefined;
     stackOrder?: import("..").StackOrderType | undefined;
-} | {
-    type: "scatter";
-    data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | undefined;
-    disableHover?: boolean | undefined;
-    id?: string | undefined;
-    color: string;
-    valueFormatter?: (<V_2 extends import("../models/seriesType").ScatterValueType>(value: V_2) => string) | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
 };

package/internals/defaultizeValueFormatter.d.ts

@@ -1,10 +1,7 @@
+import { SeriesId } from '../models/seriesType/common';
 declare function defaultizeValueFormatter<ISeries extends {
     valueFormatter?: IFormatter;
-}, IFormatter extends (v: any) => string>(series: {
-    [id: string]: ISeries;
-}, defaultValueFormatter: IFormatter): {
-    [id: string]: ISeries & {
-        valueFormatter: IFormatter;
-    };
-};
+}, IFormatter extends (v: any) => string>(series: Record<SeriesId, ISeries>, defaultValueFormatter: IFormatter): Record<SeriesId, ISeries & {
+    valueFormatter: IFormatter;
+}>;
 export default defaultizeValueFormatter;

package/internals/stackSeries.d.ts

@@ -1,21 +1,18 @@
 import { Series } from 'd3-shape';
 import type { BarSeriesType, LineSeriesType } from '../models/seriesType';
 import type { StackOffsetType, StackOrderType } from '../models/stacking';
-type StackableSeries = {
-    [id: string]: BarSeriesType;
-} | {
-    [id: string]: LineSeriesType;
-};
+import { SeriesId } from '../models/seriesType/common';
+type StackableSeries = Record<SeriesId, BarSeriesType> | Record<SeriesId, LineSeriesType>;
 type FormatterParams = {
     series: StackableSeries;
-    seriesOrder: string[];
+    seriesOrder: SeriesId[];
     defaultStrategy?: {
         stackOrder?: StackOrderType;
         stackOffset?: StackOffsetType;
     };
 };
 export type StackingGroupsType = {
-    ids: string[];
+    ids: SeriesId[];
     stackingOrder: (series: Series<any, any>) => number[];
     stackingOffset: (series: Series<any, any>, order: Iterable<number>) => void;
 }[];