@luminati-io/uikit 1.7.33 → 1.7.34-beta.1

package/dist/uikit.umd.js

@@ -14145,6 +14145,65 @@ function stack(_ref6) {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/shape/lib/util/accessors.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@visx/shape/lib/util/accessors.js ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports.getFirstItem = getFirstItem;
+exports.getSecondItem = getSecondItem;
+exports.getSource = getSource;
+exports.getTarget = getTarget;
+exports.getX = getX;
+exports.getY = getY;
+function getX(l) {
+  return typeof (l == null ? void 0 : l.x) === 'number' ? l == null ? void 0 : l.x : 0;
+}
+function getY(l) {
+  return typeof (l == null ? void 0 : l.y) === 'number' ? l == null ? void 0 : l.y : 0;
+}
+function getSource(l) {
+  return l == null ? void 0 : l.source;
+}
+function getTarget(l) {
+  return l == null ? void 0 : l.target;
+}
+function getFirstItem(d) {
+  return d == null ? void 0 : d[0];
+}
+function getSecondItem(d) {
+  return d == null ? void 0 : d[1];
+}
+
+/***/ }),
+
+/***/ "./node_modules/@visx/shape/lib/util/getBandwidth.js":
+/*!***********************************************************!*\
+  !*** ./node_modules/@visx/shape/lib/util/getBandwidth.js ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports["default"] = getBandwidth;
+function getBandwidth(scale) {
+  if ('bandwidth' in scale) {
+    return scale.bandwidth();
+  }
+  var range = scale.range();
+  var domain = scale.domain();
+  return Math.abs(range[range.length - 1] - range[0]) / domain.length;
+}
+
+/***/ }),
+
 /***/ "./node_modules/@visx/shape/lib/util/setNumberOrNumberAccessor.js":
 /*!************************************************************************!*\
   !*** ./node_modules/@visx/shape/lib/util/setNumberOrNumberAccessor.js ***!
@@ -15770,6 +15829,33 @@ function AnimatedBarSeries(_ref) {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarStack.js":
+/*!******************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/components/series/AnimatedBarStack.js ***!
+  \******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ AnimatedBarStack)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _private_BaseBarStack__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./private/BaseBarStack */ "./node_modules/@visx/xychart/esm/components/series/private/BaseBarStack.js");
+/* harmony import */ var _private_AnimatedBars__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./private/AnimatedBars */ "./node_modules/@visx/xychart/esm/components/series/private/AnimatedBars.js");
+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 AnimatedBarStack(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_private_BaseBarStack__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({}, props, {
+    BarsComponent: _private_AnimatedBars__WEBPACK_IMPORTED_MODULE_2__["default"]
+  }));
+}
+
+/***/ }),
+
 /***/ "./node_modules/@visx/xychart/esm/components/series/AnimatedLineSeries.js":
 /*!********************************************************************************!*\
   !*** ./node_modules/@visx/xychart/esm/components/series/AnimatedLineSeries.js ***!
@@ -15859,6 +15945,33 @@ function BarSeries(_ref) {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/xychart/esm/components/series/BarStack.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/components/series/BarStack.js ***!
+  \**********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ BarStack)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _private_BaseBarStack__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./private/BaseBarStack */ "./node_modules/@visx/xychart/esm/components/series/private/BaseBarStack.js");
+/* harmony import */ var _private_Bars__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./private/Bars */ "./node_modules/@visx/xychart/esm/components/series/private/Bars.js");
+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 BarStack(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_private_BaseBarStack__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({}, props, {
+    BarsComponent: _private_Bars__WEBPACK_IMPORTED_MODULE_2__["default"]
+  }));
+}
+
+/***/ }),
+
 /***/ "./node_modules/@visx/xychart/esm/components/series/LineSeries.js":
 /*!************************************************************************!*\
   !*** ./node_modules/@visx/xychart/esm/components/series/LineSeries.js ***!
@@ -16557,6 +16670,209 @@ BaseBarSeries.propTypes = {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/xychart/esm/components/series/private/BaseBarStack.js":
+/*!**********************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/components/series/private/BaseBarStack.js ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @visx/shape/lib/util/accessors */ "./node_modules/@visx/shape/lib/util/accessors.js");
+/* harmony import */ var _visx_shape_lib_util_getBandwidth__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @visx/shape/lib/util/getBandwidth */ "./node_modules/@visx/shape/lib/util/getBandwidth.js");
+/* harmony import */ var _context_DataContext__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../context/DataContext */ "./node_modules/@visx/xychart/esm/context/DataContext.js");
+/* harmony import */ var _typeguards_isValidNumber__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../typeguards/isValidNumber */ "./node_modules/@visx/xychart/esm/typeguards/isValidNumber.js");
+/* harmony import */ var _utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../utils/combineBarStackData */ "./node_modules/@visx/xychart/esm/utils/combineBarStackData.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../constants */ "./node_modules/@visx/xychart/esm/constants.js");
+/* harmony import */ var _hooks_useSeriesEvents__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/useSeriesEvents */ "./node_modules/@visx/xychart/esm/hooks/useSeriesEvents.js");
+/* harmony import */ var _utils_findNearestStackDatum__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/findNearestStackDatum */ "./node_modules/@visx/xychart/esm/utils/findNearestStackDatum.js");
+/* harmony import */ var _hooks_useStackedData__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../hooks/useStackedData */ "./node_modules/@visx/xychart/esm/hooks/useStackedData.js");
+
+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 BaseBarStack(_ref) {
+  var children = _ref.children,
+    order = _ref.order,
+    offset = _ref.offset,
+    BarsComponent = _ref.BarsComponent,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onPointerMove = _ref.onPointerMove,
+    onPointerOut = _ref.onPointerOut,
+    onPointerUp = _ref.onPointerUp,
+    onPointerDown = _ref.onPointerDown,
+    _ref$enableEvents = _ref.enableEvents,
+    enableEvents = _ref$enableEvents === void 0 ? true : _ref$enableEvents;
+  var _ref2 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(_context_DataContext__WEBPACK_IMPORTED_MODULE_2__["default"]),
+    colorScale = _ref2.colorScale,
+    dataRegistry = _ref2.dataRegistry,
+    horizontal = _ref2.horizontal,
+    xScale = _ref2.xScale,
+    yScale = _ref2.yScale;
+  var _useStackedData = (0,_hooks_useStackedData__WEBPACK_IMPORTED_MODULE_3__["default"])({
+      children: children,
+      order: order,
+      offset: offset
+    }),
+    seriesChildren = _useStackedData.seriesChildren,
+    dataKeys = _useStackedData.dataKeys,
+    stackedData = _useStackedData.stackedData;
+
+  // custom logic to find the nearest AreaStackDatum (context) and return the original Datum (props)
+  var findNearestDatum = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (params) {
+    var _seriesChildren$find, _seriesChildren$find$;
+    var childData = (_seriesChildren$find = seriesChildren.find(function (child) {
+      return child.props.dataKey === params.dataKey;
+    })) == null ? void 0 : (_seriesChildren$find$ = _seriesChildren$find.props) == null ? void 0 : _seriesChildren$find$.data;
+    return childData ? (0,_utils_findNearestStackDatum__WEBPACK_IMPORTED_MODULE_4__["default"])(params, childData, horizontal) : null;
+  }, [seriesChildren, horizontal]);
+  var ownEventSourceKey = _constants__WEBPACK_IMPORTED_MODULE_5__.BARSTACK_EVENT_SOURCE + "-" + dataKeys.join('-');
+  var eventEmitters = (0,_hooks_useSeriesEvents__WEBPACK_IMPORTED_MODULE_6__["default"])({
+    dataKey: dataKeys,
+    enableEvents: enableEvents,
+    // @ts-expect-error Datum input + return type are expected to be the same type but they differ for BarStack (registry data is StackedDatum, return type is user Datum)
+    findNearestDatum: findNearestDatum,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPointerMove: onPointerMove,
+    onPointerOut: onPointerOut,
+    onPointerUp: onPointerUp,
+    onPointerDown: onPointerDown,
+    source: ownEventSourceKey,
+    allowedSources: [_constants__WEBPACK_IMPORTED_MODULE_5__.XYCHART_EVENT_SOURCE, ownEventSourceKey]
+  });
+  var registryEntries = dataKeys.map(function (key) {
+    return dataRegistry.get(key);
+  });
+
+  // if scales and data are not available in the registry, bail
+  if (registryEntries.some(function (entry) {
+    return entry == null;
+  }) || !xScale || !yScale || !colorScale) {
+    return null;
+  }
+  var barThickness = (0,_visx_shape_lib_util_getBandwidth__WEBPACK_IMPORTED_MODULE_7__["default"])(horizontal ? yScale : xScale);
+  var halfBarThickness = barThickness / 2;
+  var getWidth;
+  var getHeight;
+  var getX;
+  var getY;
+  if (horizontal) {
+    getWidth = function getWidth(bar) {
+      var _xScale, _xScale2;
+      return ((_xScale = xScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getSecondItem)(bar))) != null ? _xScale : NaN) - ((_xScale2 = xScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getFirstItem)(bar))) != null ? _xScale2 : NaN);
+    };
+    getHeight = function getHeight() {
+      return barThickness;
+    };
+    getX = function getX(bar) {
+      return xScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getFirstItem)(bar));
+    };
+    getY = function getY(bar) {
+      var _yScale;
+      return 'bandwidth' in yScale ? yScale((0,_utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_9__.getStackValue)(bar.data)) : Math.max(((_yScale = yScale((0,_utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_9__.getStackValue)(bar.data))) != null ? _yScale : NaN) - halfBarThickness);
+    };
+  } else {
+    getWidth = function getWidth() {
+      return barThickness;
+    };
+    getHeight = function getHeight(bar) {
+      var _yScale2, _yScale3;
+      return ((_yScale2 = yScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getFirstItem)(bar))) != null ? _yScale2 : NaN) - ((_yScale3 = yScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getSecondItem)(bar))) != null ? _yScale3 : NaN);
+    };
+    getX = function getX(bar) {
+      var _xScale3;
+      return 'bandwidth' in xScale ? xScale((0,_utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_9__.getStackValue)(bar.data)) : Math.max(((_xScale3 = xScale((0,_utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_9__.getStackValue)(bar.data))) != null ? _xScale3 : NaN) - halfBarThickness);
+    };
+    getY = function getY(bar) {
+      return yScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_8__.getSecondItem)(bar));
+    };
+  }
+  var barSeries = stackedData.map(function (barStack, stackIndex) {
+    var entry = dataRegistry.get(barStack.key);
+    if (!entry) return null;
+
+    // get props from child BarSeries, if available
+    var childBarSeries = seriesChildren.find(function (child) {
+      return child.props.dataKey === barStack.key;
+    });
+    var _ref3 = (childBarSeries == null ? void 0 : childBarSeries.props) || {},
+      colorAccessor = _ref3.colorAccessor,
+      radius = _ref3.radius,
+      radiusAll = _ref3.radiusAll,
+      radiusBottom = _ref3.radiusBottom,
+      radiusLeft = _ref3.radiusLeft,
+      radiusRight = _ref3.radiusRight,
+      radiusTop = _ref3.radiusTop;
+    return {
+      key: barStack.key,
+      radius: radius,
+      radiusAll: radiusAll,
+      radiusBottom: radiusBottom,
+      radiusLeft: radiusLeft,
+      radiusRight: radiusRight,
+      radiusTop: radiusTop,
+      bars: barStack.map(function (bar, index) {
+        var _childBarSeries$props;
+        var barX = getX(bar);
+        if (!(0,_typeguards_isValidNumber__WEBPACK_IMPORTED_MODULE_10__["default"])(barX)) return null;
+        var barY = getY(bar);
+        if (!(0,_typeguards_isValidNumber__WEBPACK_IMPORTED_MODULE_10__["default"])(barY)) return null;
+        var barWidth = getWidth(bar);
+        if (!(0,_typeguards_isValidNumber__WEBPACK_IMPORTED_MODULE_10__["default"])(barWidth)) return null;
+        var barHeight = getHeight(bar);
+        if (!(0,_typeguards_isValidNumber__WEBPACK_IMPORTED_MODULE_10__["default"])(barHeight)) return null;
+        var barSeriesDatum = colorAccessor ? childBarSeries == null ? void 0 : (_childBarSeries$props = childBarSeries.props) == null ? void 0 : _childBarSeries$props.data[index] : null;
+        return {
+          key: stackIndex + "-" + barStack.key + "-" + index,
+          x: barX,
+          y: barY,
+          width: barWidth,
+          height: barHeight,
+          fill: barSeriesDatum && colorAccessor ? colorAccessor(barSeriesDatum, index) : colorScale(barStack.key)
+        };
+      }).filter(function (bar) {
+        return bar;
+      })
+    };
+  }).filter(function (series) {
+    return series;
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("g", {
+    className: "visx-bar-stack"
+  }, barSeries.map(function (series) {
+    return series && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BarsComponent, _extends({
+      horizontal: horizontal,
+      xScale: xScale,
+      yScale: yScale
+    }, series, eventEmitters, {
+      key: series.key
+    }));
+  }));
+}
+BaseBarStack.propTypes = {
+  children: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().element), prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().element))]).isRequired
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BaseBarStack);
+
+/***/ }),
+
 /***/ "./node_modules/@visx/xychart/esm/components/series/private/BaseGlyphSeries.js":
 /*!*************************************************************************************!*\
   !*** ./node_modules/@visx/xychart/esm/components/series/private/BaseGlyphSeries.js ***!
@@ -17580,28 +17896,27 @@ function useSeriesEvents(_ref) {
 
 /***/ }),
 
