recharts - npm Package Compare versions

Comparing version 2.10.4 to 2.11.0

CONTRIBUTING.md

@@ -13,3 +13,3 @@ # Contributing to Recharts
 
-We use Github Discussion to organise our discussion along new intiatives and organise ourselves. Please do check the [announcements](https://github.com/recharts/recharts/discussions/categories/announcements) section for an overview of recent initiatives.
+We use Github Discussion to organize our discussion along new initiatives and organize ourselves. Please do check the [announcements](https://github.com/recharts/recharts/discussions/categories/announcements) section for an overview of recent initiatives.
 
@@ -16,0 +16,0 @@ ## <a name="issues"></a>Issues and Bugs

es6/cartesian/Area.js

@@ -87,3 +87,3 @@ var _excluded = ["layout", "type", "stroke", "connectNulls", "isRange", "ref"];
         dataKey = _this$props.dataKey;
-      var areaProps = filterProps(this.props);
+      var areaProps = filterProps(this.props, false);
       var customDotProps = filterProps(dot, true);
@@ -201,3 +201,3 @@ var dots = points.map(function (entry, i) {
         className: "recharts-area-area"
-      })), stroke !== 'none' && /*#__PURE__*/React.createElement(Curve, _extends({}, filterProps(this.props), {
+      })), stroke !== 'none' && /*#__PURE__*/React.createElement(Curve, _extends({}, filterProps(this.props, false), {
         className: "recharts-area-curve",
@@ -209,3 +209,3 @@ layout: layout,
         points: points
-      })), stroke !== 'none' && isRange && /*#__PURE__*/React.createElement(Curve, _extends({}, filterProps(this.props), {
+      })), stroke !== 'none' && isRange && /*#__PURE__*/React.createElement(Curve, _extends({}, filterProps(this.props, false), {
         className: "recharts-area-curve",
@@ -342,3 +342,3 @@ layout: layout,
       var clipPathId = isNil(id) ? this.id : id;
-      var _ref2 = (_filterProps = filterProps(dot)) !== null && _filterProps !== void 0 ? _filterProps : {
+      var _ref2 = (_filterProps = filterProps(dot, false)) !== null && _filterProps !== void 0 ? _filterProps : {
           r: 3,
@@ -345,0 +345,0 @@ strokeWidth: 2

es6/cartesian/Bar.js

@@ -82,3 +82,3 @@ var _excluded = ["value", "background"];
         activeBar = _this$props.activeBar;
-      var baseProps = filterProps(this.props);
+      var baseProps = filterProps(this.props, false);
       return data && data.map(function (entry, i) {
@@ -182,3 +182,3 @@ var isActive = i === activeIndex;
         activeIndex = _this$props4.activeIndex;
-      var backgroundProps = filterProps(this.props.background);
+      var backgroundProps = filterProps(this.props.background, false);
       return data.map(function (entry, i) {
@@ -185,0 +185,0 @@ var value = entry.value,

es6/cartesian/Brush.js

@@ -364,3 +364,3 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
       var x = Math.max(travellerX, this.props.x);
-      var travellerProps = _objectSpread(_objectSpread({}, filterProps(this.props)), {}, {
+      var travellerProps = _objectSpread(_objectSpread({}, filterProps(this.props, false)), {}, {
         x: x,
@@ -367,0 +367,0 @@ y: y,

es6/cartesian/CartesianAxis.js

@@ -201,3 +201,3 @@ var _excluded = ["viewBox"],
         axisLine = _this$props5.axisLine;
-      var props = _objectSpread(_objectSpread(_objectSpread({}, filterProps(this.props)), filterProps(axisLine)), {}, {
+      var props = _objectSpread(_objectSpread(_objectSpread({}, filterProps(this.props, false)), filterProps(axisLine, false)), {}, {
         fill: 'none'
@@ -249,7 +249,7 @@ });
       var verticalAnchor = this.getTickVerticalAnchor();
-      var axisProps = filterProps(this.props);
-      var customTickProps = filterProps(tick);
+      var axisProps = filterProps(this.props, false);
+      var customTickProps = filterProps(tick, false);
       var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
         fill: 'none'
-      }, filterProps(tickLine));
+      }, filterProps(tickLine, false));
       var items = finalTicks.map(function (entry, i) {
@@ -256,0 +256,0 @@ var _this2$getTickLineCoo = _this2.getTickLineCoord(entry),

es6/cartesian/CartesianGrid.js

 var _excluded = ["x1", "y1", "x2", "y2", "key"],
   _excluded2 = ["offset"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * @fileOverview Cartesian Grid
  */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import isFunction from 'lodash/isFunction';
+import { warn } from '../util/LogUtils';
 import { isNumber } from '../util/DataUtils';
 import { filterProps } from '../util/ReactUtils';
-export var CartesianGrid = /*#__PURE__*/function (_PureComponent) {
-  _inherits(CartesianGrid, _PureComponent);
-  var _super = _createSuper(CartesianGrid);
-  function CartesianGrid() {
-    _classCallCheck(this, CartesianGrid);
-    return _super.apply(this, arguments);
+import { getCoordinatesOfGrid, getTicksOfAxis } from '../util/ChartUtils';
+import { getTicks } from './getTicks';
+import { CartesianAxis } from './CartesianAxis';
+import { useChartHeight, useChartWidth, useOffset } from '../context/chartLayoutContext';
+var Background = function Background(props) {
+  var fill = props.fill;
+  if (!fill || fill === 'none') {
+    return null;
   }
-  _createClass(CartesianGrid, [{
-    key: "renderHorizontal",
-    value:
-    /**
-     * Draw the horizontal grid lines
-     * @param {Array} horizontalPoints either passed in as props or generated from function
-     * @return {Group} Horizontal lines
-     */
-    function renderHorizontal(horizontalPoints) {
-      var _this = this;
-      var _this$props = this.props,
-        x = _this$props.x,
-        width = _this$props.width,
-        horizontal = _this$props.horizontal;
-      if (!horizontalPoints || !horizontalPoints.length) {
-        return null;
-      }
-      var items = horizontalPoints.map(function (entry, i) {
-        var props = _objectSpread(_objectSpread({}, _this.props), {}, {
-          x1: x,
-          y1: entry,
-          x2: x + width,
-          y2: entry,
-          key: "line-".concat(i),
-          index: i
-        });
-        return CartesianGrid.renderLineItem(horizontal, props);
-      });
-      return /*#__PURE__*/React.createElement("g", {
-        className: "recharts-cartesian-grid-horizontal"
-      }, items);
-    }
+  var fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height;
+  return /*#__PURE__*/React.createElement("rect", {
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    stroke: "none",
+    fill: fill,
+    fillOpacity: fillOpacity,
+    className: "recharts-cartesian-grid-bg"
+  });
+};
+function renderLineItem(option, props) {
+  var lineItem;
+  if ( /*#__PURE__*/React.isValidElement(option)) {
+    // @ts-expect-error typescript does not see the props type when cloning an element
+    lineItem = /*#__PURE__*/React.cloneElement(option, props);
+  } else if (isFunction(option)) {
+    lineItem = option(props);
+  } else {
+    var x1 = props.x1,
+      y1 = props.y1,
+      x2 = props.x2,
+      y2 = props.y2,
+      key = props.key,
+      others = _objectWithoutProperties(props, _excluded);
+    var _filterProps = filterProps(others, false),
+      __ = _filterProps.offset,
+      restOfFilteredProps = _objectWithoutProperties(_filterProps, _excluded2);
+    lineItem = /*#__PURE__*/React.createElement("line", _extends({}, restOfFilteredProps, {
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      fill: "none",
+      key: key
+    }));
+  }
+  return lineItem;
+}
+function HorizontalGridLines(props) {
+  var x = props.x,
+    width = props.width,
+    _props$horizontal = props.horizontal,
+    horizontal = _props$horizontal === void 0 ? true : _props$horizontal,
+    horizontalPoints = props.horizontalPoints;
+  if (!horizontal || !horizontalPoints || !horizontalPoints.length) {
+    return null;
+  }
+  var items = horizontalPoints.map(function (entry, i) {
+    var lineItemProps = _objectSpread(_objectSpread({}, props), {}, {
+      x1: x,
+      y1: entry,
+      x2: x + width,
+      y2: entry,
+      key: "line-".concat(i),
+      index: i
+    });
+    return renderLineItem(horizontal, lineItemProps);
+  });
+  return /*#__PURE__*/React.createElement("g", {
+    className: "recharts-cartesian-grid-horizontal"
+  }, items);
+}
+function VerticalGridLines(props) {
+  var y = props.y,
+    height = props.height,
+    _props$vertical = props.vertical,
+    vertical = _props$vertical === void 0 ? true : _props$vertical,
+    verticalPoints = props.verticalPoints;
+  if (!vertical || !verticalPoints || !verticalPoints.length) {
+    return null;
+  }
+  var items = verticalPoints.map(function (entry, i) {
+    var lineItemProps = _objectSpread(_objectSpread({}, props), {}, {
+      x1: entry,
+      y1: y,
+      x2: entry,
+      y2: y + height,
+      key: "line-".concat(i),
+      index: i
+    });
+    return renderLineItem(vertical, lineItemProps);
+  });
+  return /*#__PURE__*/React.createElement("g", {
+    className: "recharts-cartesian-grid-vertical"
+  }, items);
+}
+function HorizontalStripes(props) {
+  var horizontalFill = props.horizontalFill,
+    fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height,
+    horizontalPoints = props.horizontalPoints,
+    _props$horizontal2 = props.horizontal,
+    horizontal = _props$horizontal2 === void 0 ? true : _props$horizontal2;
+  if (!horizontal || !horizontalFill || !horizontalFill.length) {
+    return null;
+  }
 
-    /**
-     * Draw vertical grid lines
-     * @param {Array} verticalPoints either passed in as props or generated from function
-     * @return {Group} Vertical lines
-     */
-  }, {
-    key: "renderVertical",
-    value: function renderVertical(verticalPoints) {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        y = _this$props2.y,
-        height = _this$props2.height,
-        vertical = _this$props2.vertical;
-      if (!verticalPoints || !verticalPoints.length) {
-        return null;
-      }
-      var items = verticalPoints.map(function (entry, i) {
-        var props = _objectSpread(_objectSpread({}, _this2.props), {}, {
-          x1: entry,
-          y1: y,
-          x2: entry,
-          y2: y + height,
-          key: "line-".concat(i),
-          index: i
-        });
-        return CartesianGrid.renderLineItem(vertical, props);
-      });
-      return /*#__PURE__*/React.createElement("g", {
-        className: "recharts-cartesian-grid-vertical"
-      }, items);
+  // Why =y -y? I was trying to find any difference that this makes, with floating point numbers and edge cases but ... nothing.
+  var roundedSortedHorizontalPoints = horizontalPoints.map(function (e) {
+    return Math.round(e + y - y);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  // Why is this condition `!==` instead of `<=` ?
+  if (y !== roundedSortedHorizontalPoints[0]) {
+    roundedSortedHorizontalPoints.unshift(0);
+  }
+  var items = roundedSortedHorizontalPoints.map(function (entry, i) {
+    // Why do we strip only the last stripe if it is invisible, and not all invisible stripes?
+    var lastStripe = !roundedSortedHorizontalPoints[i + 1];
+    var lineHeight = lastStripe ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
+    if (lineHeight <= 0) {
+      return null;
     }
-
-    /**
-     * Draw vertical grid stripes filled by colors
-     * @param {Array} verticalPoints either passed in as props or generated from function
-     * @return {Group} Vertical stripes
-     */
-  }, {
-    key: "renderVerticalStripes",
-    value: function renderVerticalStripes(verticalPoints) {
-      var verticalFill = this.props.verticalFill;
-      if (!verticalFill || !verticalFill.length) {
-        return null;
-      }
-      var _this$props3 = this.props,
-        fillOpacity = _this$props3.fillOpacity,
-        x = _this$props3.x,
-        y = _this$props3.y,
-        width = _this$props3.width,
-        height = _this$props3.height;
-      var roundedSortedVerticalPoints = verticalPoints.map(function (e) {
-        return Math.round(e + x - x);
-      }).sort(function (a, b) {
-        return a - b;
-      });
-      if (x !== roundedSortedVerticalPoints[0]) {
-        roundedSortedVerticalPoints.unshift(0);
-      }
-      var items = roundedSortedVerticalPoints.map(function (entry, i) {
-        var lastStripe = !roundedSortedVerticalPoints[i + 1];
-        var lineWidth = lastStripe ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
-        if (lineWidth <= 0) {
-          return null;
-        }
-        var colorIndex = i % verticalFill.length;
-        return /*#__PURE__*/React.createElement("rect", {
-          key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
-          ,
-          x: entry,
-          y: y,
-          width: lineWidth,
-          height: height,
-          stroke: "none",
-          fill: verticalFill[colorIndex],
-          fillOpacity: fillOpacity,
-          className: "recharts-cartesian-grid-bg"
-        });
-      });
-      return /*#__PURE__*/React.createElement("g", {
-        className: "recharts-cartesian-gridstripes-vertical"
-      }, items);
+    var colorIndex = i % horizontalFill.length;
+    return /*#__PURE__*/React.createElement("rect", {
+      key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
+      ,
+      y: entry,
+      x: x,
+      height: lineHeight,
+      width: width,
+      stroke: "none",
+      fill: horizontalFill[colorIndex],
+      fillOpacity: fillOpacity,
+      className: "recharts-cartesian-grid-bg"
+    });
+  });
+  return /*#__PURE__*/React.createElement("g", {
+    className: "recharts-cartesian-gridstripes-horizontal"
+  }, items);
+}
+function VerticalStripes(props) {
+  var _props$vertical2 = props.vertical,
+    vertical = _props$vertical2 === void 0 ? true : _props$vertical2,
+    verticalFill = props.verticalFill,
+    fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height,
+    verticalPoints = props.verticalPoints;
+  if (!vertical || !verticalFill || !verticalFill.length) {
+    return null;
+  }
+  var roundedSortedVerticalPoints = verticalPoints.map(function (e) {
+    return Math.round(e + x - x);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  if (x !== roundedSortedVerticalPoints[0]) {
+    roundedSortedVerticalPoints.unshift(0);
+  }
+  var items = roundedSortedVerticalPoints.map(function (entry, i) {
+    var lastStripe = !roundedSortedVerticalPoints[i + 1];
+    var lineWidth = lastStripe ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
+    if (lineWidth <= 0) {
+      return null;
     }
-
-    /**
-     * Draw horizontal grid stripes filled by colors
-     * @param {Array} horizontalPoints either passed in as props or generated from function
-     * @return {Group} Horizontal stripes
-     */
-  }, {
-    key: "renderHorizontalStripes",
-    value: function renderHorizontalStripes(horizontalPoints) {
-      var horizontalFill = this.props.horizontalFill;
-      if (!horizontalFill || !horizontalFill.length) {
-        return null;
-      }
-      var _this$props4 = this.props,
-        fillOpacity = _this$props4.fillOpacity,
-        x = _this$props4.x,
-        y = _this$props4.y,
-        width = _this$props4.width,
-        height = _this$props4.height;
-      var roundedSortedHorizontalPoints = horizontalPoints.map(function (e) {
-        return Math.round(e + y - y);
-      }).sort(function (a, b) {
-        return a - b;
-      });
-      if (y !== roundedSortedHorizontalPoints[0]) {
-        roundedSortedHorizontalPoints.unshift(0);
-      }
-      var items = roundedSortedHorizontalPoints.map(function (entry, i) {
-        var lastStripe = !roundedSortedHorizontalPoints[i + 1];
-        var lineHeight = lastStripe ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
-        if (lineHeight <= 0) {
-          return null;
-        }
-        var colorIndex = i % horizontalFill.length;
-        return /*#__PURE__*/React.createElement("rect", {
-          key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
-          ,
-          y: entry,
-          x: x,
-          height: lineHeight,
-          width: width,
-          stroke: "none",
-          fill: horizontalFill[colorIndex],
-          fillOpacity: fillOpacity,
-          className: "recharts-cartesian-grid-bg"
-        });
-      });
-      return /*#__PURE__*/React.createElement("g", {
-        className: "recharts-cartesian-gridstripes-horizontal"
-      }, items);
+    var colorIndex = i % verticalFill.length;
+    return /*#__PURE__*/React.createElement("rect", {
+      key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
+      ,
+      x: entry,
+      y: y,
+      width: lineWidth,
+      height: height,
+      stroke: "none",
+      fill: verticalFill[colorIndex],
+      fillOpacity: fillOpacity,
+      className: "recharts-cartesian-grid-bg"
+    });
+  });
+  return /*#__PURE__*/React.createElement("g", {
+    className: "recharts-cartesian-gridstripes-vertical"
+  }, items);
+}
+var defaultVerticalCoordinatesGenerator = function defaultVerticalCoordinatesGenerator(_ref, syncWithTicks) {
+  var xAxis = _ref.xAxis,
+    width = _ref.width,
+    height = _ref.height,
+    offset = _ref.offset;
+  return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, CartesianAxis.defaultProps), xAxis), {}, {
+    ticks: getTicksOfAxis(xAxis, true),
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
     }
-  }, {
-    key: "renderBackground",
-    value: function renderBackground() {
-      var fill = this.props.fill;
-      if (!fill || fill === 'none') {
-        return null;
-      }
-      var _this$props5 = this.props,
-        fillOpacity = _this$props5.fillOpacity,
-        x = _this$props5.x,
-        y = _this$props5.y,
-        width = _this$props5.width,
-        height = _this$props5.height;
-      return /*#__PURE__*/React.createElement("rect", {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        stroke: "none",
-        fill: fill,
-        fillOpacity: fillOpacity,
-        className: "recharts-cartesian-grid-bg"
-      });
+  })), offset.left, offset.left + offset.width, syncWithTicks);
+};
+var defaultHorizontalCoordinatesGenerator = function defaultHorizontalCoordinatesGenerator(_ref2, syncWithTicks) {
+  var yAxis = _ref2.yAxis,
+    width = _ref2.width,
+    height = _ref2.height,
+    offset = _ref2.offset;
+  return getCoordinatesOfGrid(getTicks(_objectSpread(_objectSpread(_objectSpread({}, CartesianAxis.defaultProps), yAxis), {}, {
+    ticks: getTicksOfAxis(yAxis, true),
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props6 = this.props,
-        x = _this$props6.x,
-        y = _this$props6.y,
-        width = _this$props6.width,
-        height = _this$props6.height,
-        horizontal = _this$props6.horizontal,
-        vertical = _this$props6.vertical,
-        horizontalCoordinatesGenerator = _this$props6.horizontalCoordinatesGenerator,
-        verticalCoordinatesGenerator = _this$props6.verticalCoordinatesGenerator,
-        xAxis = _this$props6.xAxis,
-        yAxis = _this$props6.yAxis,
-        offset = _this$props6.offset,
-        chartWidth = _this$props6.chartWidth,
-        chartHeight = _this$props6.chartHeight,
-        syncWithTicks = _this$props6.syncWithTicks,
-        horizontalValues = _this$props6.horizontalValues,
-        verticalValues = _this$props6.verticalValues;
-      if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0 || !isNumber(x) || x !== +x || !isNumber(y) || y !== +y) {
-        return null;
-      }
-      var _this$props7 = this.props,
-        horizontalPoints = _this$props7.horizontalPoints,
-        verticalPoints = _this$props7.verticalPoints;
-
-      // No horizontal points are specified
-      if ((!horizontalPoints || !horizontalPoints.length) && isFunction(horizontalCoordinatesGenerator)) {
-        var isHorizontalValues = horizontalValues && horizontalValues.length;
-        horizontalPoints = horizontalCoordinatesGenerator({
-          yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, {
-            ticks: isHorizontalValues ? horizontalValues : yAxis.ticks
-          }) : undefined,
-          width: chartWidth,
-          height: chartHeight,
-          offset: offset
-        }, isHorizontalValues ? true : syncWithTicks);
-      }
-
-      // No vertical points are specified
-      if ((!verticalPoints || !verticalPoints.length) && isFunction(verticalCoordinatesGenerator)) {
-        var isVerticalValues = verticalValues && verticalValues.length;
-        verticalPoints = verticalCoordinatesGenerator({
-          xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, {
-            ticks: isVerticalValues ? verticalValues : xAxis.ticks
-          }) : undefined,
-          width: chartWidth,
-          height: chartHeight,
-          offset: offset
-        }, isVerticalValues ? true : syncWithTicks);
-      }
-      return /*#__PURE__*/React.createElement("g", {
-        className: "recharts-cartesian-grid"
-      }, this.renderBackground(), horizontal && this.renderHorizontal(horizontalPoints), vertical && this.renderVertical(verticalPoints), horizontal && this.renderHorizontalStripes(horizontalPoints), vertical && this.renderVerticalStripes(verticalPoints));
-    }
-  }], [{
-    key: "renderLineItem",
-    value: function renderLineItem(option, props) {
-      var lineItem;
-      if ( /*#__PURE__*/React.isValidElement(option)) {
-        lineItem = /*#__PURE__*/React.cloneElement(option, props);
-      } else if (isFunction(option)) {
-        lineItem = option(props);
-      } else {
-        var x1 = props.x1,
-          y1 = props.y1,
-          x2 = props.x2,
-          y2 = props.y2,
-          key = props.key,
-          others = _objectWithoutProperties(props, _excluded);
-        var _filterProps = filterProps(others),
-          __ = _filterProps.offset,
-          restOfFilteredProps = _objectWithoutProperties(_filterProps, _excluded2);
-        lineItem = /*#__PURE__*/React.createElement("line", _extends({}, restOfFilteredProps, {
-          x1: x1,
-          y1: y1,
-          x2: x2,
-          y2: y2,
-          fill: "none",
-          key: key
-        }));
-      }
-      return lineItem;
-    }
-  }]);
-  return CartesianGrid;
-}(PureComponent);
-_defineProperty(CartesianGrid, "displayName", 'CartesianGrid');
-_defineProperty(CartesianGrid, "defaultProps", {
+  })), offset.top, offset.top + offset.height, syncWithTicks);
+};
+var defaultProps = {
   horizontal: true,
@@ -327,2 +257,95 @@ vertical: true,
   horizontalFill: []
-});
+};
+export function CartesianGrid(props) {
+  var _props$stroke, _props$fill, _props$horizontal3, _props$horizontalFill, _props$vertical3, _props$verticalFill;
+  var chartWidth = useChartWidth();
+  var chartHeight = useChartHeight();
+  var offset = useOffset();
+  var propsIncludingDefaults = _objectSpread(_objectSpread({}, props), {}, {
+    stroke: (_props$stroke = props.stroke) !== null && _props$stroke !== void 0 ? _props$stroke : defaultProps.stroke,
+    fill: (_props$fill = props.fill) !== null && _props$fill !== void 0 ? _props$fill : defaultProps.fill,
+    horizontal: (_props$horizontal3 = props.horizontal) !== null && _props$horizontal3 !== void 0 ? _props$horizontal3 : defaultProps.horizontal,
+    horizontalFill: (_props$horizontalFill = props.horizontalFill) !== null && _props$horizontalFill !== void 0 ? _props$horizontalFill : defaultProps.horizontalFill,
+    vertical: (_props$vertical3 = props.vertical) !== null && _props$vertical3 !== void 0 ? _props$vertical3 : defaultProps.vertical,
+    verticalFill: (_props$verticalFill = props.verticalFill) !== null && _props$verticalFill !== void 0 ? _props$verticalFill : defaultProps.verticalFill
+  });
+  var x = propsIncludingDefaults.x,
+    y = propsIncludingDefaults.y,
+    width = propsIncludingDefaults.width,
+    height = propsIncludingDefaults.height,
+    xAxis = propsIncludingDefaults.xAxis,
+    yAxis = propsIncludingDefaults.yAxis,
+    syncWithTicks = propsIncludingDefaults.syncWithTicks,
+    horizontalValues = propsIncludingDefaults.horizontalValues,
+    verticalValues = propsIncludingDefaults.verticalValues;
+  if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0 || !isNumber(x) || x !== +x || !isNumber(y) || y !== +y) {
+    return null;
+  }
+
+  /*
+   * verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined
+   * outside of the propsIncludingDefaults because they were never part of the original props
+   * and they were never passed as a prop down to horizontal/vertical custom elements.
+   * If we add these two to propsIncludingDefaults then we are changing public API.
+   * Not a bad thing per se but also not necessary.
+   */
+  var verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
+  var horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
+  var horizontalPoints = propsIncludingDefaults.horizontalPoints,
+    verticalPoints = propsIncludingDefaults.verticalPoints;
+
+  // No horizontal points are specified
+  if ((!horizontalPoints || !horizontalPoints.length) && isFunction(horizontalCoordinatesGenerator)) {
+    var isHorizontalValues = horizontalValues && horizontalValues.length;
+    var generatorResult = horizontalCoordinatesGenerator({
+      yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, {
+        ticks: isHorizontalValues ? horizontalValues : yAxis.ticks
+      }) : undefined,
+      width: chartWidth,
+      height: chartHeight,
+      offset: offset
+    }, isHorizontalValues ? true : syncWithTicks);
+    warn(Array.isArray(generatorResult), "horizontalCoordinatesGenerator should return Array but instead it returned [".concat(_typeof(generatorResult), "]"));
+    if (Array.isArray(generatorResult)) {
+      horizontalPoints = generatorResult;
+    }
+  }
+
+  // No vertical points are specified
+  if ((!verticalPoints || !verticalPoints.length) && isFunction(verticalCoordinatesGenerator)) {
+    var isVerticalValues = verticalValues && verticalValues.length;
+    var _generatorResult = verticalCoordinatesGenerator({
+      xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, {
+        ticks: isVerticalValues ? verticalValues : xAxis.ticks
+      }) : undefined,
+      width: chartWidth,
+      height: chartHeight,
+      offset: offset
+    }, isVerticalValues ? true : syncWithTicks);
+    warn(Array.isArray(_generatorResult), "verticalCoordinatesGenerator should return Array but instead it returned [".concat(_typeof(_generatorResult), "]"));
+    if (Array.isArray(_generatorResult)) {
+      verticalPoints = _generatorResult;
+    }
+  }
+  return /*#__PURE__*/React.createElement("g", {
+    className: "recharts-cartesian-grid"
+  }, /*#__PURE__*/React.createElement(Background, {
+    fill: propsIncludingDefaults.fill,
+    fillOpacity: propsIncludingDefaults.fillOpacity,
+    x: propsIncludingDefaults.x,
+    y: propsIncludingDefaults.y,
+    width: propsIncludingDefaults.width,
+    height: propsIncludingDefaults.height
+  }), /*#__PURE__*/React.createElement(HorizontalGridLines, _extends({}, propsIncludingDefaults, {
+    offset: offset,
+    horizontalPoints: horizontalPoints
+  })), /*#__PURE__*/React.createElement(VerticalGridLines, _extends({}, propsIncludingDefaults, {
+    offset: offset,
+    verticalPoints: verticalPoints
+  })), /*#__PURE__*/React.createElement(HorizontalStripes, _extends({}, propsIncludingDefaults, {
+    horizontalPoints: horizontalPoints
+  })), /*#__PURE__*/React.createElement(VerticalStripes, _extends({}, propsIncludingDefaults, {
+    verticalPoints: verticalPoints
+  })));
+}
+CartesianGrid.displayName = 'CartesianGrid';

es6/cartesian/ErrorBar.js

@@ -15,2 +15,3 @@ var _excluded = ["offset", "layout", "width", "dataKey", "data", "dataPointFormatter", "xAxis", "yAxis"];
 import React from 'react';
+import invariant from 'tiny-invariant';
 import { Layer } from '../container/Layer';
@@ -28,3 +29,4 @@ import { filterProps } from '../util/ReactUtils';
     others = _objectWithoutProperties(props, _excluded);
-  var svgProps = filterProps(others);
+  var svgProps = filterProps(others, false);
+  !!(props.direction === 'x' && xAxis.type !== 'number') ? process.env.NODE_ENV !== "production" ? invariant(false, 'ErrorBar requires Axis type property to be "number".') : invariant(false) : void 0;
   var errorBars = data.map(function (entry) {
@@ -31,0 +33,0 @@ var _dataPointFormatter = dataPointFormatter(entry, dataKey),

es6/cartesian/Line.js

@@ -191,3 +191,3 @@ var _excluded = ["type", "layout", "connectNulls", "ref"];
         dataKey = _this$props2.dataKey;
-      var lineProps = filterProps(this.props);
+      var lineProps = filterProps(this.props, false);
       var customDotProps = filterProps(dot, true);
@@ -360,3 +360,3 @@ var dots = points.map(function (entry, i) {
       var clipPathId = isNil(id) ? this.id : id;
-      var _ref2 = (_filterProps = filterProps(dot)) !== null && _filterProps !== void 0 ? _filterProps : {
+      var _ref2 = (_filterProps = filterProps(dot, false)) !== null && _filterProps !== void 0 ? _filterProps : {
           r: 3,
@@ -363,0 +363,0 @@ strokeWidth: 2

es6/cartesian/ReferenceLine.js

@@ -28,2 +28,3 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import { filterProps } from '../util/ReactUtils';
+import { useClipPathId, useViewBox, useXAxisOrThrow, useYAxisOrThrow } from '../context/chartLayoutContext';
 
@@ -51,12 +52,9 @@ /**
 // TODO: ScaleHelper
-export var getEndPoints = function getEndPoints(scales, isFixedX, isFixedY, isSegment, props) {
-  var _props$viewBox = props.viewBox,
-    x = _props$viewBox.x,
-    y = _props$viewBox.y,
-    width = _props$viewBox.width,
-    height = _props$viewBox.height,
-    position = props.position;
+export var getEndPoints = function getEndPoints(scales, isFixedX, isFixedY, isSegment, viewBox, position, xAxisOrientation, yAxisOrientation, props) {
+  var x = viewBox.x,
+    y = viewBox.y,
+    width = viewBox.width,
+    height = viewBox.height;
   if (isFixedY) {
-    var yCoord = props.y,
-      orientation = props.yAxis.orientation;
+    var yCoord = props.y;
     var coord = scales.y.apply(yCoord, {
@@ -75,7 +73,6 @@ position: position
     }];
-    return orientation === 'left' ? points.reverse() : points;
+    return yAxisOrientation === 'left' ? points.reverse() : points;
   }
   if (isFixedX) {
-    var xCoord = props.x,
-      _orientation = props.xAxis.orientation;
+    var xCoord = props.x;
     var _coord = scales.x.apply(xCoord, {
@@ -94,3 +91,3 @@ position: position
     }];
-    return _orientation === 'top' ? _points.reverse() : _points;
+    return xAxisOrientation === 'top' ? _points.reverse() : _points;
   }
@@ -117,8 +114,14 @@ if (isSegment) {
     segment = props.segment,
-    xAxis = props.xAxis,
-    yAxis = props.yAxis,
+    xAxisId = props.xAxisId,
+    yAxisId = props.yAxisId,
     shape = props.shape,
     className = props.className,
-    alwaysShow = props.alwaysShow,
-    clipPathId = props.clipPathId;
+    alwaysShow = props.alwaysShow;
+  var clipPathId = useClipPathId();
+  var xAxis = useXAxisOrThrow(xAxisId);
+  var yAxis = useYAxisOrThrow(yAxisId);
+  var viewBox = useViewBox();
+  if (!clipPathId || !viewBox) {
+    return null;
+  }
   warn(alwaysShow === undefined, 'The alwaysShow prop is deprecated. Please use ifOverflow="extendDomain" instead.');
@@ -132,3 +135,3 @@ var scales = createLabeledScales({
   var isSegment = segment && segment.length === 2;
-  var endPoints = getEndPoints(scales, isX, isY, isSegment, props);
+  var endPoints = getEndPoints(scales, isX, isY, isSegment, viewBox, props.position, xAxis.orientation, yAxis.orientation, props);
   if (!endPoints) {
@@ -135,0 +138,0 @@ return null;

es6/cartesian/Scatter.js

@@ -74,3 +74,3 @@ var _class;
         activeIndex = _this$props.activeIndex;
-      var baseProps = filterProps(this.props);
+      var baseProps = filterProps(this.props, false);
       return points.map(function (entry, i) {
@@ -198,4 +198,4 @@ var isActive = activeIndex === i;
         lineJointType = _this$props5.lineJointType;
-      var scatterProps = filterProps(this.props);
-      var customLineProps = filterProps(line);
+      var scatterProps = filterProps(this.props, false);
+      var customLineProps = filterProps(line, false);
       var linePoints, lineItem;
@@ -202,0 +202,0 @@ if (lineType === 'joint') {

es6/cartesian/XAxis.js

@@ -0,1 +1,2 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
@@ -5,6 +6,34 @@ * @fileOverview X Axis
 
+import React from 'react';
+import clsx from 'clsx';
+import { useChartHeight, useChartWidth, useXAxisOrThrow } from '../context/chartLayoutContext';
+import { CartesianAxis } from './CartesianAxis';
+import { getTicksOfAxis } from '../util/ChartUtils';
+
 /** Define of XAxis props */
 
-export var XAxis = function XAxis() {
-  return null;
+export var XAxis = function XAxis(_ref) {
+  var xAxisId = _ref.xAxisId;
+  var width = useChartWidth();
+  var height = useChartHeight();
+  var axisOptions = useXAxisOrThrow(xAxisId);
+  if (axisOptions == null) {
+    return null;
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error the axisOptions type is not exactly what CartesianAxis is expecting.
+    React.createElement(CartesianAxis, _extends({}, axisOptions, {
+      className: clsx("recharts-".concat(axisOptions.axisType, " ").concat(axisOptions.axisType), axisOptions.className),
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height
+      },
+      ticksGenerator: function ticksGenerator(axis) {
+        return getTicksOfAxis(axis, true);
+      }
+    }))
+  );
 };
@@ -11,0 +40,0 @@ XAxis.displayName = 'XAxis';

es6/cartesian/YAxis.js

@@ -0,7 +1,34 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
  * @fileOverview Y Axis
  */
-
-export var YAxis = function YAxis() {
-  return null;
+import React from 'react';
+import clsx from 'clsx';
+import { useChartHeight, useChartWidth, useYAxisOrThrow } from '../context/chartLayoutContext';
+import { CartesianAxis } from './CartesianAxis';
+import { getTicksOfAxis } from '../util/ChartUtils';
+export var YAxis = function YAxis(_ref) {
+  var yAxisId = _ref.yAxisId;
+  var width = useChartWidth();
+  var height = useChartHeight();
+  var axisOptions = useYAxisOrThrow(yAxisId);
+  if (axisOptions == null) {
+    return null;
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error the axisOptions type is not exactly what CartesianAxis is expecting.
+    React.createElement(CartesianAxis, _extends({}, axisOptions, {
+      className: clsx("recharts-".concat(axisOptions.axisType, " ").concat(axisOptions.axisType), axisOptions.className),
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height
+      },
+      ticksGenerator: function ticksGenerator(axis) {
+        return getTicksOfAxis(axis, true);
+      }
+    }))
+  );
 };
@@ -8,0 +35,0 @@ YAxis.displayName = 'YAxis';

es6/chart/AccessibilityManager.js

@@ -18,4 +18,5 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
     value: function setDetails(_ref) {
+      var _ref2;
       var _ref$coordinateList = _ref.coordinateList,
-        coordinateList = _ref$coordinateList === void 0 ? [] : _ref$coordinateList,
+        coordinateList = _ref$coordinateList === void 0 ? null : _ref$coordinateList,
         _ref$container = _ref.container,
@@ -29,3 +30,3 @@ container = _ref$container === void 0 ? null : _ref$container,
         mouseHandlerCallback = _ref$mouseHandlerCall === void 0 ? null : _ref$mouseHandlerCall;
-      this.coordinateList = coordinateList !== null && coordinateList !== void 0 ? coordinateList : this.coordinateList;
+      this.coordinateList = (_ref2 = coordinateList !== null && coordinateList !== void 0 ? coordinateList : this.coordinateList) !== null && _ref2 !== void 0 ? _ref2 : [];
       this.container = container !== null && container !== void 0 ? container : this.container;
@@ -79,2 +80,7 @@ this.layout = layout !== null && layout !== void 0 ? layout : this.layout;
   }, {
+    key: "setIndex",
+    value: function setIndex(newIndex) {
+      this.activeIndex = newIndex;
+    }
+  }, {
     key: "spoofMouse",
@@ -81,0 +87,0 @@ value: function spoofMouse() {

es6/chart/Sankey.js

@@ -460,3 +460,3 @@ var _excluded = ["width", "height", "className", "style", "children"],
           })
-        }, filterProps(linkContent));
+        }, filterProps(linkContent, false));
         var events = {
@@ -489,3 +489,3 @@ onMouseEnter: _this2.handleMouseEnter.bind(_this2, linkProps, 'link'),
           dy = node.dy;
-        var nodeProps = _objectSpread(_objectSpread({}, filterProps(nodeContent)), {}, {
+        var nodeProps = _objectSpread(_objectSpread({}, filterProps(nodeContent, false)), {}, {
           x: x + left,
@@ -556,3 +556,3 @@ y: y + top,
         nodes = _this$state2.nodes;
-      var attrs = filterProps(others);
+      var attrs = filterProps(others, false);
       return /*#__PURE__*/React.createElement("div", {
@@ -636,3 +636,3 @@ className: clsx('recharts-wrapper', className),
         strokeOpacity: "0.2"
-      }, filterProps(others)));
+      }, filterProps(others, false)));
     }
@@ -652,3 +652,3 @@ }, {
         fillOpacity: "0.8"
-      }, filterProps(props), {
+      }, filterProps(props, false), {
         role: "img"
@@ -655,0 +655,0 @@ }));

es6/chart/Treemap.js

@@ -444,3 +444,3 @@ var _excluded = ["width", "height", "className", "style", "children", "type"];
         type = _this$props7.type;
-      var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, filterProps(this.props)), node), {}, {
+      var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, filterProps(this.props, false)), node), {}, {
         root: root
@@ -572,3 +572,3 @@ });
         others = _objectWithoutProperties(_this$props11, _excluded);
-      var attrs = filterProps(others);
+      var attrs = filterProps(others, false);
       return /*#__PURE__*/React.createElement("div", {
@@ -575,0 +575,0 @@ className: clsx('recharts-wrapper', className),

es6/component/Cursor.js

@@ -71,3 +71,3 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
     pointerEvents: 'none'
-  }, offset), restProps), filterProps(element.props.cursor)), {}, {
+  }, offset), restProps), filterProps(element.props.cursor, false)), {}, {
     payload: activePayload,
@@ -74,0 +74,0 @@ payloadIndex: activeTooltipIndex,

es6/component/Tooltip.js

@@ -47,2 +47,3 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
     value: function render() {
+      var _this = this;
       var _this$props = this.props,
@@ -68,3 +69,3 @@ active = _this$props.active,
         finalPayload = getUniqPayload(payload.filter(function (entry) {
-          return entry.value != null;
+          return entry.value != null && (entry.hide !== true || _this.props.includeHidden);
         }), payloadUniqBy, defaultUniqBy);
@@ -71,0 +72,0 @@ }

es6/index.js

 // "export type" declarations on separate lines are in use
 // to workaround babel issue(s) 11465 12578
 //
+
 // see https://github.com/babel/babel/issues/11464#issuecomment-617606898
@@ -54,2 +55,3 @@ export { Surface } from './container/Surface';
 export { ComposedChart } from './chart/ComposedChart';
+export { SunburstChart } from './chart/SunburstChart';
 export { Funnel } from './numberAxis/Funnel';
@@ -56,0 +58,0 @@ export { FunnelChart } from './chart/FunnelChart';

es6/numberAxis/Funnel.js

@@ -238,3 +238,3 @@ var _class;
     children = _item$props.children;
-  var presentationProps = filterProps(item.props);
+  var presentationProps = filterProps(item.props, false);
   var cells = findAllByType(children, Cell);
@@ -241,0 +241,0 @@ if (data && data.length) {

es6/polar/Pie.js

@@ -106,5 +106,5 @@ var _class;
         valueKey = _this$props.valueKey;
-      var pieProps = filterProps(this.props);
-      var customLabelProps = filterProps(label);
-      var customLabelLineProps = filterProps(labelLine);
+      var pieProps = filterProps(this.props, false);
+      var customLabelProps = filterProps(label, false);
+      var customLabelLineProps = filterProps(labelLine, false);
       var offsetRadius = label && label.offsetRadius || 20;
@@ -432,3 +432,3 @@ var labels = sectors.map(function (entry, i) {
     children = _item$props.children;
-  var presentationProps = filterProps(item.props);
+  var presentationProps = filterProps(item.props, false);
   var cells = findAllByType(children, Cell);
@@ -435,0 +435,0 @@ if (data && data.length) {

es6/polar/PolarAngleAxis.js

@@ -96,5 +96,5 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
         axisLineType = _this$props2.axisLineType;
-      var props = _objectSpread(_objectSpread({}, filterProps(this.props)), {}, {
+      var props = _objectSpread(_objectSpread({}, filterProps(this.props, false)), {}, {
         fill: 'none'
-      }, filterProps(axisLine));
+      }, filterProps(axisLine, false));
       if (axisLineType === 'circle') {
@@ -129,7 +129,7 @@ return /*#__PURE__*/React.createElement(Dot, _extends({
         stroke = _this$props3.stroke;
-      var axisProps = filterProps(this.props);
-      var customTickProps = filterProps(tick);
+      var axisProps = filterProps(this.props, false);
+      var customTickProps = filterProps(tick, false);
       var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
         fill: 'none'
-      }, filterProps(tickLine));
+      }, filterProps(tickLine, false));
       var items = ticks.map(function (entry, i) {
@@ -136,0 +136,0 @@ var lineCoord = _this.getTickLineCoord(entry);

es6/polar/PolarGrid.js

@@ -44,3 +44,3 @@ var _excluded = ["cx", "cy", "innerRadius", "outerRadius", "gridType", "radialLines"];
     stroke: '#ccc'
-  }, filterProps(props));
+  }, filterProps(props, false));
   return /*#__PURE__*/React.createElement("g", {
@@ -69,3 +69,3 @@ className: "recharts-polar-grid-angle"
     stroke: '#ccc'
-  }, filterProps(props)), {}, {
+  }, filterProps(props, false)), {}, {
     fill: 'none'
@@ -88,3 +88,3 @@ });
     stroke: '#ccc'
-  }, filterProps(props)), {}, {
+  }, filterProps(props, false)), {}, {
     fill: 'none'
@@ -91,0 +91,0 @@ });

