@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/legacy/hooks/useReducedMotion.js

@@ -0,0 +1,27 @@
+import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export var useReducedMotion = function useReducedMotion() {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  useIsomorphicLayoutEffect(function () {
+    var mql = window.matchMedia('(prefers-reduced-motion)');
+    var handleMediaChange = function handleMediaChange(e) {
+      Globals.assign({
+        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+        skipAnimation: e.matches || undefined
+      });
+    };
+    handleMediaChange(mql);
+    mql.addEventListener('change', handleMediaChange);
+    return function () {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};

package/legacy/hooks/useTicks.js

@@ -1,7 +1,8 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
-export function getTicksNumber(params) {
+export function getTickNumber(params) {
   var tickMaxStep = params.tickMaxStep,
     tickMinStep = params.tickMinStep,
     tickNumber = params.tickNumber,
@@ -14,8 +15,9 @@ export function getTicksNumber(params) {
 }
 function useTicks(options) {
   var scale = options.scale,
-    ticksNumber = options.ticksNumber,
-    valueFormatter = options.valueFormatter;
+    tickNumber = options.tickNumber,
+    valueFormatter = options.valueFormatter,
+    tickInterval = options.tickInterval;
   return React.useMemo(function () {
     // band scale
     if (isBandScale(scale)) {
@@ -25,7 +27,8 @@ function useTicks(options) {
         return [].concat(_toConsumableArray(domain.map(function (value) {
           var _valueFormatter;
           return {
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            value: value,
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : "".concat(value),
             offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
@@ -37,23 +40,27 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(function (value) {
+      var filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || _typeof(tickInterval) === 'object' && tickInterval || domain;
+      return filteredDomain.map(function (value) {
         var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          value: value,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : "".concat(value),
           offset: scale(value),
           labelOffset: 0
         };
       });
     }
-    return scale.ticks(ticksNumber).map(function (value) {
+    var ticks = _typeof(tickInterval) === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(function (value) {
       var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
+        value: value,
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 export default useTicks;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.9
+ * @mui/x-charts v6.18.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ export * from './hooks';
 export * from './colorPalettes';
 export * from './models';
 export * from './ChartsClipPath';
+export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';

package/legacy/internals/components/AxisSharedComponents.js

@@ -1,6 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _$concat, _styled;
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { axisClasses } from '../../ChartsAxis/axisClasses';
 export var AxisRoot = styled('g', {
@@ -9,72 +8,19 @@ export var AxisRoot = styled('g', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})((_styled = {}, _defineProperty(_styled, "&.".concat(axisClasses.directionY), (_$concat = {}, _defineProperty(_$concat, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'middle'
-}), _defineProperty(_$concat, ".".concat(axisClasses.label), {
-  dominantBaseline: 'auto',
-  textAnchor: 'middle'
-}), _$concat)), _defineProperty(_styled, "&.".concat(axisClasses.left), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'central',
-  textAnchor: 'end'
-})), _defineProperty(_styled, "&.".concat(axisClasses.right), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'central',
-  textAnchor: 'start'
-})), _defineProperty(_styled, "&.".concat(axisClasses.bottom), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  dominantBaseline: 'hanging',
-  textAnchor: 'middle'
-})), _defineProperty(_styled, "&.".concat(axisClasses.top), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  dominantBaseline: 'baseline',
-  textAnchor: 'middle'
-})), _styled));
-export var ChartsLine = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.line;
-  }
 })(function (_ref) {
+  var _ref2;
   var theme = _ref.theme;
-  return {
-    stroke: theme.palette.text.primary,
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  })), _defineProperty(_ref2, "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  })), _defineProperty(_ref2, "& .".concat(axisClasses.line), {
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
-  };
-});
-export var ChartsTick = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.tick;
-  }
-})(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    stroke: theme.palette.text.primary,
+  }), _defineProperty(_ref2, "& .".concat(axisClasses.tick), {
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
-  };
-});
-export var ChartsTickLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.tickLabel;
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return _extends({}, theme.typography.caption, {
-    fill: theme.palette.text.primary
-  });
-});
-export var ChartsLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.label;
-  }
-})(function (_ref4) {
-  var theme = _ref4.theme;
-  return _extends({}, theme.typography.body1, {
-    fill: theme.palette.text.primary
-  });
+  }), _ref2;
 });