-/***/ "./node_modules/@visx/xychart/esm/providers/DataProvider.js":
-/*!******************************************************************!*\
-  !*** ./node_modules/@visx/xychart/esm/providers/DataProvider.js ***!
-  \******************************************************************/
+/***/ "./node_modules/@visx/xychart/esm/hooks/useStackedData.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/hooks/useStackedData.js ***!
+  \****************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ DataProvider)
+/* harmony export */   "default": () => (/* binding */ useStackedData)
 /* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _visx_scale_lib_scales_ordinal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/scale/lib/scales/ordinal */ "./node_modules/@visx/scale/lib/scales/ordinal.js");
-/* harmony import */ var _context_ThemeContext__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../context/ThemeContext */ "./node_modules/@visx/xychart/esm/context/ThemeContext.js");
-/* harmony import */ var _context_DataContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../context/DataContext */ "./node_modules/@visx/xychart/esm/context/DataContext.js");
-/* harmony import */ var _hooks_useDataRegistry__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useDataRegistry */ "./node_modules/@visx/xychart/esm/hooks/useDataRegistry.js");
-/* harmony import */ var _hooks_useDimensions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useDimensions */ "./node_modules/@visx/xychart/esm/hooks/useDimensions.js");
-/* harmony import */ var _hooks_useScales__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useScales */ "./node_modules/@visx/xychart/esm/hooks/useScales.js");
-/* harmony import */ var _utils_isDiscreteScale__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/isDiscreteScale */ "./node_modules/@visx/xychart/esm/utils/isDiscreteScale.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var d3_shape__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! d3-shape */ "./node_modules/@visx/xychart/node_modules/d3-shape/src/stack.js");
+/* harmony import */ var _visx_shape_lib_util_stackOffset__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/shape/lib/util/stackOffset */ "./node_modules/@visx/shape/lib/util/stackOffset.js");
+/* harmony import */ var _visx_shape_lib_util_stackOrder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @visx/shape/lib/util/stackOrder */ "./node_modules/@visx/shape/lib/util/stackOrder.js");
+/* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! d3-array */ "./node_modules/@visx/xychart/node_modules/d3-array/src/extent.js");
+/* harmony import */ var _context_DataContext__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../context/DataContext */ "./node_modules/@visx/xychart/esm/context/DataContext.js");
+/* harmony import */ var _utils_getBarStackRegistryData__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils/getBarStackRegistryData */ "./node_modules/@visx/xychart/esm/utils/getBarStackRegistryData.js");
+/* harmony import */ var _utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/combineBarStackData */ "./node_modules/@visx/xychart/esm/utils/combineBarStackData.js");
+/* harmony import */ var _utils_getChildrenAndGrandchildrenWithProps__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/getChildrenAndGrandchildrenWithProps */ "./node_modules/@visx/xychart/esm/utils/getChildrenAndGrandchildrenWithProps.js");
 
 
 
@@ -17611,16 +17926,122 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+function useStackedData(_ref) {
+  var children = _ref.children,
+    order = _ref.order,
+    offset = _ref.offset;
+  var _ref2 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_DataContext__WEBPACK_IMPORTED_MODULE_1__["default"]),
+    horizontal = _ref2.horizontal,
+    registerData = _ref2.registerData,
+    unregisterData = _ref2.unregisterData;
 
-/** Props that can be passed to initialize/update the provider config. */
+  // find series children
+  // @TODO: memoization doesn't work well if at all for this
+  var seriesChildren = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,_utils_getChildrenAndGrandchildrenWithProps__WEBPACK_IMPORTED_MODULE_2__["default"])(children);
+  }, [children]);
 