es6/polar/PolarRadiusAxis.js

@@ -114,5 +114,5 @@ var _excluded = ["cx", "cy", "angle", "ticks", "axisLine"],
       var point1 = polarToCartesian(cx, cy, extent[1], angle);
-      var props = _objectSpread(_objectSpread(_objectSpread({}, filterProps(others)), {}, {
+      var props = _objectSpread(_objectSpread(_objectSpread({}, filterProps(others, false)), {}, {
         fill: 'none'
-      }, filterProps(axisLine)), {}, {
+      }, filterProps(axisLine, false)), {}, {
         x1: point0.x,
@@ -139,4 +139,4 @@ y1: point0.y,
       var textAnchor = this.getTickTextAnchor();
-      var axisProps = filterProps(others);
-      var customTickProps = filterProps(tick);
+      var axisProps = filterProps(others, false);
+      var customTickProps = filterProps(tick, false);
       var items = ticks.map(function (entry, i) {
@@ -143,0 +143,0 @@ var coord = _this.getTickValueCoord(entry);

es6/polar/Radar.js

@@ -89,4 +89,4 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
         dataKey = _this$props.dataKey;
-      var baseProps = filterProps(this.props);
-      var customDotProps = filterProps(dot);
+      var baseProps = filterProps(this.props, false);
+      var customDotProps = filterProps(dot, true);
       var dots = points.map(function (entry, i) {
@@ -93,0 +93,0 @@ var dotProps = _objectSpread(_objectSpread(_objectSpread({

es6/polar/RadialBar.js

@@ -94,3 +94,3 @@ var _excluded = ["shape", "activeShape", "activeIndex", "cornerRadius"],
         others = _objectWithoutProperties(_this$props2, _excluded);
-      var baseProps = filterProps(others);
+      var baseProps = filterProps(others, false);
       return sectors.map(function (entry, i) {
@@ -176,3 +176,3 @@ var isActive = i === activeIndex;
       var cornerRadius = this.props.cornerRadius;
-      var backgroundProps = filterProps(this.props.background);
+      var backgroundProps = filterProps(this.props.background, false);
       return sectors.map(function (entry, i) {
@@ -179,0 +179,0 @@ var value = entry.value,

es6/shape/Curve.js

@@ -111,3 +111,3 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
   var realPath = points && points.length ? getPath(props) : path;
-  return /*#__PURE__*/React.createElement("path", _extends({}, filterProps(props), adaptEventHandlers(props), {
+  return /*#__PURE__*/React.createElement("path", _extends({}, filterProps(props, false), adaptEventHandlers(props), {
     className: clsx('recharts-curve', className),
@@ -114,0 +114,0 @@ d: realPath,

es6/shape/Dot.js

@@ -16,3 +16,3 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   if (cx === +cx && cy === +cy && r === +r) {
-    return /*#__PURE__*/React.createElement("circle", _extends({}, filterProps(props), adaptEventHandlers(props), {
+    return /*#__PURE__*/React.createElement("circle", _extends({}, filterProps(props, false), adaptEventHandlers(props), {
       className: layerClass,
@@ -19,0 +19,0 @@ cx: cx,

es6/util/ChartUtils.js

@@ -1035,4 +1035,5 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
     tooltipType = _graphicalItem$props.tooltipType,
-    chartType = _graphicalItem$props.chartType;
-  return _objectSpread(_objectSpread({}, filterProps(graphicalItem)), {}, {
+    chartType = _graphicalItem$props.chartType,
+    hide = _graphicalItem$props.hide;
+  return _objectSpread(_objectSpread({}, filterProps(graphicalItem, false)), {}, {
     dataKey: dataKey,
@@ -1046,4 +1047,5 @@ unit: unit,
     payload: payload,
-    chartType: chartType
+    chartType: chartType,
+    hide: hide
   });
 };

lib/cartesian/Area.js

@@ -95,3 +95,3 @@ "use strict";
         dataKey = _this$props.dataKey;
-      var areaProps = (0, _ReactUtils.filterProps)(this.props);
+      var areaProps = (0, _ReactUtils.filterProps)(this.props, false);
       var customDotProps = (0, _ReactUtils.filterProps)(dot, true);
@@ -209,3 +209,3 @@ var dots = points.map(function (entry, i) {
         className: "recharts-area-area"
-      })), stroke !== 'none' && /*#__PURE__*/_react["default"].createElement(_Curve.Curve, _extends({}, (0, _ReactUtils.filterProps)(this.props), {
+      })), stroke !== 'none' && /*#__PURE__*/_react["default"].createElement(_Curve.Curve, _extends({}, (0, _ReactUtils.filterProps)(this.props, false), {
         className: "recharts-area-curve",
@@ -217,3 +217,3 @@ layout: layout,
         points: points
-      })), stroke !== 'none' && isRange && /*#__PURE__*/_react["default"].createElement(_Curve.Curve, _extends({}, (0, _ReactUtils.filterProps)(this.props), {
+      })), stroke !== 'none' && isRange && /*#__PURE__*/_react["default"].createElement(_Curve.Curve, _extends({}, (0, _ReactUtils.filterProps)(this.props, false), {
         className: "recharts-area-curve",
@@ -350,3 +350,3 @@ layout: layout,
       var clipPathId = (0, _isNil["default"])(id) ? this.id : id;
-      var _ref2 = (_filterProps = (0, _ReactUtils.filterProps)(dot)) !== null && _filterProps !== void 0 ? _filterProps : {
+      var _ref2 = (_filterProps = (0, _ReactUtils.filterProps)(dot, false)) !== null && _filterProps !== void 0 ? _filterProps : {
           r: 3,
@@ -353,0 +353,0 @@ strokeWidth: 2

lib/cartesian/Bar.js

@@ -90,3 +90,3 @@ "use strict";
         activeBar = _this$props.activeBar;
-      var baseProps = (0, _ReactUtils.filterProps)(this.props);
+      var baseProps = (0, _ReactUtils.filterProps)(this.props, false);
       return data && data.map(function (entry, i) {
@@ -190,3 +190,3 @@ var isActive = i === activeIndex;
         activeIndex = _this$props4.activeIndex;
-      var backgroundProps = (0, _ReactUtils.filterProps)(this.props.background);
+      var backgroundProps = (0, _ReactUtils.filterProps)(this.props.background, false);
       return data.map(function (entry, i) {
@@ -193,0 +193,0 @@ var value = entry.value,

lib/cartesian/Brush.js

@@ -372,3 +372,3 @@ "use strict";
       var x = Math.max(travellerX, this.props.x);
-      var travellerProps = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props)), {}, {
+      var travellerProps = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props, false)), {}, {
         x: x,
@@ -375,0 +375,0 @@ y: y,

lib/cartesian/CartesianAxis.js

@@ -205,3 +205,3 @@ "use strict";
         axisLine = _this$props5.axisLine;
-      var props = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props)), (0, _ReactUtils.filterProps)(axisLine)), {}, {
+      var props = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props, false)), (0, _ReactUtils.filterProps)(axisLine, false)), {}, {
         fill: 'none'
@@ -253,7 +253,7 @@ });
       var verticalAnchor = this.getTickVerticalAnchor();
-      var axisProps = (0, _ReactUtils.filterProps)(this.props);
-      var customTickProps = (0, _ReactUtils.filterProps)(tick);
+      var axisProps = (0, _ReactUtils.filterProps)(this.props, false);
+      var customTickProps = (0, _ReactUtils.filterProps)(tick, false);
       var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
         fill: 'none'
-      }, (0, _ReactUtils.filterProps)(tickLine));
+      }, (0, _ReactUtils.filterProps)(tickLine, false));
       var items = finalTicks.map(function (entry, i) {
@@ -260,0 +260,0 @@ var _this2$getTickLineCoo = _this2.getTickLineCoord(entry),

lib/cartesian/CartesianGrid.js

@@ -6,320 +6,249 @@ "use strict";
 });
-exports.CartesianGrid = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.CartesianGrid = CartesianGrid;
+var _react = _interopRequireDefault(require("react"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
+var _LogUtils = require("../util/LogUtils");
 var _DataUtils = require("../util/DataUtils");
 var _ReactUtils = require("../util/ReactUtils");
+var _ChartUtils = require("../util/ChartUtils");
+var _getTicks = require("./getTicks");
+var _CartesianAxis = require("./CartesianAxis");
+var _chartLayoutContext = require("../context/chartLayoutContext");
 var _excluded = ["x1", "y1", "x2", "y2", "key"],
   _excluded2 = ["offset"];
+/**
+ * @fileOverview Cartesian Grid
+ */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
-                                                                                                                                                                                                                                                                                                                                                                                               * @fileOverview Cartesian Grid
-                                                                                                                                                                                                                                                                                                                                                                                               */
-var CartesianGrid = exports.CartesianGrid = /*#__PURE__*/function (_PureComponent) {
-  _inherits(CartesianGrid, _PureComponent);
-  var _super = _createSuper(CartesianGrid);
-  function CartesianGrid() {
-    _classCallCheck(this, CartesianGrid);
-    return _super.apply(this, arguments);
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Background = function Background(props) {
+  var fill = props.fill;
+  if (!fill || fill === 'none') {
+    return null;
   }
-  _createClass(CartesianGrid, [{
-    key: "renderHorizontal",
-    value:
-    /**
-     * Draw the horizontal grid lines
-     * @param {Array} horizontalPoints either passed in as props or generated from function
-     * @return {Group} Horizontal lines
-     */
-    function renderHorizontal(horizontalPoints) {
-      var _this = this;
-      var _this$props = this.props,
-        x = _this$props.x,
-        width = _this$props.width,
-        horizontal = _this$props.horizontal;
-      if (!horizontalPoints || !horizontalPoints.length) {
-        return null;
-      }
-      var items = horizontalPoints.map(function (entry, i) {
-        var props = _objectSpread(_objectSpread({}, _this.props), {}, {
-          x1: x,
-          y1: entry,
-          x2: x + width,
-          y2: entry,
-          key: "line-".concat(i),
-          index: i
-        });
-        return CartesianGrid.renderLineItem(horizontal, props);
-      });
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        className: "recharts-cartesian-grid-horizontal"
-      }, items);
-    }
+  var fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height;
+  return /*#__PURE__*/_react["default"].createElement("rect", {
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    stroke: "none",
+    fill: fill,
+    fillOpacity: fillOpacity,
+    className: "recharts-cartesian-grid-bg"
+  });
+};
+function renderLineItem(option, props) {
+  var lineItem;
+  if ( /*#__PURE__*/_react["default"].isValidElement(option)) {
+    // @ts-expect-error typescript does not see the props type when cloning an element
+    lineItem = /*#__PURE__*/_react["default"].cloneElement(option, props);
+  } else if ((0, _isFunction["default"])(option)) {
+    lineItem = option(props);
+  } else {
+    var x1 = props.x1,
+      y1 = props.y1,
+      x2 = props.x2,
+      y2 = props.y2,
+      key = props.key,
+      others = _objectWithoutProperties(props, _excluded);
+    var _filterProps = (0, _ReactUtils.filterProps)(others, false),
+      __ = _filterProps.offset,
+      restOfFilteredProps = _objectWithoutProperties(_filterProps, _excluded2);
+    lineItem = /*#__PURE__*/_react["default"].createElement("line", _extends({}, restOfFilteredProps, {
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      fill: "none",
+      key: key
+    }));
+  }
+  return lineItem;
+}
+function HorizontalGridLines(props) {
+  var x = props.x,
+    width = props.width,
+    _props$horizontal = props.horizontal,
+    horizontal = _props$horizontal === void 0 ? true : _props$horizontal,
+    horizontalPoints = props.horizontalPoints;
+  if (!horizontal || !horizontalPoints || !horizontalPoints.length) {
+    return null;
+  }
+  var items = horizontalPoints.map(function (entry, i) {
+    var lineItemProps = _objectSpread(_objectSpread({}, props), {}, {
+      x1: x,
+      y1: entry,
+      x2: x + width,
+      y2: entry,
+      key: "line-".concat(i),
+      index: i
+    });
+    return renderLineItem(horizontal, lineItemProps);
+  });
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "recharts-cartesian-grid-horizontal"
+  }, items);
+}
+function VerticalGridLines(props) {
+  var y = props.y,
+    height = props.height,
+    _props$vertical = props.vertical,
+    vertical = _props$vertical === void 0 ? true : _props$vertical,
+    verticalPoints = props.verticalPoints;
+  if (!vertical || !verticalPoints || !verticalPoints.length) {
+    return null;
+  }
+  var items = verticalPoints.map(function (entry, i) {
+    var lineItemProps = _objectSpread(_objectSpread({}, props), {}, {
+      x1: entry,
+      y1: y,
+      x2: entry,
+      y2: y + height,
+      key: "line-".concat(i),
+      index: i
+    });
+    return renderLineItem(vertical, lineItemProps);
+  });
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "recharts-cartesian-grid-vertical"
+  }, items);
+}
+function HorizontalStripes(props) {
+  var horizontalFill = props.horizontalFill,
+    fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height,
+    horizontalPoints = props.horizontalPoints,
+    _props$horizontal2 = props.horizontal,
+    horizontal = _props$horizontal2 === void 0 ? true : _props$horizontal2;
+  if (!horizontal || !horizontalFill || !horizontalFill.length) {
+    return null;
+  }
 
-    /**
-     * Draw vertical grid lines
-     * @param {Array} verticalPoints either passed in as props or generated from function
-     * @return {Group} Vertical lines
-     */
-  }, {
-    key: "renderVertical",
-    value: function renderVertical(verticalPoints) {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        y = _this$props2.y,
-        height = _this$props2.height,
-        vertical = _this$props2.vertical;
-      if (!verticalPoints || !verticalPoints.length) {
-        return null;
-      }
-      var items = verticalPoints.map(function (entry, i) {
-        var props = _objectSpread(_objectSpread({}, _this2.props), {}, {
-          x1: entry,
-          y1: y,
-          x2: entry,
-          y2: y + height,
-          key: "line-".concat(i),
-          index: i
-        });
-        return CartesianGrid.renderLineItem(vertical, props);
-      });
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        className: "recharts-cartesian-grid-vertical"
-      }, items);
+  // Why =y -y? I was trying to find any difference that this makes, with floating point numbers and edge cases but ... nothing.
+  var roundedSortedHorizontalPoints = horizontalPoints.map(function (e) {
+    return Math.round(e + y - y);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  // Why is this condition `!==` instead of `<=` ?
+  if (y !== roundedSortedHorizontalPoints[0]) {
+    roundedSortedHorizontalPoints.unshift(0);
+  }
+  var items = roundedSortedHorizontalPoints.map(function (entry, i) {
+    // Why do we strip only the last stripe if it is invisible, and not all invisible stripes?
+    var lastStripe = !roundedSortedHorizontalPoints[i + 1];
+    var lineHeight = lastStripe ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
+    if (lineHeight <= 0) {
+      return null;
     }
-
-    /**
-     * Draw vertical grid stripes filled by colors
-     * @param {Array} verticalPoints either passed in as props or generated from function
-     * @return {Group} Vertical stripes
-     */
-  }, {
-    key: "renderVerticalStripes",
-    value: function renderVerticalStripes(verticalPoints) {
-      var verticalFill = this.props.verticalFill;
-      if (!verticalFill || !verticalFill.length) {
-        return null;
-      }
-      var _this$props3 = this.props,
-        fillOpacity = _this$props3.fillOpacity,
-        x = _this$props3.x,
-        y = _this$props3.y,
-        width = _this$props3.width,
-        height = _this$props3.height;
-      var roundedSortedVerticalPoints = verticalPoints.map(function (e) {
-        return Math.round(e + x - x);
-      }).sort(function (a, b) {
-        return a - b;
-      });
-      if (x !== roundedSortedVerticalPoints[0]) {
-        roundedSortedVerticalPoints.unshift(0);
-      }
-      var items = roundedSortedVerticalPoints.map(function (entry, i) {
-        var lastStripe = !roundedSortedVerticalPoints[i + 1];
-        var lineWidth = lastStripe ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
-        if (lineWidth <= 0) {
-          return null;
-        }
-        var colorIndex = i % verticalFill.length;
-        return /*#__PURE__*/_react["default"].createElement("rect", {
-          key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
-          ,
-          x: entry,
-          y: y,
-          width: lineWidth,
-          height: height,
-          stroke: "none",
-          fill: verticalFill[colorIndex],
-          fillOpacity: fillOpacity,
-          className: "recharts-cartesian-grid-bg"
-        });
-      });
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        className: "recharts-cartesian-gridstripes-vertical"
-      }, items);
+    var colorIndex = i % horizontalFill.length;
+    return /*#__PURE__*/_react["default"].createElement("rect", {
+      key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
+      ,
+      y: entry,
+      x: x,
+      height: lineHeight,
+      width: width,
+      stroke: "none",
+      fill: horizontalFill[colorIndex],
+      fillOpacity: fillOpacity,
+      className: "recharts-cartesian-grid-bg"
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "recharts-cartesian-gridstripes-horizontal"
+  }, items);
+}
+function VerticalStripes(props) {
+  var _props$vertical2 = props.vertical,
+    vertical = _props$vertical2 === void 0 ? true : _props$vertical2,
+    verticalFill = props.verticalFill,
+    fillOpacity = props.fillOpacity,
+    x = props.x,
+    y = props.y,
+    width = props.width,
+    height = props.height,
+    verticalPoints = props.verticalPoints;
+  if (!vertical || !verticalFill || !verticalFill.length) {
+    return null;
+  }
+  var roundedSortedVerticalPoints = verticalPoints.map(function (e) {
+    return Math.round(e + x - x);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+  if (x !== roundedSortedVerticalPoints[0]) {
+    roundedSortedVerticalPoints.unshift(0);
+  }
+  var items = roundedSortedVerticalPoints.map(function (entry, i) {
+    var lastStripe = !roundedSortedVerticalPoints[i + 1];
+    var lineWidth = lastStripe ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
+    if (lineWidth <= 0) {
+      return null;
     }
-
-    /**
-     * Draw horizontal grid stripes filled by colors
-     * @param {Array} horizontalPoints either passed in as props or generated from function
-     * @return {Group} Horizontal stripes
-     */
-  }, {
-    key: "renderHorizontalStripes",
-    value: function renderHorizontalStripes(horizontalPoints) {
-      var horizontalFill = this.props.horizontalFill;
-      if (!horizontalFill || !horizontalFill.length) {
-        return null;
-      }
-      var _this$props4 = this.props,
-        fillOpacity = _this$props4.fillOpacity,
-        x = _this$props4.x,
-        y = _this$props4.y,
-        width = _this$props4.width,
-        height = _this$props4.height;
-      var roundedSortedHorizontalPoints = horizontalPoints.map(function (e) {
-        return Math.round(e + y - y);
-      }).sort(function (a, b) {
-        return a - b;
-      });
-      if (y !== roundedSortedHorizontalPoints[0]) {
-        roundedSortedHorizontalPoints.unshift(0);
-      }
-      var items = roundedSortedHorizontalPoints.map(function (entry, i) {
-        var lastStripe = !roundedSortedHorizontalPoints[i + 1];
-        var lineHeight = lastStripe ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
-        if (lineHeight <= 0) {
-          return null;
-        }
-        var colorIndex = i % horizontalFill.length;
-        return /*#__PURE__*/_react["default"].createElement("rect", {
-          key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
-          ,
-          y: entry,
-          x: x,
-          height: lineHeight,
-          width: width,
-          stroke: "none",
-          fill: horizontalFill[colorIndex],
-          fillOpacity: fillOpacity,
-          className: "recharts-cartesian-grid-bg"
-        });
-      });
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        className: "recharts-cartesian-gridstripes-horizontal"
-      }, items);
+    var colorIndex = i % verticalFill.length;
+    return /*#__PURE__*/_react["default"].createElement("rect", {
+      key: "react-".concat(i) // eslint-disable-line react/no-array-index-key
+      ,
+      x: entry,
+      y: y,
+      width: lineWidth,
+      height: height,
+      stroke: "none",
+      fill: verticalFill[colorIndex],
+      fillOpacity: fillOpacity,
+      className: "recharts-cartesian-grid-bg"
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "recharts-cartesian-gridstripes-vertical"
+  }, items);
+}
+var defaultVerticalCoordinatesGenerator = function defaultVerticalCoordinatesGenerator(_ref, syncWithTicks) {
+  var xAxis = _ref.xAxis,
+    width = _ref.width,
+    height = _ref.height,
+    offset = _ref.offset;
+  return (0, _ChartUtils.getCoordinatesOfGrid)((0, _getTicks.getTicks)(_objectSpread(_objectSpread(_objectSpread({}, _CartesianAxis.CartesianAxis.defaultProps), xAxis), {}, {
+    ticks: (0, _ChartUtils.getTicksOfAxis)(xAxis, true),
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
     }
-  }, {
-    key: "renderBackground",
-    value: function renderBackground() {
-      var fill = this.props.fill;
-      if (!fill || fill === 'none') {
-        return null;
-      }
-      var _this$props5 = this.props,
-        fillOpacity = _this$props5.fillOpacity,
-        x = _this$props5.x,
-        y = _this$props5.y,
-        width = _this$props5.width,
-        height = _this$props5.height;
-      return /*#__PURE__*/_react["default"].createElement("rect", {
-        x: x,
-        y: y,
-        width: width,
-        height: height,
-        stroke: "none",
-        fill: fill,
-        fillOpacity: fillOpacity,
-        className: "recharts-cartesian-grid-bg"
-      });
+  })), offset.left, offset.left + offset.width, syncWithTicks);
+};
+var defaultHorizontalCoordinatesGenerator = function defaultHorizontalCoordinatesGenerator(_ref2, syncWithTicks) {
+  var yAxis = _ref2.yAxis,
+    width = _ref2.width,
+    height = _ref2.height,
+    offset = _ref2.offset;
+  return (0, _ChartUtils.getCoordinatesOfGrid)((0, _getTicks.getTicks)(_objectSpread(_objectSpread(_objectSpread({}, _CartesianAxis.CartesianAxis.defaultProps), yAxis), {}, {
+    ticks: (0, _ChartUtils.getTicksOfAxis)(yAxis, true),
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: width,
+      height: height
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props6 = this.props,
-        x = _this$props6.x,
-        y = _this$props6.y,
-        width = _this$props6.width,
-        height = _this$props6.height,
-        horizontal = _this$props6.horizontal,
-        vertical = _this$props6.vertical,
-        horizontalCoordinatesGenerator = _this$props6.horizontalCoordinatesGenerator,
-        verticalCoordinatesGenerator = _this$props6.verticalCoordinatesGenerator,
-        xAxis = _this$props6.xAxis,
-        yAxis = _this$props6.yAxis,
-        offset = _this$props6.offset,
-        chartWidth = _this$props6.chartWidth,
-        chartHeight = _this$props6.chartHeight,
-        syncWithTicks = _this$props6.syncWithTicks,
-        horizontalValues = _this$props6.horizontalValues,
-        verticalValues = _this$props6.verticalValues;
-      if (!(0, _DataUtils.isNumber)(width) || width <= 0 || !(0, _DataUtils.isNumber)(height) || height <= 0 || !(0, _DataUtils.isNumber)(x) || x !== +x || !(0, _DataUtils.isNumber)(y) || y !== +y) {
-        return null;
-      }
-      var _this$props7 = this.props,
-        horizontalPoints = _this$props7.horizontalPoints,
-        verticalPoints = _this$props7.verticalPoints;
-
-      // No horizontal points are specified
-      if ((!horizontalPoints || !horizontalPoints.length) && (0, _isFunction["default"])(horizontalCoordinatesGenerator)) {
-        var isHorizontalValues = horizontalValues && horizontalValues.length;
-        horizontalPoints = horizontalCoordinatesGenerator({
-          yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, {
-            ticks: isHorizontalValues ? horizontalValues : yAxis.ticks
-          }) : undefined,
-          width: chartWidth,
-          height: chartHeight,
-          offset: offset
-        }, isHorizontalValues ? true : syncWithTicks);
-      }
-
-      // No vertical points are specified
-      if ((!verticalPoints || !verticalPoints.length) && (0, _isFunction["default"])(verticalCoordinatesGenerator)) {
-        var isVerticalValues = verticalValues && verticalValues.length;
-        verticalPoints = verticalCoordinatesGenerator({
-          xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, {
-            ticks: isVerticalValues ? verticalValues : xAxis.ticks
-          }) : undefined,
-          width: chartWidth,
-          height: chartHeight,
-          offset: offset
-        }, isVerticalValues ? true : syncWithTicks);
-      }
-      return /*#__PURE__*/_react["default"].createElement("g", {
-        className: "recharts-cartesian-grid"
-      }, this.renderBackground(), horizontal && this.renderHorizontal(horizontalPoints), vertical && this.renderVertical(verticalPoints), horizontal && this.renderHorizontalStripes(horizontalPoints), vertical && this.renderVerticalStripes(verticalPoints));
-    }
-  }], [{
-    key: "renderLineItem",
-    value: function renderLineItem(option, props) {
-      var lineItem;
-      if ( /*#__PURE__*/_react["default"].isValidElement(option)) {
-        lineItem = /*#__PURE__*/_react["default"].cloneElement(option, props);
-      } else if ((0, _isFunction["default"])(option)) {
-        lineItem = option(props);
-      } else {
-        var x1 = props.x1,
-          y1 = props.y1,
-          x2 = props.x2,
-          y2 = props.y2,
-          key = props.key,
-          others = _objectWithoutProperties(props, _excluded);
-        var _filterProps = (0, _ReactUtils.filterProps)(others),
-          __ = _filterProps.offset,
-          restOfFilteredProps = _objectWithoutProperties(_filterProps, _excluded2);
-        lineItem = /*#__PURE__*/_react["default"].createElement("line", _extends({}, restOfFilteredProps, {
-          x1: x1,
-          y1: y1,
-          x2: x2,
-          y2: y2,
-          fill: "none",
-          key: key
-        }));
-      }
-      return lineItem;
-    }
-  }]);
-  return CartesianGrid;
-}(_react.PureComponent);
-_defineProperty(CartesianGrid, "displayName", 'CartesianGrid');
-_defineProperty(CartesianGrid, "defaultProps", {
+  })), offset.top, offset.top + offset.height, syncWithTicks);
+};
+var defaultProps = {
   horizontal: true,
@@ -336,2 +265,95 @@ vertical: true,
   horizontalFill: []
-});
+};
+function CartesianGrid(props) {
+  var _props$stroke, _props$fill, _props$horizontal3, _props$horizontalFill, _props$vertical3, _props$verticalFill;
+  var chartWidth = (0, _chartLayoutContext.useChartWidth)();
+  var chartHeight = (0, _chartLayoutContext.useChartHeight)();
+  var offset = (0, _chartLayoutContext.useOffset)();
+  var propsIncludingDefaults = _objectSpread(_objectSpread({}, props), {}, {
+    stroke: (_props$stroke = props.stroke) !== null && _props$stroke !== void 0 ? _props$stroke : defaultProps.stroke,
+    fill: (_props$fill = props.fill) !== null && _props$fill !== void 0 ? _props$fill : defaultProps.fill,
+    horizontal: (_props$horizontal3 = props.horizontal) !== null && _props$horizontal3 !== void 0 ? _props$horizontal3 : defaultProps.horizontal,
+    horizontalFill: (_props$horizontalFill = props.horizontalFill) !== null && _props$horizontalFill !== void 0 ? _props$horizontalFill : defaultProps.horizontalFill,
+    vertical: (_props$vertical3 = props.vertical) !== null && _props$vertical3 !== void 0 ? _props$vertical3 : defaultProps.vertical,
+    verticalFill: (_props$verticalFill = props.verticalFill) !== null && _props$verticalFill !== void 0 ? _props$verticalFill : defaultProps.verticalFill
+  });
+  var x = propsIncludingDefaults.x,
+    y = propsIncludingDefaults.y,
+    width = propsIncludingDefaults.width,
+    height = propsIncludingDefaults.height,
+    xAxis = propsIncludingDefaults.xAxis,
+    yAxis = propsIncludingDefaults.yAxis,
+    syncWithTicks = propsIncludingDefaults.syncWithTicks,
+    horizontalValues = propsIncludingDefaults.horizontalValues,
+    verticalValues = propsIncludingDefaults.verticalValues;
+  if (!(0, _DataUtils.isNumber)(width) || width <= 0 || !(0, _DataUtils.isNumber)(height) || height <= 0 || !(0, _DataUtils.isNumber)(x) || x !== +x || !(0, _DataUtils.isNumber)(y) || y !== +y) {
+    return null;
+  }
+
+  /*
+   * verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined
+   * outside of the propsIncludingDefaults because they were never part of the original props
+   * and they were never passed as a prop down to horizontal/vertical custom elements.
+   * If we add these two to propsIncludingDefaults then we are changing public API.
+   * Not a bad thing per se but also not necessary.
+   */
+  var verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
+  var horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
+  var horizontalPoints = propsIncludingDefaults.horizontalPoints,
+    verticalPoints = propsIncludingDefaults.verticalPoints;
+
+  // No horizontal points are specified
+  if ((!horizontalPoints || !horizontalPoints.length) && (0, _isFunction["default"])(horizontalCoordinatesGenerator)) {
+    var isHorizontalValues = horizontalValues && horizontalValues.length;
+    var generatorResult = horizontalCoordinatesGenerator({
+      yAxis: yAxis ? _objectSpread(_objectSpread({}, yAxis), {}, {
+        ticks: isHorizontalValues ? horizontalValues : yAxis.ticks
+      }) : undefined,
+      width: chartWidth,
+      height: chartHeight,
+      offset: offset
+    }, isHorizontalValues ? true : syncWithTicks);
+    (0, _LogUtils.warn)(Array.isArray(generatorResult), "horizontalCoordinatesGenerator should return Array but instead it returned [".concat(_typeof(generatorResult), "]"));
+    if (Array.isArray(generatorResult)) {
+      horizontalPoints = generatorResult;
+    }
+  }
+
+  // No vertical points are specified
+  if ((!verticalPoints || !verticalPoints.length) && (0, _isFunction["default"])(verticalCoordinatesGenerator)) {
+    var isVerticalValues = verticalValues && verticalValues.length;
+    var _generatorResult = verticalCoordinatesGenerator({
+      xAxis: xAxis ? _objectSpread(_objectSpread({}, xAxis), {}, {
+        ticks: isVerticalValues ? verticalValues : xAxis.ticks
+      }) : undefined,
+      width: chartWidth,
+      height: chartHeight,
+      offset: offset
+    }, isVerticalValues ? true : syncWithTicks);
+    (0, _LogUtils.warn)(Array.isArray(_generatorResult), "verticalCoordinatesGenerator should return Array but instead it returned [".concat(_typeof(_generatorResult), "]"));
+    if (Array.isArray(_generatorResult)) {
+      verticalPoints = _generatorResult;
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "recharts-cartesian-grid"
+  }, /*#__PURE__*/_react["default"].createElement(Background, {
+    fill: propsIncludingDefaults.fill,
+    fillOpacity: propsIncludingDefaults.fillOpacity,
+    x: propsIncludingDefaults.x,
+    y: propsIncludingDefaults.y,
+    width: propsIncludingDefaults.width,
+    height: propsIncludingDefaults.height
+  }), /*#__PURE__*/_react["default"].createElement(HorizontalGridLines, _extends({}, propsIncludingDefaults, {
+    offset: offset,
+    horizontalPoints: horizontalPoints
+  })), /*#__PURE__*/_react["default"].createElement(VerticalGridLines, _extends({}, propsIncludingDefaults, {
+    offset: offset,
+    verticalPoints: verticalPoints
+  })), /*#__PURE__*/_react["default"].createElement(HorizontalStripes, _extends({}, propsIncludingDefaults, {
+    horizontalPoints: horizontalPoints
+  })), /*#__PURE__*/_react["default"].createElement(VerticalStripes, _extends({}, propsIncludingDefaults, {
+    verticalPoints: verticalPoints
+  })));
+}
+CartesianGrid.displayName = 'CartesianGrid';

lib/cartesian/ErrorBar.js

@@ -8,2 +8,3 @@ "use strict";
 var _react = _interopRequireDefault(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _Layer = require("../container/Layer");
@@ -35,3 +36,4 @@ var _ReactUtils = require("../util/ReactUtils");
     others = _objectWithoutProperties(props, _excluded);
-  var svgProps = (0, _ReactUtils.filterProps)(others);
+  var svgProps = (0, _ReactUtils.filterProps)(others, false);
+  !!(props.direction === 'x' && xAxis.type !== 'number') ? process.env.NODE_ENV !== "production" ? (0, _tinyInvariant["default"])(false, 'ErrorBar requires Axis type property to be "number".') : (0, _tinyInvariant["default"])(false) : void 0;
   var errorBars = data.map(function (entry) {
@@ -38,0 +40,0 @@ var _dataPointFormatter = dataPointFormatter(entry, dataKey),

lib/cartesian/Line.js

@@ -199,3 +199,3 @@ "use strict";
         dataKey = _this$props2.dataKey;
-      var lineProps = (0, _ReactUtils.filterProps)(this.props);
+      var lineProps = (0, _ReactUtils.filterProps)(this.props, false);
       var customDotProps = (0, _ReactUtils.filterProps)(dot, true);
@@ -368,3 +368,3 @@ var dots = points.map(function (entry, i) {
       var clipPathId = (0, _isNil["default"])(id) ? this.id : id;
-      var _ref2 = (_filterProps = (0, _ReactUtils.filterProps)(dot)) !== null && _filterProps !== void 0 ? _filterProps : {
+      var _ref2 = (_filterProps = (0, _ReactUtils.filterProps)(dot, false)) !== null && _filterProps !== void 0 ? _filterProps : {
           r: 3,
@@ -371,0 +371,0 @@ strokeWidth: 2

lib/cartesian/ReferenceLine.js

@@ -20,2 +20,3 @@ "use strict";
 var _ReactUtils = require("../util/ReactUtils");
+var _chartLayoutContext = require("../context/chartLayoutContext");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -57,12 +58,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 // TODO: ScaleHelper
-var getEndPoints = exports.getEndPoints = function getEndPoints(scales, isFixedX, isFixedY, isSegment, props) {
-  var _props$viewBox = props.viewBox,
-    x = _props$viewBox.x,
-    y = _props$viewBox.y,
-    width = _props$viewBox.width,
-    height = _props$viewBox.height,
-    position = props.position;
+var getEndPoints = exports.getEndPoints = function getEndPoints(scales, isFixedX, isFixedY, isSegment, viewBox, position, xAxisOrientation, yAxisOrientation, props) {
+  var x = viewBox.x,
+    y = viewBox.y,
+    width = viewBox.width,
+    height = viewBox.height;
   if (isFixedY) {
-    var yCoord = props.y,
-      orientation = props.yAxis.orientation;
+    var yCoord = props.y;
     var coord = scales.y.apply(yCoord, {
@@ -81,7 +79,6 @@ position: position
     }];
-    return orientation === 'left' ? points.reverse() : points;
+    return yAxisOrientation === 'left' ? points.reverse() : points;
   }
   if (isFixedX) {
-    var xCoord = props.x,
-      _orientation = props.xAxis.orientation;
+    var xCoord = props.x;
     var _coord = scales.x.apply(xCoord, {
@@ -100,3 +97,3 @@ position: position
     }];
-    return _orientation === 'top' ? _points.reverse() : _points;
+    return xAxisOrientation === 'top' ? _points.reverse() : _points;
   }
@@ -123,8 +120,14 @@ if (isSegment) {
     segment = props.segment,
-    xAxis = props.xAxis,
-    yAxis = props.yAxis,
+    xAxisId = props.xAxisId,
+    yAxisId = props.yAxisId,
     shape = props.shape,
     className = props.className,
-    alwaysShow = props.alwaysShow,
-    clipPathId = props.clipPathId;
+    alwaysShow = props.alwaysShow;
+  var clipPathId = (0, _chartLayoutContext.useClipPathId)();
+  var xAxis = (0, _chartLayoutContext.useXAxisOrThrow)(xAxisId);
+  var yAxis = (0, _chartLayoutContext.useYAxisOrThrow)(yAxisId);
+  var viewBox = (0, _chartLayoutContext.useViewBox)();
+  if (!clipPathId || !viewBox) {
+    return null;
+  }
   (0, _LogUtils.warn)(alwaysShow === undefined, 'The alwaysShow prop is deprecated. Please use ifOverflow="extendDomain" instead.');
@@ -138,3 +141,3 @@ var scales = (0, _CartesianUtils.createLabeledScales)({
   var isSegment = segment && segment.length === 2;
-  var endPoints = getEndPoints(scales, isX, isY, isSegment, props);
+  var endPoints = getEndPoints(scales, isX, isY, isSegment, viewBox, props.position, xAxis.orientation, yAxis.orientation, props);
   if (!endPoints) {
@@ -141,0 +144,0 @@ return null;

lib/cartesian/Scatter.js

@@ -82,3 +82,3 @@ "use strict";
         activeIndex = _this$props.activeIndex;
-      var baseProps = (0, _ReactUtils.filterProps)(this.props);
+      var baseProps = (0, _ReactUtils.filterProps)(this.props, false);
       return points.map(function (entry, i) {
@@ -206,4 +206,4 @@ var isActive = activeIndex === i;
         lineJointType = _this$props5.lineJointType;
-      var scatterProps = (0, _ReactUtils.filterProps)(this.props);
-      var customLineProps = (0, _ReactUtils.filterProps)(line);
+      var scatterProps = (0, _ReactUtils.filterProps)(this.props, false);
+      var customLineProps = (0, _ReactUtils.filterProps)(line, false);
       var linePoints, lineItem;
@@ -210,0 +210,0 @@ if (lineType === 'joint') {

lib/cartesian/XAxis.js

@@ -7,10 +7,37 @@ "use strict";
 exports.XAxis = void 0;
-/**
- * @fileOverview X Axis
- */
-
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartLayoutContext = require("../context/chartLayoutContext");
+var _CartesianAxis = require("./CartesianAxis");
+var _ChartUtils = require("../util/ChartUtils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /**
+                                                                                                                                                                                                                                                                                                                                                     * @fileOverview X Axis
+                                                                                                                                                                                                                                                                                                                                                     */
 /** Define of XAxis props */
 
-var XAxis = exports.XAxis = function XAxis() {
-  return null;
+var XAxis = exports.XAxis = function XAxis(_ref) {
+  var xAxisId = _ref.xAxisId;
+  var width = (0, _chartLayoutContext.useChartWidth)();
+  var height = (0, _chartLayoutContext.useChartHeight)();
+  var axisOptions = (0, _chartLayoutContext.useXAxisOrThrow)(xAxisId);
+  if (axisOptions == null) {
+    return null;
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error the axisOptions type is not exactly what CartesianAxis is expecting.
+    _react["default"].createElement(_CartesianAxis.CartesianAxis, _extends({}, axisOptions, {
+      className: (0, _clsx["default"])("recharts-".concat(axisOptions.axisType, " ").concat(axisOptions.axisType), axisOptions.className),
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height
+      },
+      ticksGenerator: function ticksGenerator(axis) {
+        return (0, _ChartUtils.getTicksOfAxis)(axis, true);
+      }
+    }))
+  );
 };
@@ -17,0 +44,0 @@ XAxis.displayName = 'XAxis';

lib/cartesian/YAxis.js

@@ -7,8 +7,35 @@ "use strict";
 exports.YAxis = void 0;
-/**
- * @fileOverview Y Axis
- */
-
-var YAxis = exports.YAxis = function YAxis() {
-  return null;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartLayoutContext = require("../context/chartLayoutContext");
+var _CartesianAxis = require("./CartesianAxis");
+var _ChartUtils = require("../util/ChartUtils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /**
+                                                                                                                                                                                                                                                                                                                                                     * @fileOverview Y Axis
+                                                                                                                                                                                                                                                                                                                                                     */
+var YAxis = exports.YAxis = function YAxis(_ref) {
+  var yAxisId = _ref.yAxisId;
+  var width = (0, _chartLayoutContext.useChartWidth)();
+  var height = (0, _chartLayoutContext.useChartHeight)();
+  var axisOptions = (0, _chartLayoutContext.useYAxisOrThrow)(yAxisId);
+  if (axisOptions == null) {
+    return null;
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error the axisOptions type is not exactly what CartesianAxis is expecting.
+    _react["default"].createElement(_CartesianAxis.CartesianAxis, _extends({}, axisOptions, {
+      className: (0, _clsx["default"])("recharts-".concat(axisOptions.axisType, " ").concat(axisOptions.axisType), axisOptions.className),
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: width,
+        height: height
+      },
+      ticksGenerator: function ticksGenerator(axis) {
+        return (0, _ChartUtils.getTicksOfAxis)(axis, true);
+      }
+    }))
+  );
 };
@@ -15,0 +42,0 @@ YAxis.displayName = 'YAxis';

lib/chart/AccessibilityManager.js

@@ -24,4 +24,5 @@ "use strict";
     value: function setDetails(_ref) {
+      var _ref2;
       var _ref$coordinateList = _ref.coordinateList,
-        coordinateList = _ref$coordinateList === void 0 ? [] : _ref$coordinateList,
+        coordinateList = _ref$coordinateList === void 0 ? null : _ref$coordinateList,
         _ref$container = _ref.container,
@@ -35,3 +36,3 @@ container = _ref$container === void 0 ? null : _ref$container,
         mouseHandlerCallback = _ref$mouseHandlerCall === void 0 ? null : _ref$mouseHandlerCall;
-      this.coordinateList = coordinateList !== null && coordinateList !== void 0 ? coordinateList : this.coordinateList;
+      this.coordinateList = (_ref2 = coordinateList !== null && coordinateList !== void 0 ? coordinateList : this.coordinateList) !== null && _ref2 !== void 0 ? _ref2 : [];
       this.container = container !== null && container !== void 0 ? container : this.container;
@@ -85,2 +86,7 @@ this.layout = layout !== null && layout !== void 0 ? layout : this.layout;
   }, {
+    key: "setIndex",
+    value: function setIndex(newIndex) {
+      this.activeIndex = newIndex;
+    }
+  }, {
     key: "spoofMouse",
@@ -87,0 +93,0 @@ value: function spoofMouse() {

lib/chart/Sankey.js

@@ -468,3 +468,3 @@ "use strict";
           })
-        }, (0, _ReactUtils.filterProps)(linkContent));
+        }, (0, _ReactUtils.filterProps)(linkContent, false));
         var events = {
@@ -497,3 +497,3 @@ onMouseEnter: _this2.handleMouseEnter.bind(_this2, linkProps, 'link'),
           dy = node.dy;
-        var nodeProps = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(nodeContent)), {}, {
+        var nodeProps = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(nodeContent, false)), {}, {
           x: x + left,
@@ -564,3 +564,3 @@ y: y + top,
         nodes = _this$state2.nodes;
-      var attrs = (0, _ReactUtils.filterProps)(others);
+      var attrs = (0, _ReactUtils.filterProps)(others, false);
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -644,3 +644,3 @@ className: (0, _clsx["default"])('recharts-wrapper', className),
         strokeOpacity: "0.2"
-      }, (0, _ReactUtils.filterProps)(others)));
+      }, (0, _ReactUtils.filterProps)(others, false)));
     }
@@ -660,3 +660,3 @@ }, {
         fillOpacity: "0.8"
-      }, (0, _ReactUtils.filterProps)(props), {
+      }, (0, _ReactUtils.filterProps)(props, false), {
         role: "img"
@@ -663,0 +663,0 @@ }));

lib/chart/Treemap.js

@@ -452,3 +452,3 @@ "use strict";
         type = _this$props7.type;
-      var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props)), node), {}, {
+      var nodeProps = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props, false)), node), {}, {
         root: root
@@ -580,3 +580,3 @@ });
         others = _objectWithoutProperties(_this$props11, _excluded);
-      var attrs = (0, _ReactUtils.filterProps)(others);
+      var attrs = (0, _ReactUtils.filterProps)(others, false);
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -583,0 +583,0 @@ className: (0, _clsx["default"])('recharts-wrapper', className),

lib/component/Cursor.js

@@ -77,3 +77,3 @@ "use strict";
     pointerEvents: 'none'
-  }, offset), restProps), (0, _ReactUtils.filterProps)(element.props.cursor)), {}, {
+  }, offset), restProps), (0, _ReactUtils.filterProps)(element.props.cursor, false)), {}, {
     payload: activePayload,
@@ -80,0 +80,0 @@ payloadIndex: activeTooltipIndex,

lib/component/Tooltip.js

@@ -54,2 +54,3 @@ "use strict";
     value: function render() {
+      var _this = this;
       var _this$props = this.props,
@@ -75,3 +76,3 @@ active = _this$props.active,
         finalPayload = (0, _getUniqPayload.getUniqPayload)(payload.filter(function (entry) {
-          return entry.value != null;
+          return entry.value != null && (entry.hide !== true || _this.props.includeHidden);
         }), payloadUniqBy, defaultUniqBy);
@@ -78,0 +79,0 @@ }

lib/index.js

@@ -270,2 +270,8 @@ "use strict";
 });
+Object.defineProperty(exports, "SunburstChart", {
+  enumerable: true,
+  get: function get() {
+    return _SunburstChart.SunburstChart;
+  }
+});
 Object.defineProperty(exports, "Surface", {
@@ -374,2 +380,3 @@ enumerable: true,
 var _ComposedChart = require("./chart/ComposedChart");
+var _SunburstChart = require("./chart/SunburstChart");
 var _Funnel = require("./numberAxis/Funnel");
@@ -376,0 +383,0 @@ var _FunnelChart = require("./chart/FunnelChart");

lib/numberAxis/Funnel.js

@@ -246,3 +246,3 @@ "use strict";
     children = _item$props.children;
-  var presentationProps = (0, _ReactUtils.filterProps)(item.props);
+  var presentationProps = (0, _ReactUtils.filterProps)(item.props, false);
   var cells = (0, _ReactUtils.findAllByType)(children, _Cell.Cell);
@@ -249,0 +249,0 @@ if (data && data.length) {

lib/polar/Pie.js

@@ -114,5 +114,5 @@ "use strict";
         valueKey = _this$props.valueKey;
-      var pieProps = (0, _ReactUtils.filterProps)(this.props);
-      var customLabelProps = (0, _ReactUtils.filterProps)(label);
-      var customLabelLineProps = (0, _ReactUtils.filterProps)(labelLine);
+      var pieProps = (0, _ReactUtils.filterProps)(this.props, false);
+      var customLabelProps = (0, _ReactUtils.filterProps)(label, false);
+      var customLabelLineProps = (0, _ReactUtils.filterProps)(labelLine, false);
       var offsetRadius = label && label.offsetRadius || 20;
@@ -440,3 +440,3 @@ var labels = sectors.map(function (entry, i) {
     children = _item$props.children;
-  var presentationProps = (0, _ReactUtils.filterProps)(item.props);
+  var presentationProps = (0, _ReactUtils.filterProps)(item.props, false);
   var cells = (0, _ReactUtils.findAllByType)(children, _Cell.Cell);
@@ -443,0 +443,0 @@ if (data && data.length) {

lib/polar/PolarAngleAxis.js

@@ -104,5 +104,5 @@ "use strict";
         axisLineType = _this$props2.axisLineType;
-      var props = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props)), {}, {
+      var props = _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(this.props, false)), {}, {
         fill: 'none'
-      }, (0, _ReactUtils.filterProps)(axisLine));
+      }, (0, _ReactUtils.filterProps)(axisLine, false));
       if (axisLineType === 'circle') {
@@ -137,7 +137,7 @@ return /*#__PURE__*/_react["default"].createElement(_Dot.Dot, _extends({
         stroke = _this$props3.stroke;
-      var axisProps = (0, _ReactUtils.filterProps)(this.props);
-      var customTickProps = (0, _ReactUtils.filterProps)(tick);
+      var axisProps = (0, _ReactUtils.filterProps)(this.props, false);
+      var customTickProps = (0, _ReactUtils.filterProps)(tick, false);
       var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
         fill: 'none'
-      }, (0, _ReactUtils.filterProps)(tickLine));
+      }, (0, _ReactUtils.filterProps)(tickLine, false));
       var items = ticks.map(function (entry, i) {
@@ -144,0 +144,0 @@ var lineCoord = _this.getTickLineCoord(entry);

lib/polar/PolarGrid.js

@@ -50,3 +50,3 @@ "use strict";
     stroke: '#ccc'
-  }, (0, _ReactUtils.filterProps)(props));
+  }, (0, _ReactUtils.filterProps)(props, false));
   return /*#__PURE__*/_react["default"].createElement("g", {
@@ -75,3 +75,3 @@ className: "recharts-polar-grid-angle"
     stroke: '#ccc'
-  }, (0, _ReactUtils.filterProps)(props)), {}, {
+  }, (0, _ReactUtils.filterProps)(props, false)), {}, {
     fill: 'none'
@@ -94,3 +94,3 @@ });
     stroke: '#ccc'
-  }, (0, _ReactUtils.filterProps)(props)), {}, {
+  }, (0, _ReactUtils.filterProps)(props, false)), {}, {
     fill: 'none'
@@ -97,0 +97,0 @@ });

lib/polar/PolarRadiusAxis.js

@@ -122,5 +122,5 @@ "use strict";
       var point1 = (0, _PolarUtils.polarToCartesian)(cx, cy, extent[1], angle);
-      var props = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(others)), {}, {
+      var props = _objectSpread(_objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(others, false)), {}, {
         fill: 'none'
-      }, (0, _ReactUtils.filterProps)(axisLine)), {}, {
+      }, (0, _ReactUtils.filterProps)(axisLine, false)), {}, {
         x1: point0.x,
@@ -147,4 +147,4 @@ y1: point0.y,
       var textAnchor = this.getTickTextAnchor();
-      var axisProps = (0, _ReactUtils.filterProps)(others);
-      var customTickProps = (0, _ReactUtils.filterProps)(tick);
+      var axisProps = (0, _ReactUtils.filterProps)(others, false);
+      var customTickProps = (0, _ReactUtils.filterProps)(tick, false);
       var items = ticks.map(function (entry, i) {
@@ -151,0 +151,0 @@ var coord = _this.getTickValueCoord(entry);

lib/polar/Radar.js

@@ -97,4 +97,4 @@ "use strict";
         dataKey = _this$props.dataKey;
-      var baseProps = (0, _ReactUtils.filterProps)(this.props);
-      var customDotProps = (0, _ReactUtils.filterProps)(dot);
+      var baseProps = (0, _ReactUtils.filterProps)(this.props, false);
+      var customDotProps = (0, _ReactUtils.filterProps)(dot, true);
       var dots = points.map(function (entry, i) {
@@ -101,0 +101,0 @@ var dotProps = _objectSpread(_objectSpread(_objectSpread({

lib/polar/RadialBar.js

@@ -102,3 +102,3 @@ "use strict";
         others = _objectWithoutProperties(_this$props2, _excluded);
-      var baseProps = (0, _ReactUtils.filterProps)(others);
+      var baseProps = (0, _ReactUtils.filterProps)(others, false);
       return sectors.map(function (entry, i) {
@@ -184,3 +184,3 @@ var isActive = i === activeIndex;
       var cornerRadius = this.props.cornerRadius;
-      var backgroundProps = (0, _ReactUtils.filterProps)(this.props.background);
+      var backgroundProps = (0, _ReactUtils.filterProps)(this.props.background, false);
       return sectors.map(function (entry, i) {
@@ -187,0 +187,0 @@ var value = entry.value,

lib/shape/Curve.js

@@ -117,3 +117,3 @@ "use strict";
   var realPath = points && points.length ? getPath(props) : path;
-  return /*#__PURE__*/_react["default"].createElement("path", _extends({}, (0, _ReactUtils.filterProps)(props), (0, _types.adaptEventHandlers)(props), {
+  return /*#__PURE__*/_react["default"].createElement("path", _extends({}, (0, _ReactUtils.filterProps)(props, false), (0, _types.adaptEventHandlers)(props), {
     className: (0, _clsx["default"])('recharts-curve', className),
@@ -120,0 +120,0 @@ d: realPath,

lib/shape/Dot.js

@@ -22,3 +22,3 @@ "use strict";
   if (cx === +cx && cy === +cy && r === +r) {
-    return /*#__PURE__*/_react["default"].createElement("circle", _extends({}, (0, _ReactUtils.filterProps)(props), (0, _types.adaptEventHandlers)(props), {
+    return /*#__PURE__*/_react["default"].createElement("circle", _extends({}, (0, _ReactUtils.filterProps)(props, false), (0, _types.adaptEventHandlers)(props), {
       className: layerClass,
@@ -25,0 +25,0 @@ cx: cx,

lib/util/ChartUtils.js

@@ -1052,4 +1052,5 @@ "use strict";
     tooltipType = _graphicalItem$props.tooltipType,
-    chartType = _graphicalItem$props.chartType;
-  return _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(graphicalItem)), {}, {
+    chartType = _graphicalItem$props.chartType,
+    hide = _graphicalItem$props.hide;
+  return _objectSpread(_objectSpread({}, (0, _ReactUtils.filterProps)(graphicalItem, false)), {}, {
     dataKey: dataKey,
@@ -1063,4 +1064,5 @@ unit: unit,
     payload: payload,
-    chartType: chartType
+    chartType: chartType,
+    hide: hide
   });
 };

package.json

 {
   "name": "recharts",
-  "version": "2.10.4",
+  "version": "2.11.0",
   "description": "React charts",
@@ -108,3 +108,2 @@ "main": "lib/index",
     "@types/d3-interpolate": "^3.0.1",
-    "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
@@ -156,2 +155,3 @@ "@types/d3-time-format": "^4.0.0",
     "vitest": "^0.34.5",
+    "vitest-axe": "^0.1.0",
     "webpack": "^5.65.0",
@@ -158,0 +158,0 @@ "webpack-bundle-analyzer": "^4.4.0",

types/cartesian/CartesianGrid.d.ts

@@ -1,24 +0,37 @@
-import React, { PureComponent, ReactElement, SVGProps } from 'react';
+import React, { ReactElement, SVGProps } from 'react';
 import { ChartOffset, D3Scale } from '../util/types';
 import { Props as XAxisProps } from './XAxis';
 import { Props as YAxisProps } from './YAxis';
-declare type GridLineType = SVGProps<SVGLineElement> | ReactElement<SVGElement> | ((props: any) => ReactElement<SVGElement>) | boolean;
+export declare type GridLineTypeFunctionProps = Omit<LineItemProps, 'key'> & {
+    key: LineItemProps['key'] | undefined;
+    offset: ChartOffset;
+};
+declare type GridLineType = SVGProps<SVGLineElement> | ReactElement<SVGElement> | ((props: GridLineTypeFunctionProps) => ReactElement<SVGElement>) | boolean;
+export declare type HorizontalCoordinatesGenerator = (props: {
+    yAxis: any;
+    width: number;
+    height: number;
+    offset: ChartOffset;
+}, syncWithTicks: boolean) => number[];
+export declare type VerticalCoordinatesGenerator = (props: {
+    xAxis: any;
+    width: number;
+    height: number;
+    offset: ChartOffset;
+}, syncWithTicks: boolean) => number[];
 interface InternalCartesianGridProps {
-    x?: number;
-    y?: number;
     width?: number;
     height?: number;
-    horizontalCoordinatesGenerator?: (props: any, syncWithTicks: boolean) => number[];
-    verticalCoordinatesGenerator?: (props: any, syncWithTicks: boolean) => number[];
-    xAxis?: Omit<XAxisProps, 'scale'> & {
+    horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator;
+    verticalCoordinatesGenerator?: VerticalCoordinatesGenerator;
+    xAxis?: null | (Omit<XAxisProps, 'scale'> & {
         scale: D3Scale<string | number>;
-    };
-    yAxis?: Omit<YAxisProps, 'scale'> & {
+    });
+    yAxis?: null | (Omit<YAxisProps, 'scale'> & {
         scale: D3Scale<string | number>;
-    };
-    offset?: ChartOffset;
-    chartWidth?: number;
-    chartHeight?: number;
+    });
 }
 interface CartesianGridProps extends InternalCartesianGridProps {
+    x?: number;
+    y?: number;
     horizontal?: GridLineType;
@@ -34,23 +47,17 @@ vertical?: GridLineType;
 }
-export declare type Props = SVGProps<SVGElement> & CartesianGridProps;
-export declare class CartesianGrid extends PureComponent<Props> {
-    static displayName: string;
-    static defaultProps: {
-        horizontal: boolean;
-        vertical: boolean;
-        horizontalPoints: number[];
-        verticalPoints: number[];
-        stroke: string;
-        fill: string;
-        verticalFill: string[];
-        horizontalFill: string[];
-    };
-    static renderLineItem(option: GridLineType, props: any): React.JSX.Element;
-    renderHorizontal(horizontalPoints: number[]): React.JSX.Element;
-    renderVertical(verticalPoints: number[]): React.JSX.Element;
-    renderVerticalStripes(verticalPoints: number[]): React.JSX.Element;
-    renderHorizontalStripes(horizontalPoints: number[]): React.JSX.Element;
-    renderBackground(): React.JSX.Element;
-    render(): React.JSX.Element;
+declare type AcceptedSvgProps = Omit<SVGProps<SVGElement>, 'offset'>;
+export declare type Props = AcceptedSvgProps & CartesianGridProps;
+declare type LineItemProps = Props & {
+    offset: ChartOffset;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    key: string;
+    index: number;
+};
+export declare function CartesianGrid(props: Props): React.JSX.Element;
+export declare namespace CartesianGrid {
+    var displayName: string;
 }
 export {};

types/cartesian/ReferenceLine.d.ts

@@ -40,10 +40,2 @@ import React, { ReactElement, SVGProps } from 'react';
     ifOverflow?: IfOverflow;
-    viewBox?: CartesianViewBox;
-    xAxis?: {
-        orientation?: XAxisProps['orientation'];
-    };
-    yAxis?: {
-        orientation?: YAxisProps['orientation'];
-    };
-    position?: ReferenceLinePosition;
     segment?: ReadonlyArray<Segment>;
@@ -53,3 +45,3 @@ x?: number | string;
 };
-export declare const getEndPoints: (scales: any, isFixedX: boolean, isFixedY: boolean, isSegment: boolean, props: EndPointsPropsSubset) => any[];
+export declare const getEndPoints: (scales: any, isFixedX: boolean, isFixedY: boolean, isSegment: boolean, viewBox: CartesianViewBox, position: Props['position'], xAxisOrientation: XAxisProps['orientation'], yAxisOrientation: YAxisProps['orientation'], props: EndPointsPropsSubset) => any[];
 export declare function ReferenceLine(props: Props): React.JSX.Element;
@@ -56,0 +48,0 @@ export declare namespace ReferenceLine {

types/chart/AccessibilityManager.d.ts

@@ -23,4 +23,5 @@ import type { LayoutType, TickItem } from '../util/types';
     keyboardEvent(e: any): void;
+    setIndex(newIndex: number): void;
     private spoofMouse;
 }
 export {};

types/chart/AreaChart.d.ts

@@ -9,4 +9,5 @@ export declare const AreaChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/BarChart.d.ts

@@ -9,4 +9,5 @@ export declare const BarChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/ComposedChart.d.ts

@@ -9,4 +9,5 @@ export declare const ComposedChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/FunnelChart.d.ts

@@ -9,4 +9,5 @@ export declare const FunnelChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/generateCategoricalChart.d.ts

 import React, { ReactElement } from 'react';
 import type { DebouncedFunc } from 'lodash';
 import { AxisStackGroups } from '../util/ChartUtils';
-import { AxisType, BaseAxisProps, CategoricalChartOptions, ChartCoordinate, ChartOffset, DataKey, LayoutType, Margin, StackOffsetType, TickItem, TooltipEventType } from '../util/types';
+import { AxisType, CategoricalChartOptions, ChartCoordinate, DataKey, LayoutType, Margin, StackOffsetType, TickItem, TooltipEventType } from '../util/types';
 import { AccessibilityManager } from './AccessibilityManager';
+import { AxisMap, CategoricalChartState } from './types';
 export interface MousePointer {
@@ -13,2 +14,3 @@ pageX: number;
 };
+declare function renderAsIs(element: React.ReactElement): React.ReactElement;
 export declare const getAxisMapByAxes: (props: CategoricalChartProps, { axes, graphicalItems, axisType, axisIdKey, stackGroups, dataStartIndex, dataEndIndex, }: {
@@ -24,43 +26,2 @@ axes: ReadonlyArray<ReactElement>;
 export declare const createDefaultState: (props: CategoricalChartProps) => CategoricalChartState;
-declare type AxisMap = {
-    [axisId: string]: BaseAxisProps;
-};
-export interface CategoricalChartState {
-    chartX?: number;
-    chartY?: number;
-    dataStartIndex?: number;
-    dataEndIndex?: number;
-    activeTooltipIndex?: number;
-    isTooltipActive?: boolean;
-    updateId?: number;
-    xAxisMap?: AxisMap;
-    yAxisMap?: AxisMap;
-    zAxisMap?: AxisMap;
-    orderedTooltipTicks?: any;
-    tooltipAxis?: BaseAxisProps;
-    tooltipTicks?: TickItem[];
-    graphicalItems?: ReadonlyArray<ReactElement>;
-    activeCoordinate?: ChartCoordinate;
-    offset?: ChartOffset;
-    angleAxisMap?: any;
-    radiusAxisMap?: any;
-    formattedGraphicalItems?: any;
-    activePayload?: any[];
-    tooltipAxisBandSize?: number;
-    activeItem?: any;
-    activeLabel?: string;
-    activeIndex?: number;
-    xValue?: number;
-    yValue?: number;
-    legendBBox?: DOMRect | null;
-    prevDataKey?: DataKey<any>;
-    prevData?: any[];
-    prevWidth?: number;
-    prevHeight?: number;
-    prevLayout?: LayoutType;
-    prevStackOffset?: StackOffsetType;
-    prevMargin?: Margin;
-    prevChildren?: any;
-    stackGroups?: AxisStackGroups;
-}
 export declare type CategoricalChartFunc = (nextState: CategoricalChartState, event: any) => void;
@@ -115,4 +76,5 @@ export interface CategoricalChartProps {
         componentDidMount(): void;
+        displayDefaultTooltip(): void;
         getSnapshotBeforeUpdate(prevProps: Readonly<CategoricalChartProps>, prevState: Readonly<CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        componentDidUpdate(prevProps: CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -158,5 +120,2 @@ getTooltipEventType(): TooltipEventType;
         applySyncEvent: (data: CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => TickItem[];
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -190,5 +149,2 @@ renderCursor: (element: ReactElement) => React.JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-        renderAxis(axisOptions: BaseAxisProps, element: any, displayName: string, index: number): React.ReactElement;
         renderGrid: (element: React.ReactElement) => React.ReactElement;
@@ -228,3 +184,3 @@ renderPolarGrid: (element: React.ReactElement) => React.ReactElement;
             ReferenceLine: {
-                handler: (element: React.ReactElement, displayName: string, index: number) => React.ReactElement;
+                handler: typeof renderAsIs;
             };
@@ -235,6 +191,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+                handler: typeof renderAsIs;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+                handler: typeof renderAsIs;
             };
@@ -241,0 +197,0 @@ Brush: {

types/chart/LineChart.d.ts

@@ -9,4 +9,5 @@ export declare const LineChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/PieChart.d.ts

@@ -9,4 +9,5 @@ export declare const PieChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/RadarChart.d.ts

@@ -9,4 +9,5 @@ export declare const RadarChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/RadialBarChart.d.ts

@@ -9,4 +9,5 @@ export declare const RadialBarChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/chart/ScatterChart.d.ts

@@ -9,4 +9,5 @@ export declare const ScatterChart: {
         componentDidMount(): void;
-        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>): null;
-        componentDidUpdate(): void;
+        displayDefaultTooltip(): void;
+        getSnapshotBeforeUpdate(prevProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, prevState: Readonly<import("./types").CategoricalChartState>): null;
+        componentDidUpdate(prevProps: import("./generateCategoricalChart").CategoricalChartProps): void;
         componentWillUnmount(): void;
@@ -32,3 +33,3 @@ getTooltipEventType(): import("../util/types").TooltipEventType;
         handleLegendBBoxUpdate: (box: DOMRect) => void;
-        handleReceiveSyncEvent: (cId: string | number, data: import("./generateCategoricalChart").CategoricalChartState, emitter: Symbol) => void;
+        handleReceiveSyncEvent: (cId: string | number, data: import("./types").CategoricalChartState, emitter: Symbol) => void;
         handleBrushChange: ({ startIndex, endIndex }: {
@@ -51,7 +52,4 @@ startIndex: number;
         handleTouchEnd: (e: import("react").TouchEvent<Element>) => void;
-        triggerSyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        applySyncEvent: (data: import("./generateCategoricalChart").CategoricalChartState) => void;
-        verticalCoordinatesGenerator: ({ xAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        horizontalCoordinatesGenerator: ({ yAxis, width, height, offset }: import("../util/types").ChartCoordinate, syncWithTicks: Boolean) => number[];
-        axesTicksGenerator: (axis?: any) => import("../util/types").TickItem[];
+        triggerSyncEvent: (data: import("./types").CategoricalChartState) => void;
+        applySyncEvent: (data: import("./types").CategoricalChartState) => void;
         filterFormatItem(item: any, displayName: any, childIndex: any): any;
@@ -85,5 +83,2 @@ renderCursor: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
         }, HTMLElement>;
-        renderXAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderYAxis: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        renderAxis(axisOptions: import("../util/types").BaseAxisProps, element: any, displayName: string, index: number): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         renderGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -123,3 +118,3 @@ renderPolarGrid: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             ReferenceLine: {
-                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -130,6 +125,6 @@ ReferenceDot: {
             XAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             YAxis: {
-                handler: (element: any, displayName: string, index: number) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+                handler: (element: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
@@ -234,3 +229,3 @@ Brush: {
         context: any;
-        setState<K extends keyof import("./generateCategoricalChart").CategoricalChartState>(state: import("./generateCategoricalChart").CategoricalChartState | ((prevState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./generateCategoricalChart").CategoricalChartState | Pick<import("./generateCategoricalChart").CategoricalChartState, K>) | Pick<import("./generateCategoricalChart").CategoricalChartState, K>, callback?: () => void): void;
+        setState<K extends keyof import("./types").CategoricalChartState>(state: import("./types").CategoricalChartState | ((prevState: Readonly<import("./types").CategoricalChartState>, props: Readonly<import("./generateCategoricalChart").CategoricalChartProps>) => import("./types").CategoricalChartState | Pick<import("./types").CategoricalChartState, K>) | Pick<import("./types").CategoricalChartState, K>, callback?: () => void): void;
         forceUpdate(callback?: () => void): void;
@@ -240,7 +235,7 @@ readonly props: Readonly<import("./generateCategoricalChart").CategoricalChartProps> & Readonly<{
         }>;
-        state: Readonly<import("./generateCategoricalChart").CategoricalChartState>;
+        state: Readonly<import("./types").CategoricalChartState>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -251,10 +246,10 @@ componentWillMount?(): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./generateCategoricalChart").CategoricalChartState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./generateCategoricalChart").CategoricalChartProps>, nextState: Readonly<import("./types").CategoricalChartState>, nextContext: any): void;
     };
     displayName: string;
     defaultProps: import("./generateCategoricalChart").CategoricalChartProps;
-    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./generateCategoricalChart").CategoricalChartState) => import("./generateCategoricalChart").CategoricalChartState;
+    getDerivedStateFromProps: (nextProps: import("./generateCategoricalChart").CategoricalChartProps, prevState: import("./types").CategoricalChartState) => import("./types").CategoricalChartState;
     renderActiveDot: (option: any, props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     contextType?: import("react").Context<any>;
 };

types/component/Cursor.d.ts

@@ -19,2 +19,18 @@ import React, { ReactElement } from 'react';
     className: string;
+    stroke: string;
+    fill: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    brushBottom?: number;
+    pointerEvents: string;
+} | {
+    payload: any[];
+    payloadIndex: number;
+    className: string;
     xAxis?: any;
@@ -46,18 +62,2 @@ yAxis?: any;
     className: string;
-    stroke: string;
-    fill: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-    brushBottom?: number;
-    pointerEvents: string;
-} | {
-    payload: any[];
-    payloadIndex: number;
-    className: string;
     cx: number;
@@ -64,0 +64,0 @@ cy: number;

types/component/DefaultTooltipContent.d.ts

@@ -19,2 +19,4 @@ import React, { CSSProperties, ReactNode } from 'react';
     strokeWidth?: number | string;
+    className?: string;
+    hide?: boolean;
 }
@@ -21,0 +23,0 @@ export interface Props<TValue extends ValueType, TName extends NameType> {

types/component/Tooltip.d.ts

@@ -8,2 +8,3 @@ import React, { PureComponent, CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';
     active?: boolean | undefined;
+    includeHidden?: boolean | undefined;
     allowEscapeViewBox?: AllowInDimension;
@@ -16,2 +17,3 @@ animationDuration?: AnimationDuration;
     filterNull?: boolean;
+    defaultIndex?: number;
     isAnimationActive?: boolean;
@@ -18,0 +20,0 @@ offset?: number;

types/container/Layer.d.ts

@@ -7,3 +7,3 @@ import React, { ReactNode, SVGProps } from 'react';
 export declare type Props = SVGProps<SVGGElement> & LayerProps;
-export declare const Layer: React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGGElement> & LayerProps, "string" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPath" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filter" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "href" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "mask" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "path" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "key"> & React.RefAttributes<unknown>>;
+export declare const Layer: React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGGElement> & LayerProps, "string" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "style" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPath" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filter" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "mask" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "path" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<unknown>>;
 export {};

types/index.d.ts

@@ -90,2 +90,3 @@ export { Surface } from './container/Surface';
 export { ComposedChart } from './chart/ComposedChart';
+export { SunburstChart } from './chart/SunburstChart';
 export { Funnel } from './numberAxis/Funnel';
@@ -92,0 +93,0 @@ export type { FunnelProps } from './numberAxis/Funnel';

types/polar/Pie.d.ts

@@ -121,3 +121,3 @@ import React, { PureComponent, ReactElement, ReactNode, SVGProps } from 'react';
     static getDerivedStateFromProps(nextProps: Props, prevState: State): State;
-    static getTextAnchor(x: number, cx: number): "end" | "middle" | "start";
+    static getTextAnchor(x: number, cx: number): "middle" | "start" | "end";
     id: string;
@@ -124,0 +124,0 @@ isActiveIndex(i: number): boolean;

types/util/ChartUtils.d.ts

@@ -141,2 +141,3 @@ import { Series } from 'victory-vendor/d3-shape';
     chartType: any;
+    hide: any;
 };

types/util/Events.d.ts

 import EventEmitter from 'eventemitter3';
-declare type CategoricalChartState = import('../chart/generateCategoricalChart').CategoricalChartState;
+import { CategoricalChartState } from '../chart/types';
 declare const eventCenter: EventEmitter<EventTypes>;
@@ -4,0 +4,0 @@ export { eventCenter };

types/util/ReactUtils.d.ts

@@ -18,3 +18,3 @@ import React, { Component, FunctionComponent, ReactNode } from 'react';
 export declare const filterSvgElements: (children: React.ReactElement[]) => React.ReactElement[];
-export declare const filterProps: (props: Record<string, any> | Component | FunctionComponent | boolean | unknown, includeEvents?: boolean, svgElementType?: FilteredSvgElementType) => Record<string, any>;
+export declare const filterProps: (props: Record<string, any> | Component | FunctionComponent | boolean | unknown, includeEvents: boolean, svgElementType?: FilteredSvgElementType) => Record<string, any>;
 export declare const isChildrenEqual: (nextChildren: React.ReactElement[], prevChildren: React.ReactElement[]) => boolean;
@@ -21,0 +21,0 @@ export declare const isSingleChildEqual: (nextChild: React.ReactElement, prevChild: React.ReactElement) => boolean;

types/util/types.d.ts

 import { AnimationEvent, AriaAttributes, ClipboardEvent, Component, CompositionEvent, DragEvent, FocusEvent, FormEvent, FunctionComponent, KeyboardEvent, MouseEvent, PointerEvent, ReactElement, ReactNode, SVGProps, SyntheticEvent, TouchEvent, TransitionEvent, UIEvent, WheelEvent, JSX } from 'react';
 import { ScaleContinuousNumeric as D3ScaleContinuousNumeric } from 'victory-vendor/d3-scale';
+import type { Props as XAxisProps } from '../cartesian/XAxis';
+import type { Props as YAxisProps } from '../cartesian/YAxis';
 export declare type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive';
@@ -545,2 +547,8 @@ export declare type LayoutType = 'horizontal' | 'vertical' | 'centric' | 'radial';
 export declare type ActiveShape<PropsType = Record<string, any>, ElementType = SVGElement> = ReactElement<SVGProps<ElementType>> | ((props: PropsType) => ReactElement<SVGProps<ElementType>>) | ((props: unknown) => JSX.Element) | SVGProps<ElementType> | boolean;
+export declare type XAxisMap = {
+    [axisId: string]: XAxisProps;
+};
+export declare type YAxisMap = {
+    [axisId: string]: YAxisProps;
+};
 export {};

No alert changes

Improved metrics

Total package byte prevSize

4736835

increased by1.47%

Number of package files

291

increased by4.3%

Lines of code

42301

increased by2.13%

Number of versions

235

increased by0.43%

Published versions last two months

5

increased by25%

Published versions last week

1

increased byInfinity%

Worsened metrics

Number of low supply chain risk alerts

12

increased by500%

Published versions last year

24

decreased by-7.69%

No dependency changes