@easyv/charts 1.10.14 → 1.10.16

package/lib/components/PieChart.js

@@ -22,7 +22,7 @@ var _formatter = require("../formatter");
 var _piechartModule = _interopRequireDefault(require("../css/piechart.module.css"));
 var _hooks = require("../hooks");
 var _PieTooltip = require("./PieTooltip");
-var _utils2 = require("@easyv/utils/lib/common/utils");
+var _legendPlacement = require("../utils/legendPlacement");
 var _excluded = ["startAngle", "endAngle", "antiClockwise"],
   _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
   _excluded3 = ["formatter"],
@@ -35,6 +35,41 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PI = Math.PI;
+var PIE_ADAPTIVE_MARGINS = {
+  right: {
+    marginTop: 24,
+    marginBottom: 24,
+    marginLeft: 0,
+    marginRight: 200
+  },
+  left: {
+    marginTop: 24,
+    marginBottom: 24,
+    marginLeft: 200,
+    marginRight: 0
+  },
+  top: {
+    marginTop: 110,
+    marginBottom: 24,
+    marginLeft: 24,
+    marginRight: 24
+  },
+  bottom: {
+    marginTop: 24,
+    marginBottom: 110,
+    marginLeft: 24,
+    marginRight: 24
+  },
+  hidden: {
+    marginTop: 24,
+    marginBottom: 24,
+    marginLeft: 24,
+    marginRight: 24
+  }
+};
+var getPieAdaptiveMargin = function getPieAdaptiveMargin(show, alignment) {
+  return (0, _legendPlacement.getPieAdaptiveMarginPreset)(show, alignment, PIE_ADAPTIVE_MARGINS);
+};
 var defaultChart = {
   outerRadius: 1,
   innerRadius: 0,
@@ -49,106 +84,113 @@ var defaultAngle = {
   endAngle: 360,
   antiClockwise: false
 };
-var nameDy = function nameDy(showValue, showPercent, mode, dir) {
-  if (showValue || showPercent) {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-2.6em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir * 1.1 + "em";
-    } else {
-      return 0;
-    }
-  }
-};
-var valueDy = function valueDy(value1, mode, dir) {
-  if (value1) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-1.1em";
-    } else {
-      return 0;
-    }
-  }
-};
-var percentDy_ = function percentDy_(showName, showValue, mode, dir) {
-  if (showValue) {
-    return 0;
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir * 1.1 + "em";
-    } else {
-      return 0;
-    }
-  }
-};
-var percentX = function percentX(showName, showValue, mode, x) {
-  if (showValue) {
-    return "";
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return x;
-    } else {
-      return "";
-    }
-  } else {
-    return x;
-  }
-};
-var percentDx = function percentDx(showName, showValue, mode) {
-  if (showValue) {
-    return "0.5em";
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return 0;
-    } else {
-      return "0.5em";
-    }
-  } else {
-    return 0;
-  }
-};
-var percentDy = function percentDy(showName, showValue, mode) {
-  if (showValue) {
-    return 0;
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    return 0;
-  }
-};
-var valueDx = function valueDx(showName, mode) {
-  if (!showName) {
-    return "";
-  }
-  if (mode == "vertical") {
-    return "";
-  } else {
-    return "0.5em";
-  }
-};
+
+// const nameDy = (showValue, showPercent, mode, dir) => {
+//   if (showValue || showPercent) {
+//     if (mode == "vertical") {
+//       return dir == 1 ? "1.1em" : "-2.6em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir * 1.1 + "em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
+// const valueDy = (value1, mode, dir) => {
+//   if (value1) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir == 1 ? "1.1em" : "-1.1em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
+
+// const percentDy_ = (showName, showValue, mode, dir) => {
+//   if (showValue) {
+//     return 0;
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir * 1.1 + "em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
+
+// const percentX = (showName, showValue, mode, x) => {
+//   if (showValue) {
+//     return "";
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return x;
+//     } else {
+//       return "";
+//     }
+//   } else {
+//     return x;
+//   }
+// };
+
+// const percentDx = (showName, showValue, mode) => {
+//   if (showValue) {
+//     return "0.5em";
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return 0;
+//     } else {
+//       return "0.5em";
+//     }
+//   } else {
+//     return 0;
+//   }
+// };
+
+// const percentDy = (showName, showValue, mode) => {
+//   if (showValue) {
+//     return 0;
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     return 0;
+//   }
+// };
+
+// const valueDx = (showName, mode) => {
+//   if (!showName) {
+//     return "";
+//   }
+//   if (mode == "vertical") {
+//     return "";
+//   } else {
+//     return "0.5em";
+//   }
+// };
+
 var getCoord = function getCoord(deg, radius) {
   var x = Math.cos(deg) * radius,
     y = Math.sin(deg) * radius;
@@ -232,6 +274,7 @@ var getCircleScale = function getCircleScale() {
   }));
 };
 var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var _legend$config2;
   var width = _ref5.width,
     height = _ref5.height,
     _ref5$config = _ref5.config,