-function DataProvider(_ref) {
-  var initialDimensions = _ref.initialDimensions,
-    propsTheme = _ref.theme,
-    xScaleConfig = _ref.xScale,
-    yScaleConfig = _ref.yScale,
-    children = _ref.children,
-    _ref$horizontal = _ref.horizontal,
+  // extract data keys from child series
+  var dataKeys = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return seriesChildren.filter(function (child) {
+      return child.props.dataKey;
+    }).map(function (child) {
+      return child.props.dataKey;
+    });
+  }, [seriesChildren]);
+
+  // group all child data by stack value { [x | y]: { [dataKey]: value } }
+  // this format is needed by d3Stack
+  var combinedData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,_utils_combineBarStackData__WEBPACK_IMPORTED_MODULE_3__["default"])(seriesChildren, horizontal);
+  }, [horizontal, seriesChildren]);
+
+  // stack data
+  var stackedData = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    // automatically set offset to diverging if it's undefined and negative values are present
+    var hasSomeNegativeValues = offset ? null : combinedData.some(function (d) {
+      return d.negativeSum < 0;
+    });
+    var stack = (0,d3_shape__WEBPACK_IMPORTED_MODULE_4__["default"])();
+    stack.keys(dataKeys);
+    if (order) stack.order((0,_visx_shape_lib_util_stackOrder__WEBPACK_IMPORTED_MODULE_5__["default"])(order));
+    if (offset || hasSomeNegativeValues) stack.offset((0,_visx_shape_lib_util_stackOffset__WEBPACK_IMPORTED_MODULE_6__["default"])(offset || 'diverging'));
+    return stack(combinedData);
+  }, [combinedData, dataKeys, order, offset]);
+
+  // update the domain to account for the (directional) stacked value
+  var comprehensiveDomain = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,d3_array__WEBPACK_IMPORTED_MODULE_7__["default"])(stackedData.reduce(function (allDatum, stack) {
+      stack.forEach(function (_ref3) {
+        var min = _ref3[0],
+          max = _ref3[1];
+        allDatum.push(min);
+        allDatum.push(max);
+      });
+      return allDatum;
+    }, []));
+  }, [stackedData]);
+
+  // register all child data using the stack-transformed values
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var dataToRegister = (0,_utils_getBarStackRegistryData__WEBPACK_IMPORTED_MODULE_8__["default"])(stackedData, comprehensiveDomain, horizontal);
+    registerData(dataToRegister);
+
+    // unregister data on unmount
+    return function () {
+      return unregisterData(dataKeys);
+    };
+  }, [dataKeys, comprehensiveDomain, horizontal, stackedData, registerData, unregisterData, seriesChildren]);
+  return {
+    seriesChildren: seriesChildren,
+    dataKeys: dataKeys,
+    stackedData: stackedData
+  };
+}
+
+/***/ }),
+
+/***/ "./node_modules/@visx/xychart/esm/providers/DataProvider.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/providers/DataProvider.js ***!
+  \******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ DataProvider)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _visx_scale_lib_scales_ordinal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/scale/lib/scales/ordinal */ "./node_modules/@visx/scale/lib/scales/ordinal.js");
+/* harmony import */ var _context_ThemeContext__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../context/ThemeContext */ "./node_modules/@visx/xychart/esm/context/ThemeContext.js");
+/* harmony import */ var _context_DataContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../context/DataContext */ "./node_modules/@visx/xychart/esm/context/DataContext.js");
+/* harmony import */ var _hooks_useDataRegistry__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useDataRegistry */ "./node_modules/@visx/xychart/esm/hooks/useDataRegistry.js");
+/* harmony import */ var _hooks_useDimensions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useDimensions */ "./node_modules/@visx/xychart/esm/hooks/useDimensions.js");
+/* harmony import */ var _hooks_useScales__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useScales */ "./node_modules/@visx/xychart/esm/hooks/useScales.js");
+/* harmony import */ var _utils_isDiscreteScale__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/isDiscreteScale */ "./node_modules/@visx/xychart/esm/utils/isDiscreteScale.js");
+
+
+
+
+
+
+
+
+
+
+/** Props that can be passed to initialize/update the provider config. */
+
+function DataProvider(_ref) {
+  var initialDimensions = _ref.initialDimensions,
+    propsTheme = _ref.theme,
+    xScaleConfig = _ref.xScale,
+    yScaleConfig = _ref.yScale,
+    children = _ref.children,
+    _ref$horizontal = _ref.horizontal,
     initialHorizontal = _ref$horizontal === void 0 ? 'auto' : _ref$horizontal,
     resizeObserverPolyfill = _ref.resizeObserverPolyfill;
   // `DataProvider` provides a theme so that `ThemeProvider` is not strictly needed.
@@ -18087,6 +18508,62 @@ var cleanColor = function cleanColor(color) {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/xychart/esm/utils/combineBarStackData.js":
+/*!*********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/utils/combineBarStackData.js ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ combineBarStackData),
+/* harmony export */   "getStackValue": () => (/* binding */ getStackValue)
+/* harmony export */ });
+/** Returns the value which forms a stack group. */
+var getStackValue = function getStackValue(d) {
+  return d.stack;
+};
+
+/**
+ * Merges `seriesChildren` `props.data` by their `stack` value which
+ * forms the stack grouping (`x` if vertical, `y` if horizontal)
+ * and returns `CombinedStackData[]`.
+ */
+function combineBarStackData(seriesChildren, horizontal) {
+  var dataByStackValue = {};
+  seriesChildren.forEach(function (child) {
+    var _child$props = child.props,
+      dataKey = _child$props.dataKey,
+      data = _child$props.data,
+      xAccessor = _child$props.xAccessor,
+      yAccessor = _child$props.yAccessor;
+
+    // this should exist but double check
+    if (!xAccessor || !yAccessor) return;
+    var _ref = horizontal ? [yAccessor, xAccessor] : [xAccessor, yAccessor],
+      stackFn = _ref[0],
+      valueFn = _ref[1];
+    data.forEach(function (d) {
+      var stack = stackFn(d);
+      var numericValue = valueFn(d);
+      var stackKey = String(stack);
+      if (!dataByStackValue[stackKey]) {
+        dataByStackValue[stackKey] = {
+          stack: stack,
+          positiveSum: 0,
+          negativeSum: 0
+        };
+      }
+      dataByStackValue[stackKey][dataKey] = numericValue;
+      dataByStackValue[stackKey][numericValue >= 0 ? 'positiveSum' : 'negativeSum'] += numericValue;
+    });
+  });
+  return Object.values(dataByStackValue);
+}
+
+/***/ }),
+
 /***/ "./node_modules/@visx/xychart/esm/utils/findNearestDatumSingleDimension.js":
 /*!*********************************************************************************!*\
   !*** ./node_modules/@visx/xychart/esm/utils/findNearestDatumSingleDimension.js ***!
@@ -18290,6 +18767,108 @@ function findNearestGroupDatum(nearestDatumArgs, groupScale, horizontal) {
 
 /***/ }),
 
+/***/ "./node_modules/@visx/xychart/esm/utils/findNearestStackDatum.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/utils/findNearestStackDatum.js ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ findNearestStackDatum)
+/* harmony export */ });
+/* harmony import */ var _visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @visx/shape/lib/util/accessors */ "./node_modules/@visx/shape/lib/util/accessors.js");
+/* harmony import */ var _findNearestDatumY__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./findNearestDatumY */ "./node_modules/@visx/xychart/esm/utils/findNearestDatumY.js");
+/* harmony import */ var _findNearestDatumX__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./findNearestDatumX */ "./node_modules/@visx/xychart/esm/utils/findNearestDatumX.js");
+
+
+
+/**
+ * This is a wrapper around findNearestDatumX/Y for BarStack, accounting for a
+ * Bar's d0 and d1, not just d1 (which findNearestDatum uses). Additionally,
+ * returns the BarSeries original `Datum`, not the `BarStackDatum` so
+ * Tooltip typing is correct.
+ */
+function findNearestStackDatum(nearestDatumArgs, seriesData, horizontal) {
+  var _xScale, _xScale2, _yScale, _yScale2;
+  var xScale = nearestDatumArgs.xScale,
+    yScale = nearestDatumArgs.yScale,
+    point = nearestDatumArgs.point;
+  var datum = (horizontal ? _findNearestDatumY__WEBPACK_IMPORTED_MODULE_0__["default"] : _findNearestDatumX__WEBPACK_IMPORTED_MODULE_1__["default"])(nearestDatumArgs);
+  var seriesDatum = (datum == null ? void 0 : datum.index) == null ? null : seriesData[datum.index];
+  return datum && seriesDatum && point ? {
+    index: datum.index,
+    datum: seriesDatum,
+    distanceX: horizontal // if mouse is ON the stack series, set 0 distance
+    ? point.x >= ((_xScale = xScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_2__.getFirstItem)(datum.datum))) != null ? _xScale : Infinity) && point.x <= ((_xScale2 = xScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_2__.getSecondItem)(datum.datum))) != null ? _xScale2 : -Infinity) ? 0 : datum.distanceX : datum.distanceX,
+    distanceY: horizontal ? datum.distanceY // if mouse is ON the stack series, set 0 distance
+    : point.y <= ((_yScale = yScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_2__.getFirstItem)(datum.datum))) != null ? _yScale : -Infinity) && point.y >= ((_yScale2 = yScale((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_2__.getSecondItem)(datum.datum))) != null ? _yScale2 : Infinity) ? 0 : datum.distanceY
+  } : null;
+}
+
+/***/ }),
+
+/***/ "./node_modules/@visx/xychart/esm/utils/getBarStackRegistryData.js":
+/*!*************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/esm/utils/getBarStackRegistryData.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ getBarStackRegistryData)
+/* harmony export */ });
+/* harmony import */ var _visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @visx/shape/lib/util/accessors */ "./node_modules/@visx/shape/lib/util/accessors.js");
+/* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! d3-array */ "./node_modules/@visx/xychart/node_modules/d3-array/src/extent.js");
+
+
+var getStack = function getStack(bar) {
+  var _bar$data;
+  return bar == null ? void 0 : (_bar$data = bar.data) == null ? void 0 : _bar$data.stack;
+};
+
+// returns average of top + bottom of bar (the middle) as this enables more accurately
+// finding the nearest datum to a FocusEvent (which is based on the middle of the rect bounding box)
+var getNumericValue = function getNumericValue(bar) {
+  return ((0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_0__.getFirstItem)(bar) + (0,_visx_shape_lib_util_accessors__WEBPACK_IMPORTED_MODULE_0__.getSecondItem)(bar)) / 2;
+};
+
+/** Constructs the `DataRegistryEntry`s for a BarStack, using the stacked data. */
+function getBarStackRegistryData(stackedData, comprehensiveDomain, horizontal) {
+  var _ref = horizontal ? [getNumericValue, getStack] : [getStack, getNumericValue],
+    xAccessor = _ref[0],
+    yAccessor = _ref[1];
+  return stackedData.map(function (data, index) {
+    var entry = {
+      key: data.key,
+      data: data,
+      xAccessor: xAccessor,
+      yAccessor: yAccessor
+    };
+
+    // update the numeric domain to account for full data stack
+    // only need to do this for one key
+    if (comprehensiveDomain.length > 0 && index === 0) {
+      if (horizontal) {
+        entry.xScale = function (scale) {
+          return scale.domain((0,d3_array__WEBPACK_IMPORTED_MODULE_1__["default"])(scale.domain().concat(comprehensiveDomain)));
+        };
+      } else {
+        entry.yScale = function (scale) {
+          return scale.domain((0,d3_array__WEBPACK_IMPORTED_MODULE_1__["default"])(scale.domain().concat(comprehensiveDomain)));
+        };
+      }
+    }
+    return entry;
+  }).filter(function (entry) {
+    return entry;
+  });
+}
+
+/***/ }),
+
 /***/ "./node_modules/@visx/xychart/esm/utils/getChildrenAndGrandchildrenWithProps.js":
 /*!**************************************************************************************!*\
   !*** ./node_modules/@visx/xychart/esm/utils/getChildrenAndGrandchildrenWithProps.js ***!
@@ -18657,10 +19236,33 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./node_modules/@visx/xychart/node_modules/mitt/dist/mitt.es.js":
-/*!**********************************************************************!*\
-  !*** ./node_modules/@visx/xychart/node_modules/mitt/dist/mitt.es.js ***!
-  \**********************************************************************/
+/***/ "./node_modules/@visx/xychart/node_modules/d3-shape/src/array.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/d3-shape/src/array.js ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   "slice": () => (/* binding */ slice)
+/* harmony export */ });
+var slice = Array.prototype.slice;
+
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(x) {
+  return typeof x === "object" && "length" in x
+    ? x // Array, TypedArray, NodeList, array-like
+    : Array.from(x); // Map, Set, iterable, string, or anything else
+}
+
+
+/***/ }),
+
+/***/ "./node_modules/@visx/xychart/node_modules/d3-shape/src/constant.js":
+/*!**************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/d3-shape/src/constant.js ***!
+  \**************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -18668,90 +19270,231 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(n){return{all:n=n||new Map,on:function(t,e){var i=n.get(t);i&&i.push(e)||n.set(t,[e])},off:function(t,e){var i=n.get(t);i&&i.splice(i.indexOf(e)>>>0,1)},emit:function(t,e){(n.get(t)||[]).slice().map(function(n){n(e)}),(n.get("*")||[]).slice().map(function(n){n(t,e)})}}}
-//# sourceMappingURL=mitt.es.js.map
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(x) {
+  return function constant() {
+    return x;
+  };
+}
 
 
 /***/ }),
 