package/legacy/internals/components/ChartsText.js

@@ -0,0 +1,79 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
+import * as React from 'react';
+import { getStringSize } from '../domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getWordsByLines(_ref) {
+  var style = _ref.style,
+    needsComputation = _ref.needsComputation,
+    text = _ref.text;
+  return text.split('\n').map(function (subText) {
+    return _extends({
+      text: subText
+    }, needsComputation ? getStringSize(subText, style) : {
+      width: 0,
+      height: 0
+    });
+  });
+}
+export function ChartsText(props) {
+  var x = props.x,
+    y = props.y,
+    styleProps = props.style,
+    text = props.text,
+    ownerState = props.ownerState,
+    textProps = _objectWithoutProperties(props, _excluded);
+  var _ref2 = styleProps != null ? styleProps : {},
+    angle = _ref2.angle,
+    textAnchor = _ref2.textAnchor,
+    dominantBaseline = _ref2.dominantBaseline,
+    style = _objectWithoutProperties(_ref2, _excluded2);
+  var wordsByLines = React.useMemo(function () {
+    return getWordsByLines({
+      style: style,
+      needsComputation: text.includes('\n'),
+      text: text
+    });
+  }, [style, text]);
+  var startDy;
+  switch (dominantBaseline) {
+    case 'hanging':
+      startDy = 0;
+      break;
+    case 'central':
+      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
+      break;
+    default:
+      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
+      break;
+  }
+  var transforms = [];
+  // if (scaleToFit) {
+  //   const lineWidth = wordsByLines[0].width;
+  //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
+  // }
+  if (angle) {
+    transforms.push("rotate(".concat(angle, ", ").concat(x, ", ").concat(y, ")"));
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
+  return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
+    x: x,
+    y: y,
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline,
+    style: style,
+    children: wordsByLines.map(function (line, index) {
+      return /*#__PURE__*/_jsx("tspan", {
+        x: x,
+        dy: "".concat(index === 0 ? startDy : wordsByLines[0].height, "px"),
+        dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+        ,
+        children: line.text
+      }, index);
+    })
+  }));
+}

package/legacy/internals/domUtils.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+// DOM utils taken from
+// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
+
+var isSsr = function isSsr() {
+  return !(typeof window !== 'undefined' && window.document && window.setTimeout);
+};
+var stringCache = {
+  widthCache: {},
+  cacheCount: 0
+};
+var MAX_CACHE_NUM = 2000;
+var SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+var STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
+var MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+
+/**
+ *
+ * @param name CSS property name
+ * @param value
+ * @returns add 'px' for distance properties
+ */
+function autoCompleteStyle(name, value) {
+  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
+    return "".concat(value, "px");
+  }
+  return value;
+}
+
+/**
+ *
+ * @param text camelcase css property
+ * @returns css property
+ */
+function camelToMiddleLine(text) {
+  var strs = text.split('');
+  var formatStrs = strs.reduce(function (result, entry) {
+    if (entry === entry.toUpperCase()) {
+      return [].concat(_toConsumableArray(result), ['-', entry.toLowerCase()]);
+    }
+    return [].concat(_toConsumableArray(result), [entry]);
+  }, []);
+  return formatStrs.join('');
+}
+
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+export var getStyleString = function getStyleString(style) {
+  return Object.keys(style).sort().reduce(function (result, s) {
+    return "".concat(result).concat(camelToMiddleLine(s), ":").concat(autoCompleteStyle(s, style[s]), ";");
+  }, '');
+};
+
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+export var getStringSize = function getStringSize(text) {
+  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (text === undefined || text === null || isSsr()) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  var str = "".concat(text);
+  var styleString = getStyleString(style);
+  var cacheKey = "".concat(str, "-").concat(styleString);
+  if (stringCache.widthCache[cacheKey]) {
+    return stringCache.widthCache[cacheKey];
+  }
+  try {
+    var measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (measurementSpan === null) {
+      measurementSpan = document.createElement('span');
+      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(measurementSpan);
+    }
+    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
+    // https://en.wikipedia.org/wiki/Content_Security_Policy
+    var measurementSpanStyle = _extends({}, SPAN_STYLE, style);
+    Object.keys(measurementSpanStyle).map(function (styleKey) {
+      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+      return styleKey;
+    });
+    measurementSpan.textContent = str;
+    var rect = measurementSpan.getBoundingClientRect();
+    var result = {
+      width: rect.width,
+      height: rect.height
+    };
+    stringCache.widthCache[cacheKey] = result;
+    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
+      stringCache.cacheCount = 0;
+      stringCache.widthCache = {};
+    } else {
+      stringCache.cacheCount += 1;
+    }
+    return result;
+  } catch (e) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+};