@@ -248,6 +291,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     _ref5$config$chart$ma = _ref5$config$chart.margin,
     marginLeft = _ref5$config$chart$ma.marginLeft,
     marginTop = _ref5$config$chart$ma.marginTop,
+    marginRight = _ref5$config$chart$ma.marginRight,
+    marginBottom = _ref5$config$chart$ma.marginBottom,
     _ref5$config$fan = _ref5$config.fan,
     _ref5$config$fan2 = _ref5$config$fan === void 0 ? {} : _ref5$config$fan,
     _ref5$config$fan2$cha = _ref5$config$fan2.chart,
@@ -313,7 +358,43 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     chartWidth = _useContext.width,
     chartHeight = _useContext.height,
     triggerOnRelative = _useContext.triggerOnRelative,
-    onEmit = _useContext.onEmit;
+    onEmit = _useContext.onEmit,
+    updateConfig = _useContext.updateConfig;
+  var _legend$config = legend.config,
+    legendShow = _legend$config.show,
+    _legend$config$name = _legend$config.name,
+    _legend$config$name2 = _legend$config$name === void 0 ? {} : _legend$config$name,
+    legendLayoutMode = _legend$config$name2.layoutMode;
+  var legendAlignment = (_legend$config2 = legend.config) === null || _legend$config2 === void 0 || (_legend$config2 = _legend$config2.layout) === null || _legend$config2 === void 0 ? void 0 : _legend$config2.alignment;
+  var adaptiveMarginPresetKey = (0, _react.useRef)("");
+  (0, _react.useEffect)(function () {
+    if (legendLayoutMode !== "Adaptive" || !updateConfig) return;
+    var presetKey = "".concat(legendLayoutMode, "-").concat(legendShow, "-").concat(legendAlignment);
+    if (adaptiveMarginPresetKey.current === presetKey) return;
+    adaptiveMarginPresetKey.current = presetKey;
+    var target = getPieAdaptiveMargin(legendShow, legendAlignment);
+    updateConfig({
+      id: id,
+      type: "config",
+      payload: [{
+        path: ["chart", "margin", "marginTop"],
+        field: "value",
+        value: target.marginTop
+      }, {
+        path: ["chart", "margin", "marginBottom"],
+        field: "value",
+        value: target.marginBottom
+      }, {
+        path: ["chart", "margin", "marginLeft"],
+        field: "value",
+        value: target.marginLeft
+      }, {
+        path: ["chart", "margin", "marginRight"],
+        field: "value",
+        value: target.marginRight
+      }]
+    });
+  }, [id, updateConfig, legendLayoutMode, legendShow, legendAlignment]);
   var _useState = (0, _react.useState)(1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     y = _useState2[0],
@@ -607,6 +688,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     judge: judgeData
   }))), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