-/***/ "./src/badge.js":
-/*!**********************!*\
-  !*** ./src/badge.js ***!
-  \**********************/
+/***/ "./node_modules/@visx/xychart/node_modules/d3-shape/src/offset/none.js":
+/*!*****************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/d3-shape/src/offset/none.js ***!
+  \*****************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
-/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
-/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layout */ "./src/layout/index.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./theme */ "./src/theme.js");
-/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
-// LICENSE_CODE ZON
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(series, order) {
+  if (!((n = series.length) > 1)) return;
+  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
+    s0 = s1, s1 = series[order[i]];
+    for (j = 0; j < m; ++j) {
+      s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];
+    }
+  }
+}
 
 
-/*jslint react:true*/
+/***/ }),
 
+/***/ "./node_modules/@visx/xychart/node_modules/d3-shape/src/order/none.js":
+/*!****************************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/d3-shape/src/order/none.js ***!
+  \****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(series) {
+  var n = series.length, o = new Array(n);
+  while (--n >= 0) o[n] = n;
+  return o;
+}
 
 
+/***/ }),
 
+/***/ "./node_modules/@visx/xychart/node_modules/d3-shape/src/stack.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/d3-shape/src/stack.js ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _array_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./array.js */ "./node_modules/@visx/xychart/node_modules/d3-shape/src/array.js");
+/* harmony import */ var _constant_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constant.js */ "./node_modules/@visx/xychart/node_modules/d3-shape/src/constant.js");
+/* harmony import */ var _offset_none_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./offset/none.js */ "./node_modules/@visx/xychart/node_modules/d3-shape/src/offset/none.js");
+/* harmony import */ var _order_none_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./order/none.js */ "./node_modules/@visx/xychart/node_modules/d3-shape/src/order/none.js");
 
 
-var Badge = function Badge(props) {
-  var children = props.children,
-    shape = props.shape,
-    variant = props.variant,
-    icon = props.icon,
-    iconPlacement = props.iconPlacement;
-  var bgColor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return {
-      "default": _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_3,
-      negative: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.red_3,
-      positive: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.green_3
-    }[variant];
-  }, [variant]);
-  var color = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    return {
-      "default": 'gray_11_25',
-      negative: 'red_11',
-      positive: 'green_11'
-    }[variant];
-  }, [variant]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BadgeWrapper, {
-    $shape: shape,
-    $color: bgColor,
-    flex_direction: iconPlacement == 'right' ? 'row-reverse' : 'row'
-  }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__["default"], {
-    name: icon,
-    size: "xxs",
-    color: color
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Label, {
-    variant: "xs",
-    color: color
-  }, children));
-};
-Badge.defaultProps = {
-  shape: 'square',
-  variant: 'default'
-};
-Badge.propTypes = {
-  shape: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['rounded', 'square']),
-  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'negative', 'positive']),
-  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_7__.iconNames),
-  iconPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['left', 'right'])
-};
-var BadgeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex).attrs({
+
+
+
+function stackValue(d, key) {
+  return d[key];
+}
+
+function stackSeries(key) {
+  const series = [];
+  series.key = key;
+  return series;
+}
+
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
+  var keys = (0,_constant_js__WEBPACK_IMPORTED_MODULE_0__["default"])([]),
+      order = _order_none_js__WEBPACK_IMPORTED_MODULE_1__["default"],
+      offset = _offset_none_js__WEBPACK_IMPORTED_MODULE_2__["default"],
+      value = stackValue;
+
+  function stack(data) {
+    var sz = Array.from(keys.apply(this, arguments), stackSeries),
+        i, n = sz.length, j = -1,
+        oz;
+
+    for (const d of data) {
+      for (i = 0, ++j; i < n; ++i) {
+        (sz[i][j] = [0, +value(d, sz[i].key, j, data)]).data = d;
+      }
+    }
+
+    for (i = 0, oz = (0,_array_js__WEBPACK_IMPORTED_MODULE_3__["default"])(order(sz)); i < n; ++i) {
+      sz[oz[i]].index = i;
+    }
+
+    offset(sz, oz);
+    return sz;
+  }
+
+  stack.keys = function(_) {
+    return arguments.length ? (keys = typeof _ === "function" ? _ : (0,_constant_js__WEBPACK_IMPORTED_MODULE_0__["default"])(Array.from(_)), stack) : keys;
+  };
+
+  stack.value = function(_) {
+    return arguments.length ? (value = typeof _ === "function" ? _ : (0,_constant_js__WEBPACK_IMPORTED_MODULE_0__["default"])(+_), stack) : value;
+  };
+
+  stack.order = function(_) {
+    return arguments.length ? (order = _ == null ? _order_none_js__WEBPACK_IMPORTED_MODULE_1__["default"] : typeof _ === "function" ? _ : (0,_constant_js__WEBPACK_IMPORTED_MODULE_0__["default"])(Array.from(_)), stack) : order;
+  };
+
+  stack.offset = function(_) {
+    return arguments.length ? (offset = _ == null ? _offset_none_js__WEBPACK_IMPORTED_MODULE_2__["default"] : _, stack) : offset;
+  };
+
+  return stack;
+}
+
+
+/***/ }),
+
+/***/ "./node_modules/@visx/xychart/node_modules/mitt/dist/mitt.es.js":
+/*!**********************************************************************!*\
+  !*** ./node_modules/@visx/xychart/node_modules/mitt/dist/mitt.es.js ***!
+  \**********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(n){return{all:n=n||new Map,on:function(t,e){var i=n.get(t);i&&i.push(e)||n.set(t,[e])},off:function(t,e){var i=n.get(t);i&&i.splice(i.indexOf(e)>>>0,1)},emit:function(t,e){(n.get(t)||[]).slice().map(function(n){n(e)}),(n.get("*")||[]).slice().map(function(n){n(t,e)})}}}
+//# sourceMappingURL=mitt.es.js.map
+
+
+/***/ }),
+
+/***/ "./src/badge.js":
+/*!**********************!*\
+  !*** ./src/badge.js ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! prop-types */ "prop-types");
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./icon */ "./src/icon.js");
+/* harmony import */ var _layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layout */ "./src/layout/index.js");
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./theme */ "./src/theme.js");
+/* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./typography */ "./src/typography/index.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils */ "./src/utils.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+
+
+
+
+
+
+
+
+var Badge = function Badge(props) {
+  var children = props.children,
+    shape = props.shape,
+    variant = props.variant,
+    icon = props.icon,
+    iconPlacement = props.iconPlacement;
+  var bgColor = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return {
+      "default": _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_3,
+      negative: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.red_3,
+      positive: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.green_3
+    }[variant];
+  }, [variant]);
+  var color = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
+    return {
+      "default": 'gray_11_25',
+      negative: 'red_11',
+      positive: 'green_11'
+    }[variant];
+  }, [variant]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(BadgeWrapper, {
+    $shape: shape,
+    $color: bgColor,
+    flex_direction: iconPlacement == 'right' ? 'row-reverse' : 'row'
+  }, icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    name: icon,
+    size: "xxs",
+    color: color
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_6__.Label, {
+    variant: "xs",
+    color: color
+  }, children));
+};
+Badge.defaultProps = {
+  shape: 'square',
+  variant: 'default'
+};
+Badge.propTypes = {
+  shape: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['rounded', 'square']),
+  variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'negative', 'positive']),
+  icon: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(_utils__WEBPACK_IMPORTED_MODULE_7__.iconNames),
+  iconPlacement: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['left', 'right'])
+};
+var BadgeWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(_layout__WEBPACK_IMPORTED_MODULE_4__.Flex).attrs({
   gap: _theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["01"],
   align_items: 'center',
   padding: "".concat(_theme__WEBPACK_IMPORTED_MODULE_5__["default"].spacing["02"])
@@ -18958,15 +19701,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "prop-types");
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _chart_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./chart_container */ "./src/chart/chart_container.js");
-/* harmony import */ var _get_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./get_components */ "./src/chart/get_components.js");
-/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./tooltip */ "./src/chart/tooltip.js");
-/* harmony import */ var _use_chart_theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./use_chart_theme */ "./src/chart/use_chart_theme.js");
+/* harmony import */ var _bar_annotation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./bar_annotation */ "./src/chart/bar_annotation.js");
+/* harmony import */ var _chart_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chart_container */ "./src/chart/chart_container.js");
+/* harmony import */ var _get_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./get_components */ "./src/chart/get_components.js");
+/* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./tooltip */ "./src/chart/tooltip.js");
+/* harmony import */ var _use_chart_theme__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./use_chart_theme */ "./src/chart/use_chart_theme.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
-var _excluded = ["animated", "showGridRows", "showGridColumns", "numberOfTicks", "xAxisLabel", "yAxisLabel", "xTickFormat", "yTickFormat", "valueFormat", "xLabelOffset", "yLabelOffset", "margin", "orientation"];
+var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin", "horizontal", "showAnnotations"];
 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 _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); }