package/legacy/internals/geometry.js

@@ -0,0 +1,37 @@
+var ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle as perfectly horizontal/vertical
+
+var warnedOnce = false;
+
+/**
+ * Return the minimal translation along the x-axis to avoid overflow of a rectangle of a given width, height, and rotation.
+ * This assumes that all rectangles have the same height and angle between -90 and 90.
+ * Otherwise it would be problematic because you need the height/width of the next rectangle to do the correct computation.
+ * @param width the side along the x-axis.
+ * @param height the side along the y-axis.
+ * @param angle the rotation in degrees.
+ */
+export function getMinXTranslation(width, height) {
+  var angle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce && angle > 90 && angle < -90) {
+      warnedOnce = true;
+      console.warn(["MUI X: It seems you applied an angle larger than 90\xB0 or smaller than -90\xB0 to an axis text.", "This could cause some text overlapping.", "If you encounter a use case where it's needed, please open an issue."].join('\n'));
+    }
+  }
+  var standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]
+
+  if (standardAngle < ANGLE_APPROX) {
+    // It's nearly horizontal
+    return width;
+  }
+  if (standardAngle > 90 - ANGLE_APPROX) {
+    // It's nearly vertical
+    return height;
+  }
+  var radAngle = standardAngle * Math.PI / 180;
+  var angleSwich = Math.atan2(height, width);
+  if (radAngle < angleSwich) {
+    return width / Math.cos(radAngle);
+  }
+  return height / Math.sin(radAngle);
+}

package/models/axis.d.ts

@@ -2,25 +2,29 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
-export type D3Scale = ScaleBand<any> | ScaleLogarithmic<any, any> | ScalePoint<any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
-export type D3ContinuouseScale = ScaleLogarithmic<any, any> | ScalePower<any, any> | ScaleTime<any, any> | ScaleLinear<any, any>;
+import { ChartsTextProps } from '../internals/components/ChartsText';
+export type D3Scale<Domain extends {
+    toString(): string;
+} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3ContinuouseScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlotsComponent {
     axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
     axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
-    axisTickLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
-    axisLabel?: React.JSXElementConstructor<React.SVGAttributes<SVGTextElement>>;
+    axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+    axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
 }
 export interface ChartsAxisSlotComponentProps {
     axisLine?: Partial<React.SVGAttributes<SVGPathElement>>;
     axisTick?: Partial<React.SVGAttributes<SVGPathElement>>;
-    axisTickLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
-    axisLabel?: Partial<React.SVGAttributes<SVGTextElement>>;
+    axisTickLabel?: Partial<ChartsTextProps>;
+    axisLabel?: Partial<ChartsTextProps>;
 }
 export interface ChartsAxisProps extends TickParams {
     /**
-     * Id of the axis to render.
+     * The id of the axis to render.
+     * If undefined, it will be the first defined axis.
      */
-    axisId: string;
+    axisId?: string;
     /**
      * If true, the axis line is disabled.
      * @default false
@@ -39,8 +43,24 @@ export interface ChartsAxisProps extends TickParams {
     /**
      * The font size of the axis ticks text.
      * @default 12
+     * @deprecated Consider using `tickLabelStyle.fontSize` instead.
      */
     tickFontSize?: number;
+    /**
+     * The style applied to ticks text.
+     */
+    tickLabelStyle?: ChartsTextProps['style'];
+    /**
+     * The style applied to the axis label.
+     */
+    labelStyle?: ChartsTextProps['style'];
+    /**
+     * Defines which ticks get its label displayed. Its value can be:
+     * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+     * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+     * @default 'auto'
+     */
+    tickLabelInterval?: 'auto' | ((value: any, index: number) => boolean);
     /**
      * The label of the axis.
      */
@@ -48,6 +68,7 @@ export interface ChartsAxisProps extends TickParams {
     /**
      * The font size of the axis label.
      * @default 14
+     * @deprecated Consider using `labelStyle.fontSize` instead.
      */
     labelFontSize?: number;
     /**
@@ -92,56 +113,70 @@ export type ContinuouseScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' |
 interface AxisScaleConfig {
     band: {
         scaleType: 'band';
-        scale: ScaleBand<any>;
+        scale: ScaleBand<number | Date | string>;
         /**
          * The ratio between the space allocated for padding between two categories and the category width.
          * 0 means no gap, and 1 no data.
-         * @default 0.1
+         * @default 0.2
          */
         categoryGapRatio: number;
         /**
          * The ratio between the width of a bar, and the gap between two bars.
          * 0 means no gap, and 1 no bar.
-         * @default 0
+         * @default 0.1
          */
         barGapRatio: number;
     };
     point: {
         scaleType: 'point';
-        scale: ScalePoint<any>;
+        scale: ScalePoint<number | Date | string>;
     };
     log: {
         scaleType: 'log';
-        scale: ScaleLogarithmic<any, any>;
+        scale: ScaleLogarithmic<number, number>;
     };
     pow: {
         scaleType: 'pow';
-        scale: ScalePower<any, any>;
+        scale: ScalePower<number, number>;
     };
     sqrt: {
         scaleType: 'sqrt';
-        scale: ScalePower<any, any>;
+        scale: ScalePower<number, number>;
     };
     time: {
         scaleType: 'time';
-        scale: ScaleTime<any, any>;
+        scale: ScaleTime<number, number>;
     };
     utc: {
         scaleType: 'utc';
-        scale: ScaleTime<any, any>;
+        scale: ScaleTime<number, number>;
     };
     linear: {
         scaleType: 'linear';
-        scale: ScaleLinear<any, any>;
+        scale: ScaleLinear<number, number>;
     };
 }
 export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