+    componentWidth: width,
+    marginLeft: marginLeft,
+    marginRight: marginRight,
+    isPieChart: true,
     columnsSeries: columnsSeries,
     data: data,
     series: _arcs.map(function (arc) {
@@ -777,6 +862,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     radius: radius
   }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
+    componentWidth: width,
+    marginLeft: marginLeft,
+    marginRight: marginRight,
+    isPieChart: true,
     data: data,
     columnsSeries: columnsSeries,
     series: _arcs.map(function (arc) {
@@ -900,7 +989,9 @@ var Current = function Current(_ref9) {
     value: nameTemp,
     speed: speed,
     style: _objectSpread(_objectSpread({
+      width: "100%",
       maxWidth: maxWidth,
+      textAlign: "center",
       display: textOverflow == "marquee" ? "flex" : "bolck",
       justifyContent: "center"
     }, (0, _utils.getFontStyle)(nameFont)), {}, {

package/lib/formatter/legend.js

@@ -103,13 +103,21 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     stops = seriesColor.linear.stops;
   var _color = seriesColorType == "pure" ? pure : stops[0].color;
   var textMarginLeft = 5;
+  var adaptiveMaxWidth = props.adaptiveMaxWidth,
+    isPieAdaptive = props.isPieAdaptive,
+    chartWidth = props.chartWidth;
+  var isSideAdaptive = !!adaptiveMaxWidth;
+  var isTopBottomAdaptive = isPieAdaptive && !isSideAdaptive;
+  var nameOverflowType = isSideAdaptive || isTopBottomAdaptive ? "ellipsis" : textOverflow;
 
-  // 1. 计算每列宽度（加上间距）
+  // 1. 计算每列宽度（加上间距）；正上/正下自适应不按全局列宽对齐
   var columns = [];
-  if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
-  if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
-  if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
-  if (series.fieldsData.length > 0) {
+  if (!isTopBottomAdaptive) {
+    if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
+    if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
+    if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
+  }
+  if (!isTopBottomAdaptive && series.fieldsData.length > 0) {
     //网格布局新增的各列宽度
     series.fieldsData.forEach(function (item) {
       var _item$fieldsColumnInd, _suf$fontSize, _item$font, _item$translate, _suf$translate;
@@ -130,25 +138,66 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       columns.push("".concat(colW, "px"));
     });
   }
+  var scaleColumnsToMax = function scaleColumnsToMax(cols, maxTotal) {
+    var widths = cols.map(function (c) {
+      return parseFloat(c) || 0;
+    });
+    var total = widths.reduce(function (a, b) {
+      return a + b;
+    }, 0);
+    if (!total || total <= maxTotal) return cols.join(" ");
+    var scale = maxTotal / total;
+    return widths.map(function (w) {
+      return "".concat(Math.max(1, Math.floor(w * scale)), "px");
+    }).join(" ");
+  };
+  var sideGridMaxWidth = isSideAdaptive ? Math.max(0, adaptiveMaxWidth - (icon ? (parseFloat(icon.width) || 0) + (parseFloat(icon.marginRight) || 0) : 0)) : adaptiveMaxWidth;
+  var contentStyle = isSideAdaptive ? {
+    display: "grid",
+    gridTemplateColumns: scaleColumnsToMax(columns, sideGridMaxWidth),
+    width: "max-content",
+    maxWidth: "100%",
+    minWidth: 0,
+    overflow: "hidden",
+    boxSizing: "border-box"
+  } : isTopBottomAdaptive ? {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    width: "max-content",
+    maxWidth: chartWidth ? "".concat(chartWidth, "px") : "100%",
+    minWidth: 0,
+    overflow: "hidden",
+    boxSizing: "border-box",
+    gap: "".concat(valueGap, "px ").concat(percentGap, "px")
+  } : {
+    width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
+    gridTemplateColumns: columns.join(" "),
+    overflowX: "visible"
+  };
+  var contentClassName = isTopBottomAdaptive ? undefined : isSideAdaptive ? showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle : showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle;
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
+      flexShrink: 0,
       transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
     })
   }), /*#__PURE__*/React.createElement("div", {
-    className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
-    style: {
-      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
-      gridTemplateColumns: columns.join(" "),
-      overflowX: "visible"
-    }
+    className: contentClassName,
+    style: contentStyle
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
-    type: textOverflow,
+    type: nameOverflowType,
     speed: speed,
     style: _objectSpread(_objectSpread({
-      width: maxWidth,
-      marginLeft: textMarginLeft
+      width: isSideAdaptive ? "100%" : isTopBottomAdaptive ? "auto" : maxWidth,
+      maxWidth: isSideAdaptive ? "100%" : isTopBottomAdaptive ? "none" : maxWidth,
+      minWidth: isSideAdaptive ? 0 : undefined,
+      flexShrink: isTopBottomAdaptive ? 1 : undefined,
+      marginLeft: textMarginLeft,
+      // whiteSpace: "nowrap",
+      overflow: "hidden"
     }, (0, _utils.getFontStyle)(nameFont)), {}, {
       transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
     })
@@ -157,12 +206,13 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       display: "flex",
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(valueFont)), {}, {
-      marginLeft: valueGap,
+      marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : valueGap,
+      flexShrink: isTopBottomAdaptive ? 0 : undefined,
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
       color: valueSameColor ? _color : valueFont.color,
       alignItems: "center",
-      justifyContent: alignToJustify(valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
-      textAlign: alignToTextAlign(valueAlign)
+      justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
+      textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : valueAlign)
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,
@@ -178,27 +228,29 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       display: "flex",
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
-      marginLeft: percentGap,
+      marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : percentGap,
+      flexShrink: isTopBottomAdaptive ? 0 : undefined,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
       color: percentSameColor ? _color : percentFont.color,
       alignItems: "center",
-      justifyContent: alignToJustify(percentAlign),
-      textAlign: alignToTextAlign(percentAlign)
+      justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : percentAlign),
+      textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : percentAlign)
     })
-  }, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index //渲染网格布局新增的各列
-  ) {
+  }, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index) {
     var _fieldColumnKeys, _item$fieldsColumnInd2, _item$align, _item$align2, _item$translate$x, _item$translate2, _item$translate$y, _item$translate3, _item$suffix, _item$suffix2, _item$suffix$translat, _item$suffix$translat2, _item$suffix$translat3, _item$suffix$translat4;
     return /*#__PURE__*/React.createElement("span", {
       key: (_fieldColumnKeys = fieldColumnKeys[(_item$fieldsColumnInd2 = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd2 !== void 0 ? _item$fieldsColumnInd2 : index]) !== null && _fieldColumnKeys !== void 0 ? _fieldColumnKeys : index,
       style: _objectSpread(_objectSpread({
         display: "flex",
         boxSizing: "border-box",
-        width: "100%",
+        width: isTopBottomAdaptive ? "auto" : "100%",
         minWidth: 0,
+        flexShrink: isTopBottomAdaptive ? 0 : undefined,
         alignItems: "center",
-        justifyContent: alignToJustify((_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
-        textAlign: alignToTextAlign((_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
-        overflow: "visible"
+        justifyContent: alignToJustify(isTopBottomAdaptive ? "left" : (_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
+        textAlign: alignToTextAlign(isTopBottomAdaptive ? "left" : (_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
+        overflow: isSideAdaptive || isTopBottomAdaptive ? "hidden" : "visible",
+        whiteSpace: "nowrap"
       }, (0, _utils.getFontStyle)(item.font)), {}, {
         color: item.sameColor ? _color : item.font.color
       })

package/lib/utils/legendPlacement.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseLegendAlignment = exports.getPieAdaptiveMarginPreset = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+/**
+ * 解析图例 layout.alignment（如 "center top"、"right top"）
+ * 格式：{水平对齐} {位置}，位置为 top | right | left | bottom
+ */
+var parseLegendAlignment = exports.parseLegendAlignment = function parseLegendAlignment() {
+  var alignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "right center";
+  var _alignment$split = alignment.split(" "),
+    _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
+    _alignment = _alignment$split2[0],
+    position = _alignment$split2[1];
+  var isCenterTopOrBottom = (position === "top" || position === "bottom") && _alignment === "center";
+  var isSidePlacement = position === "left" || position === "right" || (position === "top" || position === "bottom") && _alignment !== "center";
+  return {
+    alignment: _alignment,
+    position: position,
+    isCenterTopOrBottom: isCenterTopOrBottom,
+    isSidePlacement: isSidePlacement
+  };
+};
+var getPieAdaptiveMarginPreset = exports.getPieAdaptiveMarginPreset = function getPieAdaptiveMarginPreset(show, alignment, presets) {
+  if (!show) return presets.hidden;
+  var _parseLegendAlignment = parseLegendAlignment(alignment),
+    mainAlign = _parseLegendAlignment.alignment,
+    position = _parseLegendAlignment.position,
+    isCenterTopOrBottom = _parseLegendAlignment.isCenterTopOrBottom;
+  if (isCenterTopOrBottom) return presets[position];
+  if (position === "left" || mainAlign === "left") return presets.left;
+  return presets.right;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.14",
+  "version": "1.10.16",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Chart.js

@@ -12,7 +12,6 @@ import React, {
 } from "react";
 import { chartContext } from "../context";
 import { PieChart, CartesianChart } from ".";
-import { group } from "d3v7";
 
 const getCallbackData = (action, callbacks, data) => {
   const callbackData = {};
@@ -32,7 +31,6 @@ const Chart = memo(
     type,
     config,
     config: {
-      axes,
       chart: {
         margin: { marginRight, marginLeft, marginBottom, marginTop },
       },
@@ -42,6 +40,7 @@ const Chart = memo(
     onRelative,
     emit,
     emitEvent,
+    updateConfig,
     ...props
   }) => {
     const { width, height } = props;
@@ -100,8 +99,17 @@ const Chart = memo(
         triggerOnRelative,
         svg,
         onEmit,
+        updateConfig,
       }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit],
+      [
+        id,
+        chartWidth,
+        chartHeight,
+        triggerOnRelative,
+        svg,
+        onEmit,
+        updateConfig,
+      ],
     );
 
     useEffect(() => {