@@ -18976,27 +19720,28 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 var animationTrajectory = 'outside';
 var BarChart = function BarChart(props) {
+  var _xAxis$numTicks, _yAxis$numTicks;
   var animated = props.animated,
     showGridRows = props.showGridRows,
     showGridColumns = props.showGridColumns,
-    numberOfTicks = props.numberOfTicks,
-    xAxisLabel = props.xAxisLabel,
-    yAxisLabel = props.yAxisLabel,
-    xTickFormat = props.xTickFormat,
-    yTickFormat = props.yTickFormat,
-    valueFormat = props.valueFormat,
-    xLabelOffset = props.xLabelOffset,
-    yLabelOffset = props.yLabelOffset,
+    numTicks = props.numTicks,
+    _props$xAxis = props.xAxis,
+    xAxis = _props$xAxis === void 0 ? {} : _props$xAxis,
+    _props$yAxis = props.yAxis,
+    yAxis = _props$yAxis === void 0 ? {} : _props$yAxis,
+    formatValue = props.formatValue,
     data = props.data,
     palette = props.palette,
     width = props.width,
     height = props.height,
     margin = props.margin,
-    orientation = props.orientation,
-    hideTooltip = props.hideTooltip;
-  var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_3__.getAnimatedOrUnanimatedComponents)(animated),
+    horizontal = props.horizontal,
+    showTooltip = props.showTooltip,
+    showAnnotations = props.showAnnotations;
+  var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_4__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
     Axis = _getAnimatedOrUnanima.Axis,
@@ -19005,19 +19750,19 @@ var BarChart = function BarChart(props) {
     Tooltip = _getAnimatedOrUnanima.Tooltip;
   var config = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return {
-      x: orientation == 'vertical' ? {
-        type: 'band'
-      } : {
-        type: 'linear'
-      },
-      y: orientation == 'vertical' ? {
+      x: horizontal ? {
         type: 'linear'
       } : {
         type: 'band'
+      },
+      y: horizontal ? {
+        type: 'band'
+      } : {
+        type: 'linear'
       }
     };
-  }, [orientation]);
-  var chartTheme = (0,_use_chart_theme__WEBPACK_IMPORTED_MODULE_5__["default"])(palette);
+  }, [horizontal]);
+  var chartTheme = (0,_use_chart_theme__WEBPACK_IMPORTED_MODULE_6__["default"])(palette);
   if (!data || !data.length) return null;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(XYChart, {
     theme: chartTheme,
@@ -19032,45 +19777,53 @@ var BarChart = function BarChart(props) {
     rows: showGridRows,
     columns: showGridColumns,
     animationTrajectory: animationTrajectory,
-    numTicks: numberOfTicks
+    numTicks: numTicks
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(BarGroup, null, data.map(function (lineData) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(BarSeries, _extends({
       key: lineData.name,
       dataKey: lineData.name,
       data: lineData.datapoints,
-      xAccessor: lineData.accessors[orientation == 'vertical' ? 'xAccessor' : 'yAccessor'],
-      yAccessor: lineData.accessors[orientation == 'vertical' ? 'yAccessor' : 'xAccessor'],
+      xAccessor: lineData.accessors[horizontal ? 'yAccessor' : 'xAccessor'],
+      yAccessor: lineData.accessors[horizontal ? 'xAccessor' : 'yAccessor'],
       colorAccessor: lineData.accessors.colorAccessor
     }, lineData.barProps));
+  })), !!showAnnotations && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_bar_annotation__WEBPACK_IMPORTED_MODULE_2__.AnnotationGroup, null, data.map(function (lineData) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_bar_annotation__WEBPACK_IMPORTED_MODULE_2__.Annotation, {
+      key: lineData.name,
+      dataKey: lineData.name,
+      data: lineData.datapoints,
+      xAccessor: lineData.accessors[horizontal ? 'yAccessor' : 'xAccessor'],
+      yAccessor: lineData.accessors[horizontal ? 'xAccessor' : 'yAccessor'],
+      formatValue: formatValue
+    });
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Axis, {
-    key: "x-axis-".concat(animationTrajectory, "-").concat(orientation),
-    label: xAxisLabel,
-    orientation: orientation == 'vertical' ? 'bottom' : 'left',
-    numTicks: numberOfTicks,
+    key: "x-axis-".concat(animationTrajectory, "-").concat(horizontal),
+    label: xAxis.label,
+    orientation: horizontal ? 'left' : 'bottom',
+    numTicks: (_xAxis$numTicks = xAxis.numTicks) !== null && _xAxis$numTicks !== void 0 ? _xAxis$numTicks : numTicks,
     animationTrajectory: animationTrajectory,
-    tickFormat: xTickFormat,
-    labelOffset: xLabelOffset
+    tickFormat: xAxis.formatTick,
+    labelOffset: xAxis.labelOffset
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Axis, {
-    key: "y-axis-".concat(animationTrajectory, "-").concat(orientation),
-    label: yAxisLabel,
-    orientation: orientation == 'vertical' ? 'left' : 'bottom',
-    numTicks: numberOfTicks,
+    key: "y-axis-".concat(animationTrajectory, "-").concat(horizontal),
+    label: yAxis.label,
+    orientation: horizontal ? 'bottom' : 'left',
+    numTicks: (_yAxis$numTicks = yAxis.numTicks) !== null && _yAxis$numTicks !== void 0 ? _yAxis$numTicks : numTicks,
     animationTrajectory: animationTrajectory,
-    tickFormat: yTickFormat,
-    labelOffset: yLabelOffset
-  }), !hideTooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, {
-    showHorizontalCrosshair: orientation == 'vertical',
-    showVerticalCrosshair: orientation != 'vertical',
-    snapTooltipToDatumX: orientation != 'vertical',
-    snapTooltipToDatumY: orientation == 'vertical',
+    tickFormat: yAxis.formatTick,
+    labelOffset: yAxis.labelOffset
+  }), !!showTooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, {
+    showHorizontalCrosshair: !horizontal,
+    showVerticalCrosshair: !!horizontal,
+    snapTooltipToDatumX: !!horizontal,
+    snapTooltipToDatumY: !horizontal,
     unstyled: true,
     applyPositionStyle: true,
     renderTooltip: function renderTooltip(params) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_4__["default"], _extends({
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_5__["default"], _extends({
         data: data,
-        xTickFormat: xTickFormat,
-        yTickFormat: yTickFormat,
-        valueFormat: valueFormat
+        formatTick: xAxis.formatTick,
+        formatValue: formatValue
       }, params));
     }
   }));
@@ -19080,33 +19833,27 @@ var Bar = function Bar(props) {
   var animated = props.animated,
     showGridRows = props.showGridRows,
     showGridColumns = props.showGridColumns,
-    numberOfTicks = props.numberOfTicks,
-    xAxisLabel = props.xAxisLabel,
-    yAxisLabel = props.yAxisLabel,
-    xTickFormat = props.xTickFormat,
-    yTickFormat = props.yTickFormat,
-    valueFormat = props.valueFormat,
-    xLabelOffset = props.xLabelOffset,
-    yLabelOffset = props.yLabelOffset,
+    numTicks = props.numTicks,
+    xAxis = props.xAxis,
+    yAxis = props.yAxis,
+    formatValue = props.formatValue,
     margin = props.margin,
-    orientation = props.orientation,
+    horizontal = props.horizontal,
+    showAnnotations = props.showAnnotations,
     rest = _objectWithoutProperties(props, _excluded);
   var chartProps = {
     animated: animated,
     showGridRows: showGridRows,
     showGridColumns: showGridColumns,
-    numberOfTicks: numberOfTicks,
-    xAxisLabel: xAxisLabel,
-    yAxisLabel: yAxisLabel,
-    xTickFormat: xTickFormat,
-    yTickFormat: yTickFormat,
-    valueFormat: valueFormat,
-    xLabelOffset: xLabelOffset,
-    yLabelOffset: yLabelOffset,
+    numTicks: numTicks,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    formatValue: formatValue,
     margin: margin,
-    orientation: orientation
+    horizontal: horizontal,
+    showAnnotations: showAnnotations
   };
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({}, rest, {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_3__["default"], _extends({}, rest, {
     Chart: BarChart,
     chartProps: chartProps
   }));
@@ -19116,13 +19863,13 @@ Bar.defaultProps = {
   animated: true,
   showGridRows: false,
   showGridColumns: false,
-  orientation: 'vertical'
+  horizontal: false
 };
 Bar.propTypes = {
   animated: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showGridRows: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showGridColumns: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  numberOfTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+  numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
   data: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired),
     accessors: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
@@ -19133,25 +19880,308 @@ Bar.propTypes = {
     datapoints: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)).isRequired,
     barProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)
   })).isRequired,
-  xAxisLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  yAxisLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  xTickFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
-  yTickFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
-  valueFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  xAxis: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+    numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+    formatTick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+    labelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+  }),
+  yAxis: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+    numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+    formatTick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+    labelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+  }),
+  formatValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   margin: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     top: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     right: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     bottom: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     left: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
   }),
-  xLabelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
-  yLabelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
-  orientation: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['vertical', 'horizontal'])
+  horizontal: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  showAnnotations: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Bar);
 
 /***/ }),
 