+    /**
+     * Id used to identify the axis.
+     */
     id: string;
+    /**
+     * The minimal value of the domain.
+     * If not provided, it gets computed to display the entire chart data.
+     */
     min?: number | Date;
+    /**
+     * The maximal value of the domain.
+     * If not provided, it gets computed to display the entire chart data.
+     */
     max?: number | Date;
+    /**
+     * The data used by `'band'` and `'point'` scales.
+     */
     data?: V[];
     /**
-     * The key used to retrieve data from the dataset prop.
+     * The key used to retrieve `data` from the `dataset` prop.
      */
     dataKey?: string;
     valueFormatter?: (value: V) => string;
@@ -151,7 +186,10 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
     hideTooltip?: boolean;
 } & Partial<ChartsXAxisProps | ChartsYAxisProps> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams;
 export type AxisDefaultized<S extends ScaleName = ScaleName, V = any> = Omit<AxisConfig<S, V>, 'scaleType'> & AxisScaleConfig[S] & {
-    ticksNumber: number;
+    /**
+     * An indication of the expected number of ticks.
+     */
+    tickNumber: number;
 };
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
     scaleType: 'band';

package/models/layout.d.ts

@@ -1,10 +1,17 @@
+export interface CardinalDirections<T> {
+    top?: T;
+    bottom?: T;
+    left?: T;
+    right?: T;
+}
 export type LayoutConfig = {
     width: number;
     height: number;
-    margin?: {
-        top?: number;
-        bottom?: number;
-        left?: number;
-        right?: number;
-    };
+    /**
+     * The margin between the SVG and the drawing area.
+     * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+     * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+     * @default object Depends on the charts type.
+     */
+    margin?: Partial<CardinalDirections<number>>;
 };

package/models/seriesType/common.d.ts

@@ -13,12 +13,28 @@ export type CommonSeriesType<TValue> = {
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {
+    /**
+     * The id of the x-axis used to render the series.
+     */
     xAxisKey?: string;
+    /**
+     * The id of the y-axis used to render the series.
+     */
     yAxisKey?: string;
 };
 export type StackableSeriesType = {
+    /**
+     * The key that identifies the stacking group.
+     * Series with the same `stack` property will be stacked together.
+     */
     stack?: string;
+    /**
+     * Defines how stacked series handle negative values.
+     */
     stackOffset?: StackOffsetType;
+    /**
+     * The order in which series' of the same group are stacked together.
+     */
     stackOrder?: StackOrderType;
 };
 export type StackOrderType = keyof typeof StackOrder;