+/***/ "./src/chart/bar_annotation.js":
+/*!*************************************!*\
+  !*** ./src/chart/bar_annotation.js ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Annotation": () => (/* binding */ Annotation),
+/* harmony export */   "AnnotationGroup": () => (/* binding */ AnnotationGroup)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/context/DataContext.js");
+/* harmony import */ var _visx_scale__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @visx/scale */ "./node_modules/@visx/scale/esm/utils/coerceNumber.js");
+/* harmony import */ var _visx_scale__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @visx/scale */ "./node_modules/@visx/scale/esm/scales/band.js");
+/* harmony import */ var _visx_text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @visx/text */ "./node_modules/@visx/text/esm/Text.js");
+/* harmony import */ var _is_valid_number__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./is_valid_number */ "./src/chart/is_valid_number.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+
+var defaultFormat = function defaultFormat(v) {
+  return v != null ? String(v) : '-';
+};
+function getScaleBandwidth(scale) {
+  var _scale$bandwidth;
+  return scale && 'bandwidth' in scale ? (_scale$bandwidth = scale === null || scale === void 0 ? void 0 : scale.bandwidth()) !== null && _scale$bandwidth !== void 0 ? _scale$bandwidth : 0 : 0;
+}
+function getScaleBaseline(scale) {
+  var _scale$range$map = scale.range().map(function (rangeBoundary) {
+      var _coerceNumber;
+      return (_coerceNumber = (0,_visx_scale__WEBPACK_IMPORTED_MODULE_2__["default"])(rangeBoundary)) !== null && _coerceNumber !== void 0 ? _coerceNumber : 0;
+    }),
+    _scale$range$map2 = _slicedToArray(_scale$range$map, 2),
+    a = _scale$range$map2[0],
+    b = _scale$range$map2[1];
+  var isDescending = a != null && b != null && b < a;
+  var maybeScaleZero = scale(0);
+  var _ref = isDescending ? [b, a] : [a, b],
+    _ref2 = _slicedToArray(_ref, 2),
+    minOutput = _ref2[0],
+    maxOutput = _ref2[1];
+
+  // if maybeScaleZero _is_ a number, but the scale is not clamped and
+  // it's outside the domain
+  // fallback to the scale's minimum
+  return isDescending ? (0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(maybeScaleZero) ? Math.min(Math.max(minOutput, maybeScaleZero), maxOutput) : maxOutput : (0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(maybeScaleZero) ? Math.max(maybeScaleZero, minOutput) : minOutput;
+}
+var Annotation = function Annotation(props) {
+  var bars = props.bars,
+    _props$padding = props.padding,
+    padding = _props$padding === void 0 ? 8 : _props$padding;
+  var _useContext = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_visx_xychart__WEBPACK_IMPORTED_MODULE_3__["default"]),
+    theme = _useContext.theme,
+    horizontal = _useContext.horizontal;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, bars.map(function (bar) {
+    var x = horizontal ? bar.x + bar.width + padding : bar.x + bar.width / 2;
+    var y = horizontal ? bar.y + bar.height / 2 : bar.y - padding;
+    var verticalAnchor = horizontal ? 'middle' : 'end';
+    var textAnchor = horizontal ? 'start' : 'middle';
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_text__WEBPACK_IMPORTED_MODULE_4__["default"], _extends({
+      key: bar.key,
+      x: x,
+      y: y
+    }, theme.svgLabelSmall, {
+      verticalAnchor: verticalAnchor,
+      textAnchor: textAnchor
+    }), bar.text);
+  }));
+};
+var AnnotationGroup = function AnnotationGroup(props) {
+  var children = props.children,
+    _props$padding2 = props.padding,
+    padding = _props$padding2 === void 0 ? 0.1 : _props$padding2,
+    sortBars = props.sortBars,
+    _props$BarsComponent = props.BarsComponent,
+    BarsComponent = _props$BarsComponent === void 0 ? Annotation : _props$BarsComponent;
+  var _useContext2 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_visx_xychart__WEBPACK_IMPORTED_MODULE_3__["default"]),
+    colorScale = _useContext2.colorScale,
+    dataRegistry = _useContext2.dataRegistry,
+    horizontal = _useContext2.horizontal,
+    registerData = _useContext2.registerData,
+    unregisterData = _useContext2.unregisterData,
+    xScale = _useContext2.xScale,
+    yScale = _useContext2.yScale;
+  var barSeriesChildren = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return getChildrenAndGrandchildrenWithProps(children);
+  }, [children]);
+
+  // extract data keys from child series
+  var dataKeys = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return barSeriesChildren.map(function (child) {
+      var _child$props$dataKey;
+      return (_child$props$dataKey = child.props.dataKey) !== null && _child$props$dataKey !== void 0 ? _child$props$dataKey : '';
+    }).filter(Boolean);
+  }, [barSeriesChildren]);
+
+  // register all child data
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var dataToRegister = barSeriesChildren.map(function (child) {
+      var _child$props = child.props,
+        key = _child$props.dataKey,
+        data = _child$props.data,
+        xAccessor = _child$props.xAccessor,
+        yAccessor = _child$props.yAccessor;
+      return {
+        key: key,
+        data: data,
+        xAccessor: xAccessor,
+        yAccessor: yAccessor
+      };
+    });
+    registerData(dataToRegister);
+    return function () {
+      return unregisterData(dataKeys);
+    };
+  }, [registerData, unregisterData, barSeriesChildren, dataKeys]);
+
+  // create group scale
+  var groupScale = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return (0,_visx_scale__WEBPACK_IMPORTED_MODULE_5__["default"])({
+      domain: sortBars ? _toConsumableArray(dataKeys).sort(sortBars) : dataKeys,
+      range: [0, getScaleBandwidth(horizontal ? yScale : xScale)],
+      padding: padding
+    });
+  }, [sortBars, dataKeys, xScale, yScale, horizontal, padding]);
+  var xZeroPosition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return xScale ? getScaleBaseline(xScale) : 0;
+  }, [xScale]);
+  var yZeroPosition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return yScale ? getScaleBaseline(yScale) : 0;
+  }, [yScale]);
+  var registryEntries = dataKeys.map(function (key) {
+    return dataRegistry.get(key);
+  });
+
+  // if scales and data are not available in the registry, bail
+  if (registryEntries.some(function (entry) {
+    return entry == null;
+  }) || !xScale || !yScale || !colorScale) {
+    return null;
+  }
+  var barThickness = getScaleBandwidth(groupScale);
+  var barSeries = registryEntries.map(function (_ref3) {
+    var _groupScale;
+    var xAccessor = _ref3.xAccessor,
+      yAccessor = _ref3.yAccessor,
+      data = _ref3.data,
+      key = _ref3.key;
+    var getLength = function getLength(d) {
+      var _xScale, _yScale;
+      return horizontal ? ((_xScale = xScale(xAccessor(d))) !== null && _xScale !== void 0 ? _xScale : NaN) - xZeroPosition : ((_yScale = yScale(yAccessor(d))) !== null && _yScale !== void 0 ? _yScale : NaN) - yZeroPosition;
+    };
+    var getGroupPosition = horizontal ? function (d) {
+      var _yScale2;
+      return (_yScale2 = yScale(yAccessor(d))) !== null && _yScale2 !== void 0 ? _yScale2 : NaN;
+    } : function (d) {
+      var _xScale2;
+      return (_xScale2 = xScale(xAccessor(d))) !== null && _xScale2 !== void 0 ? _xScale2 : NaN;
+    };
+    var withinGroupPosition = (_groupScale = groupScale(key)) !== null && _groupScale !== void 0 ? _groupScale : 0;
+    var getX = horizontal ? function (d) {
+      return xZeroPosition + Math.min(0, getLength(d));
+    } : function (d) {
+      return getGroupPosition(d) + withinGroupPosition;
+    };
+    var getY = horizontal ? function (d) {
+      return getGroupPosition(d) + withinGroupPosition;
+    } : function (d) {
+      return yZeroPosition + Math.min(0, getLength(d));
+    };
+    var getWidth = horizontal ? function (d) {
+      return Math.abs(getLength(d));
+    } : function () {
+      return barThickness;
+    };
+    var getHeight = horizontal ? function () {
+      return barThickness;
+    } : function (d) {
+      return Math.abs(getLength(d));
+    };
+    // get props from child BarSeries, if available
+    var childBarSeries = barSeriesChildren.find(function (child) {
+      return child.props.dataKey == key;
+    });
+    var _ref4 = (childBarSeries === null || childBarSeries === void 0 ? void 0 : childBarSeries.props) || {},
+      colorAccessor = _ref4.colorAccessor,
+      radius = _ref4.radius,
+      radiusAll = _ref4.radiusAll,
+      radiusBottom = _ref4.radiusBottom,
+      radiusLeft = _ref4.radiusLeft,
+      radiusRight = _ref4.radiusRight,
+      radiusTop = _ref4.radiusTop,
+      _ref4$formatValue = _ref4.formatValue,
+      formatValue = _ref4$formatValue === void 0 ? defaultFormat : _ref4$formatValue;
+    return {
+      key: key,
+      radius: radius,
+      radiusAll: radiusAll,
+      radiusBottom: radiusBottom,
+      radiusLeft: radiusLeft,
+      radiusRight: radiusRight,
+      radiusTop: radiusTop,
+      bars: data.map(function (bar, index) {
+        var _colorAccessor;
+        var barX = getX(bar);
+        if (!(0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(barX)) return null;
+        var barY = getY(bar);
+        if (!(0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(barY)) return null;
+        var barWidth = getWidth(bar);
+        if (!(0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(barWidth)) return null;
+        var barHeight = getHeight(bar);
+        if (!(0,_is_valid_number__WEBPACK_IMPORTED_MODULE_1__.isValidNumber)(barHeight)) return null;
+        return {
+          key: "".concat(key, "-").concat(index),
+          x: barX,
+          y: barY,
+          width: barWidth,
+          height: barHeight,
+          fill: (_colorAccessor = colorAccessor === null || colorAccessor === void 0 ? void 0 : colorAccessor(bar, index)) !== null && _colorAccessor !== void 0 ? _colorAccessor : colorScale(key),
+          text: formatValue(horizontal ? xAccessor(bar) : yAccessor(bar))
+        };
+      }).filter(Boolean)
+    };
+  });
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("g", {
+    className: "visx-bar-group"
+  }, barSeries.map(function (series) {
+    return series && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(BarsComponent, _extends({
+      horizontal: horizontal,
+      xScale: xScale,
+      yScale: yScale
+    }, series, {
+      key: series.key
+    }));
+  }));
+};
+var isChildWithProps = function isChildWithProps(child) {
+  return !!child && _typeof(child) == 'object' && 'props' in child && child.props != null;
+};
+
+/**
+ * Returns children and grandchildren of type React.ReactNode.
+ * Flattens children one level to support React.Fragments and
+ * Array type children.
+ */
+function getChildrenAndGrandchildrenWithProps(children) {
+  return react__WEBPACK_IMPORTED_MODULE_0___default().Children.toArray(children).flatMap(function (child) {
+    if (_typeof(child) == 'object' && 'props' in child && child.props.children) return child.props.children;
+    return child;
+  }).filter(function (child) {
+    return isChildWithProps(child);
+  });
+}
+
+/***/ }),
+
 /***/ "./src/chart/chart_container.js":
 /*!**************************************!*\
   !*** ./src/chart/chart_container.js ***!
@@ -19181,7 +20211,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["header", "description", "actions", "data", "palette", "loading", "Chart", "chartProps", "hideLegend", "hideTooltip"];
+var _excluded = ["header", "description", "actions", "data", "palette", "loading", "Chart", "LegendItem", "chartProps", "showLegend", "showTooltip"];
 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; }
@@ -19204,9 +20234,10 @@ var ChartContainer = function ChartContainer(props) {
     palette = props.palette,
     loading = props.loading,
     Chart = props.Chart,
+    LegendItem = props.LegendItem,
     chartProps = props.chartProps,
-    hideLegend = props.hideLegend,
-    hideTooltip = props.hideTooltip,
+    showLegend = props.showLegend,
+    showTooltip = props.showTooltip,
     rest = _objectWithoutProperties(props, _excluded);
   var outerWidth = props.width ? Math.max(410, props.width) : undefined;
   var outerHeight = Math.max(176, props.height || 0);
@@ -19227,11 +20258,12 @@ var ChartContainer = function ChartContainer(props) {
       palette: palette,
       width: width,
       height: height,
-      hideTooltip: hideTooltip
+      showTooltip: showTooltip
     }));
-  })), !hideLegend && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_legend__WEBPACK_IMPORTED_MODULE_7__["default"], {
+  })), !!showLegend && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_legend__WEBPACK_IMPORTED_MODULE_7__["default"], {
     data: data,
-    palette: palette
+    palette: palette,
+    Item: LegendItem
   }))));
 };
 ChartContainer.displayName = 'ChartContainer';
@@ -19248,8 +20280,9 @@ ChartContainer.propTypes = {
   palette: prop_types__WEBPACK_IMPORTED_MODULE_0___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)),
   loading: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
   variant: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['default', 'ghost']),
-  hideLegend: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
-  hideTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  showLegend: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  showTooltip: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  LegendItem: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().element)
 };
 var ChartContainerWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "ChartContainerWrapper",
@@ -19398,17 +20431,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getAnimatedOrUnanimatedComponents": () => (/* binding */ getAnimatedOrUnanimatedComponents)
 /* harmony export */ });
 /* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/axis/AnimatedAxis.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarGroup.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarSeries.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/grid/AnimatedGrid.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedLineSeries.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/Tooltip.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/XYChart.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/axis/Axis.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/BarGroup.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/BarSeries.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/grid/Grid.js");
-/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/LineSeries.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarStack.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarGroup.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedBarSeries.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/grid/AnimatedGrid.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/AnimatedLineSeries.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/Tooltip.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/XYChart.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/axis/Axis.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/BarStack.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/BarGroup.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/BarSeries.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/grid/Grid.js");
+/* harmony import */ var _visx_xychart__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @visx/xychart */ "./node_modules/@visx/xychart/esm/components/series/LineSeries.js");
 // LICENSE_CODE ZON
 
 
@@ -19417,20 +20452,22 @@ __webpack_require__.r(__webpack_exports__);
 var getAnimatedOrUnanimatedComponents = function getAnimatedOrUnanimatedComponents(animated) {
   return animated ? {
     Axis: _visx_xychart__WEBPACK_IMPORTED_MODULE_0__["default"],
-    BarGroup: _visx_xychart__WEBPACK_IMPORTED_MODULE_1__["default"],
-    BarSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_2__["default"],
-    Grid: _visx_xychart__WEBPACK_IMPORTED_MODULE_3__["default"],
-    LineSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_4__["default"],
-    Tooltip: _visx_xychart__WEBPACK_IMPORTED_MODULE_5__["default"],
-    XYChart: _visx_xychart__WEBPACK_IMPORTED_MODULE_6__["default"]
+    BarStack: _visx_xychart__WEBPACK_IMPORTED_MODULE_1__["default"],
+    BarGroup: _visx_xychart__WEBPACK_IMPORTED_MODULE_2__["default"],
+    BarSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_3__["default"],
+    Grid: _visx_xychart__WEBPACK_IMPORTED_MODULE_4__["default"],
+    LineSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_5__["default"],
+    Tooltip: _visx_xychart__WEBPACK_IMPORTED_MODULE_6__["default"],
+    XYChart: _visx_xychart__WEBPACK_IMPORTED_MODULE_7__["default"]
   } : {
-    Axis: _visx_xychart__WEBPACK_IMPORTED_MODULE_7__["default"],
-    BarGroup: _visx_xychart__WEBPACK_IMPORTED_MODULE_8__["default"],
-    BarSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_9__["default"],
-    Grid: _visx_xychart__WEBPACK_IMPORTED_MODULE_10__["default"],
-    LineSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_11__["default"],
-    Tooltip: _visx_xychart__WEBPACK_IMPORTED_MODULE_5__["default"],
-    XYChart: _visx_xychart__WEBPACK_IMPORTED_MODULE_6__["default"]
+    Axis: _visx_xychart__WEBPACK_IMPORTED_MODULE_8__["default"],
+    BarStack: _visx_xychart__WEBPACK_IMPORTED_MODULE_9__["default"],
+    BarGroup: _visx_xychart__WEBPACK_IMPORTED_MODULE_10__["default"],
+    BarSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_11__["default"],
+    Grid: _visx_xychart__WEBPACK_IMPORTED_MODULE_12__["default"],
+    LineSeries: _visx_xychart__WEBPACK_IMPORTED_MODULE_13__["default"],
+    Tooltip: _visx_xychart__WEBPACK_IMPORTED_MODULE_6__["default"],
+    XYChart: _visx_xychart__WEBPACK_IMPORTED_MODULE_7__["default"]
   };
 };
 
@@ -19505,6 +20542,27 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./src/chart/is_valid_number.js":
+/*!**************************************!*\
+  !*** ./src/chart/is_valid_number.js ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "isValidNumber": () => (/* binding */ isValidNumber)
+/* harmony export */ });
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+var isValidNumber = function isValidNumber(v) {
+  return v != null && typeof v == 'number' && !Number.isNaN(v) && Number.isFinite(v);
+};
+
+/***/ }),
+
 /***/ "./src/chart/legend.js":
 /*!*****************************!*\
   !*** ./src/chart/legend.js ***!
@@ -19516,10 +20574,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Ordinal.js");
-/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Legend/LegendItem.js");
-/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Legend/LegendLabel.js");
-/* harmony import */ var _visx_scale__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @visx/scale */ "./node_modules/@visx/scale/esm/scales/ordinal.js");
+/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Legend/LegendItem.js");
+/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Legend/LegendLabel.js");
+/* harmony import */ var _visx_legend__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @visx/legend */ "./node_modules/@visx/legend/esm/legends/Ordinal.js");
+/* harmony import */ var _visx_scale__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @visx/scale */ "./node_modules/@visx/scale/esm/scales/ordinal.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
@@ -19527,10 +20585,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _glyph__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./glyph */ "./src/chart/glyph.js");
+/* harmony import */ var _render_comp__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./render_comp */ "./src/chart/render_comp.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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); }
 
 
@@ -19539,23 +20604,48 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
+var DefaultItem = function DefaultItem(props) {
+  var _accessors$colorAcces;
+  var data = props.data,
+    datum = props.datum,
+    index = props.index,
+    text = props.text,
+    value = props.value;
+  var _ref = data[index] || {},
+    accessors = _ref.accessors,
+    legendGlyphProps = _ref.legendGlyphProps;
+  var fill = (accessors === null || accessors === void 0 ? void 0 : (_accessors$colorAcces = accessors.colorAccessor) === null || _accessors$colorAcces === void 0 ? void 0 : _accessors$colorAcces.call(accessors, datum)) || value;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_6__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_glyph__WEBPACK_IMPORTED_MODULE_4__["default"], _extends({
+    fill: fill
+  }, legendGlyphProps)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    align: "left",
+    margin: "0 0 0 ".concat(_theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing["03"])
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
+    variant: "sm",
+    color: "gray_11"
+  }, text)));
+};
 var Legend = function Legend(props) {
   var data = props.data,
-    palette = props.palette;
+    palette = props.palette,
+    _props$Item = props.Item,
+    Item = _props$Item === void 0 ? DefaultItem : _props$Item;
   if (!data || !data.length) return null;
-  var ordinalColorScale = (0,_visx_scale__WEBPACK_IMPORTED_MODULE_5__["default"])({
+  var ordinalColorScale = (0,_visx_scale__WEBPACK_IMPORTED_MODULE_8__["default"])({
     domain: data.map(function (d) {
       return d.name;
     }),
     range: palette
   });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LegendWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_6__["default"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LegendWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_9__["default"], {
     scale: ordinalColorScale
   }, function (labels) {
     return labels.map(function (label, i) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LegendItemWrapper, _extends({
+      return (0,_render_comp__WEBPACK_IMPORTED_MODULE_5__.renderComp)(Item, _objectSpread({
         key: "legend-".concat(i),
-        data: data
+        data: data,
+        DefaultItem: DefaultItem
       }, label));
     });
   }));
@@ -19564,27 +20654,6 @@ var LegendWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div
   displayName: "LegendWrapper",
   componentId: "sc-1hxjoxt-0"
 })(["display:flex;flex-wrap:wrap;column-gap:", ";row-gap:", ";"], _theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing["06"], _theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing["04"]);
-var LegendItemWrapper = function LegendItemWrapper(props) {
-  var _accessors$colorAcces;
-  var data = props.data,
-    datum = props.datum,
-    index = props.index,
-    text = props.text,
-    value = props.value;
-  var _ref = data[index] || {},
-    accessors = _ref.accessors,
-    legendGlyphProps = _ref.legendGlyphProps;
-  var fill = (accessors === null || accessors === void 0 ? void 0 : (_accessors$colorAcces = accessors.colorAccessor) === null || _accessors$colorAcces === void 0 ? void 0 : _accessors$colorAcces.call(accessors, datum)) || value;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_7__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_glyph__WEBPACK_IMPORTED_MODULE_4__["default"], _extends({
-    fill: fill
-  }, legendGlyphProps)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_visx_legend__WEBPACK_IMPORTED_MODULE_8__["default"], {
-    align: "left",
-    margin: "0 0 0 ".concat(_theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing["03"])
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
-    variant: "sm",
-    color: "gray_11"
-  }, text)));
-};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Legend);
 
 /***/ }),
@@ -19613,7 +20682,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["animated", "showGridRows", "showGridColumns", "numberOfTicks", "xAxisLabel", "yAxisLabel", "xTickFormat", "yTickFormat", "valueFormat", "xLabelOffset", "yLabelOffset", "margin"];
+var _excluded = ["animated", "showGridRows", "showGridColumns", "numTicks", "xAxis", "yAxis", "formatValue", "margin"];
 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 _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); }
@@ -19634,23 +20703,22 @@ var config = {
   }
 };
 var LineChart = function LineChart(props) {
+  var _xAxis$numTicks, _yAxis$numTicks;
   var animated = props.animated,
     showGridRows = props.showGridRows,
     showGridColumns = props.showGridColumns,
-    numberOfTicks = props.numberOfTicks,
-    xAxisLabel = props.xAxisLabel,
-    yAxisLabel = props.yAxisLabel,
-    xTickFormat = props.xTickFormat,
-    yTickFormat = props.yTickFormat,
-    valueFormat = props.valueFormat,
-    xLabelOffset = props.xLabelOffset,
-    yLabelOffset = props.yLabelOffset,
+    numTicks = props.numTicks,
+    _props$xAxis = props.xAxis,
+    xAxis = _props$xAxis === void 0 ? {} : _props$xAxis,
+    _props$yAxis = props.yAxis,
+    yAxis = _props$yAxis === void 0 ? {} : _props$yAxis,
+    formatValue = props.formatValue,
     data = props.data,
     palette = props.palette,
     width = props.width,
     height = props.height,
     margin = props.margin,
-    hideTooltip = props.hideTooltip;
+    showTooltip = props.showTooltip;
   var _getAnimatedOrUnanima = (0,_get_components__WEBPACK_IMPORTED_MODULE_3__.getAnimatedOrUnanimatedComponents)(animated),
     XYChart = _getAnimatedOrUnanima.XYChart,
     Grid = _getAnimatedOrUnanima.Grid,
@@ -19672,7 +20740,7 @@ var LineChart = function LineChart(props) {
     rows: showGridRows,
     columns: showGridColumns,
     animationTrajectory: animationTrajectory,
-    numTicks: numberOfTicks
+    numTicks: numTicks
   }), data.map(function (lineData) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(LineSeries, _extends({
       key: lineData.name,
@@ -19682,21 +20750,21 @@ var LineChart = function LineChart(props) {
     }, lineData.accessors, lineData.lineProps));
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Axis, {
     key: "x-axis-".concat(animationTrajectory),
-    label: xAxisLabel,
+    label: xAxis.label,
     orientation: "bottom",
-    numTicks: numberOfTicks,
+    numTicks: (_xAxis$numTicks = xAxis.numTicks) !== null && _xAxis$numTicks !== void 0 ? _xAxis$numTicks : numTicks,
     animationTrajectory: animationTrajectory,
-    tickFormat: xTickFormat,
-    labelOffset: xLabelOffset
+    tickFormat: xAxis.formatTick,
+    labelOffset: xAxis.labelOffset
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Axis, {
     key: "y-axis-".concat(animationTrajectory),
-    label: yAxisLabel,
+    label: yAxis.label,
     orientation: "left",
-    numTicks: numberOfTicks,
+    numTicks: (_yAxis$numTicks = yAxis.numTicks) !== null && _yAxis$numTicks !== void 0 ? _yAxis$numTicks : numTicks,
     animationTrajectory: animationTrajectory,
-    tickFormat: yTickFormat,
-    labelOffset: yLabelOffset
-  }), !hideTooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, {
+    tickFormat: yAxis.formatTick,
+    labelOffset: yAxis.labelOffset
+  }), !!showTooltip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Tooltip, {
     showVerticalCrosshair: true,
     snapTooltipToDatumX: true,
     snapTooltipToDatumY: true,
@@ -19707,9 +20775,8 @@ var LineChart = function LineChart(props) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_tooltip__WEBPACK_IMPORTED_MODULE_4__["default"], _extends({
         shared: true,
         data: data,
-        xTickFormat: xTickFormat,
-        yTickFormat: yTickFormat,
-        valueFormat: valueFormat
+        formatTick: xAxis.formatTick,
+        formatValue: formatValue
       }, params));
     }
   }));
@@ -19719,28 +20786,20 @@ var Line = function Line(props) {
   var animated = props.animated,
     showGridRows = props.showGridRows,
     showGridColumns = props.showGridColumns,
-    numberOfTicks = props.numberOfTicks,
-    xAxisLabel = props.xAxisLabel,
-    yAxisLabel = props.yAxisLabel,
-    xTickFormat = props.xTickFormat,
-    yTickFormat = props.yTickFormat,
-    valueFormat = props.valueFormat,
-    xLabelOffset = props.xLabelOffset,
-    yLabelOffset = props.yLabelOffset,
+    numTicks = props.numTicks,
+    xAxis = props.xAxis,
+    yAxis = props.yAxis,
+    formatValue = props.formatValue,
     margin = props.margin,
     rest = _objectWithoutProperties(props, _excluded);
   var chartProps = {
     animated: animated,
     showGridRows: showGridRows,
     showGridColumns: showGridColumns,
-    numberOfTicks: numberOfTicks,
-    xAxisLabel: xAxisLabel,
-    yAxisLabel: yAxisLabel,
-    xTickFormat: xTickFormat,
-    yTickFormat: yTickFormat,
-    valueFormat: valueFormat,
-    xLabelOffset: xLabelOffset,
-    yLabelOffset: yLabelOffset,
+    numTicks: numTicks,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    formatValue: formatValue,
     margin: margin
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_chart_container__WEBPACK_IMPORTED_MODULE_2__["default"], _extends({}, rest, {
@@ -19758,7 +20817,7 @@ Line.propTypes = {
   animated: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showGridRows: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   showGridColumns: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
-  numberOfTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+  numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
   data: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired),
     accessors: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
@@ -19770,19 +20829,25 @@ Line.propTypes = {
     lineProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
     legendGlyphProps: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)
   })).isRequired,
-  xAxisLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  yAxisLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  xTickFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
-  yTickFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
-  valueFormat: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  xAxis: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+    numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+    formatTick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+    labelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+  }),
+  yAxis: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
+    label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+    numTicks: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
+    formatTick: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+    labelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+  }),
+  formatValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   margin: prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     top: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     right: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     bottom: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
     left: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
-  }),
-  xLabelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
-  yLabelOffset: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)
+  })
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Line);
 
@@ -19878,6 +20943,43 @@ var NoDataWrapper = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div
 
 /***/ }),
 
+/***/ "./src/chart/render_comp.js":
+/*!**********************************!*\
+  !*** ./src/chart/render_comp.js ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "renderComp": () => (/* binding */ renderComp)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function renderComp(Comp, props) {
+  return isReactComponent(Comp) ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(Comp, props) : Comp;
+}
+function isReactComponent(comp) {
+  return isClassComponent(comp) || typeof comp === 'function' || isExoticComponent(comp);
+}
+function isClassComponent(comp) {
+  return typeof comp === 'function' && function () {
+    var proto = Object.getPrototypeOf(comp);
+    return proto.prototype && proto.prototype.isReactComponent;
+  }();
+}
+function isExoticComponent(comp) {
+  return _typeof(comp) === 'object' && _typeof(comp.$$typeof) === 'symbol' && ['react.memo', 'react.forward_ref'].includes(comp.$$typeof.description);
+}
+
+/***/ }),
+
 /***/ "./src/chart/tooltip.js":
 /*!******************************!*\
   !*** ./src/chart/tooltip.js ***!
@@ -19910,7 +21012,7 @@ var defaultFormat = function defaultFormat(v) {
   return v != null ? String(v) : '-';
 };
 var Tooltip = function Tooltip(props) {
-  var _props$xTickFormat, _props$valueFormat;
+  var _props$formatTick, _props$formatValue;
   var shared = props.shared,
     data = props.data,
     tooltipData = props.tooltipData,
@@ -19925,13 +21027,13 @@ var Tooltip = function Tooltip(props) {
     }, {});
   }, [data]);
   var series = shared ? Object.keys(datumByKey !== null && datumByKey !== void 0 ? datumByKey : {}) : [nearestDatum === null || nearestDatum === void 0 ? void 0 : nearestDatum.key];
-  var xTickFormat = (_props$xTickFormat = props.xTickFormat) !== null && _props$xTickFormat !== void 0 ? _props$xTickFormat : defaultFormat;
-  var valueFormat = (_props$valueFormat = props.valueFormat) !== null && _props$valueFormat !== void 0 ? _props$valueFormat : defaultFormat;
+  var formatTick = (_props$formatTick = props.formatTick) !== null && _props$formatTick !== void 0 ? _props$formatTick : defaultFormat;
+  var formatValue = (_props$formatValue = props.formatValue) !== null && _props$formatValue !== void 0 ? _props$formatValue : defaultFormat;
   var getX = function getX(key, datum) {
-    return datum && xTickFormat(dataByKey[key].accessors.xAccessor(datum));
+    return datum && formatTick(dataByKey[key].accessors.xAccessor(datum));
   };
   var getY = function getY(key, datum) {
-    return datum && valueFormat(dataByKey[key].accessors.yAccessor(datum));
+    return datum && formatValue(dataByKey[key].accessors.yAccessor(datum));
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TooltipWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TooltipHeader, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_typography__WEBPACK_IMPORTED_MODULE_3__.Label, {
     variant: "base",
@@ -24533,9 +25635,9 @@ Provider.propTypes = {
     id: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string.isRequired),
     accessor: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string),
     type: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOf(['string', 'number']),
-    Header: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]).isRequired,
+    Header: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().element.isRequired),
     Cell: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
-    Footer: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func)]),
+    Footer: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().element),
     can_sort: prop_types__WEBPACK_IMPORTED_MODULE_0___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)]),
     on_sort: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().func),
     disableHiding: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),