evui 3.4.116 → 3.4.118

package/dist/evui.umd.js

@@ -11180,7 +11180,7 @@ module.exports = exports;
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.116\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.118\"}");
 
 /***/ }),
 
@@ -38826,7 +38826,21 @@ var modules = {
         } else {
           seriesIDs.forEach(function (seriesID) {
             var series = _this.seriesList[seriesID];
-            var sData = data[seriesID];
+            var hasPassingValueInData = data[seriesID].some(function (item) {
+              return item === series.passingValue;
+            });
+            series.hasPassingValueInData = hasPassingValueInData;
+            var sData = data[seriesID].map(function (item) {
+              if (series.interpolation === 'zero' && !item) {
+                return 0;
+              }
+
+              if (item === series.passingValue) {
+                return null;
+              }
+
+              return item;
+            });
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex && !series.isOverlapping) {
@@ -39220,7 +39234,9 @@ var modules = {
    * @param {array}   bsIds   stacked base data ID List
    * @param {number}  sIdx    series ordered index
    *
-   * @returns {array} data for each series
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
   addSeriesStackDS: function addSeriesStackDS(data, label, bsIds) {
     var _this4 = this;
@@ -39272,8 +39288,7 @@ var modules = {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
-            gdata = null;
-            bdata = 0;
+            gdata = odata;
           }
         } else {
           bdata = 0;
@@ -39292,7 +39307,9 @@ var modules = {
    * @param {object}  label   chart label
    * @param {boolean}  isBase   is Base(bottommost) series at stack chart
    *
-   * @returns {array} data for each series
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
   addSeriesDS: function addSeriesDS(data, label, isBase) {
     var _this$seriesList$Obje,
@@ -39369,7 +39386,10 @@ var modules = {
    * @param {object}  ldata    label data (x-axis value for vertical chart)
    * @param {object}  odata    original data (without stacked value)
    * @param {object}  bdata    base data (stacked value)
-    * @returns {object} data for each graph point
+   *
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint} data for each graph point
    */
   addData: function addData(gdata, ldata) {
     var _gdataColor;
@@ -39945,12 +39965,18 @@ var modules = {
     return result;
   },
 
+  /**
+   * @typedef {Object} LabelInfoResult
+   * @property {number} labelIndex - 선택된 라벨의 인덱스
+   * @property {object} hitInfo - 해당 위치에서의 히트 정보 (getItemByPosition 반환값)
+   */
+
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y
    * @param {string | null}  targetAxis    target Axis Location ('xAxis', 'yAxis' , null)
    *
-   * @returns {object} clicked label information
+   * @returns {LabelInfoResult} clicked label information
    */
   getLabelInfoByPosition: function getLabelInfoByPosition(offset, targetAxis) {
     var _Object$values$sort$, _Object$values$sort$2, _scrollbarOpt, _scale, _scale$labels, _scale3, _scale3$labels;
@@ -40057,11 +40083,14 @@ var modules = {
 
   /**
    * Get current mouse target label value in label array or calculated using mouse position
+   *
+   * @typedef {import('./index').MouseLabelValue} MouseLabelValue
+   *
    * @param {string}   targetAxis          target Axis Location ('xAxis', 'yAxis')
    * @param {array}  offset    return value from getMousePosition()
    * @param {number}  labelIndex
    *
-   * @returns {object} current mouse target label value
+   * @returns {MouseLabelValue} current mouse target label value
    */
   getCurMouseLabelVal: function getCurMouseLabelVal(targetAxis, offset, labelIndex) {
     var _this9 = this;
@@ -41091,6 +41120,57 @@ var defaultsDeep = _baseRest(function(args) {
 
 /* harmony default export */ var lodash_es_defaultsDeep = (defaultsDeep);
 
+// CONCATENATED MODULE: ./node_modules/lodash-es/isNil.js
+/**
+ * Checks if `value` is `null` or `undefined`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
+ * @example
+ *
+ * _.isNil(null);
+ * // => true
+ *
+ * _.isNil(void 0);
+ * // => true
+ *
+ * _.isNil(NaN);
+ * // => false
+ */
+function isNil(value) {
+  return value == null;
+}
+
+/* harmony default export */ var lodash_es_isNil = (isNil);
+
+// CONCATENATED MODULE: ./node_modules/lodash-es/isUndefined.js
+/**
+ * Checks if `value` is `undefined`.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`.
+ * @example
+ *
+ * _.isUndefined(void 0);
+ * // => true
+ *
+ * _.isUndefined(null);
+ * // => false
+ */
+function isUndefined(value) {
+  return value === undefined;
+}
+
+/* harmony default export */ var lodash_es_isUndefined = (isUndefined);
+
 // CONCATENATED MODULE: ./src/components/chart/helpers/helpers.constant.js
 var AXIS_UNITS = {
   x: {
@@ -41138,7 +41218,8 @@ var LINE_OPTION = {
   fill: false,
   fillOpacity: 0.4,
   showLegend: true,
-  passingValue: null
+  passingValue: null,
+  interpolation: 'none'
 };
 var BAR_OPTION = {
   show: true,
@@ -41325,13 +41406,13 @@ var TIME_INTERVALS = {
 /* harmony default export */ var helpers_canvas = ({
   /**
    * Calculate X position
-   * @param {any}    value         graph value
+   * @param {number|null|undefined}    value         graph value
    * @param {number} min           min value
    * @param {number} max           max value
    * @param {number} area          height for axis
    * @param {number} startPoint    startPoint
    *
-   * @returns {any} position
+   * @returns {number|null} position
    */
   calculateX: function calculateX(value, min, max, area) {
     var startPoint = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -41371,13 +41452,13 @@ var TIME_INTERVALS = {
 
   /**
    * Calculate Y position
-   * @param {any}    value         graph value
+   * @param {number|null|undefined}    value         graph value
    * @param {number} min           min value
    * @param {number} max           max value
    * @param {number} area          height for axis
    * @param {number} startPoint    startPoint
    *
-   * @returns {any} position
+   * @returns {number|null} position
    */
   calculateY: function calculateY(value, min, max, area) {
     var startPoint = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -41625,7 +41706,6 @@ var TIME_INTERVALS = {
 
 
 
-
 var element_line_Line = /*#__PURE__*/function () {
   function Line(sId, opt, sIdx) {
     var _this = this;
@@ -41662,6 +41742,8 @@ var element_line_Line = /*#__PURE__*/function () {
         lineWidth: 2
       }
     };
+    /** @type {import('../model/index').ChartSeriesDataPoint[]} */
+
     this.data = [];
     this.beforeMouseXp = 0;
     this.beforeMouseYp = 0;
@@ -41669,17 +41751,33 @@ var element_line_Line = /*#__PURE__*/function () {
     this.size = {
       comboOffset: 0
     };
-    this.usePassingValue = !!this.passingValue;
   }
-  /**
-   * Draw series data
-   * @param {object} param     object for drawing series data
-   *
-   * @returns {undefined}
-   */
-
 
   _createClass(Line, [{
+    key: "useLinearInterpolation",
+    value: function useLinearInterpolation() {
+      return this.interpolation === 'linear' || this.interpolation === 'none' && !!this.passingValue && this.hasPassingValueInData;
+    }
+    /**
+     * @typedef {Object} LineDrawParam
+     * @property {CanvasRenderingContext2D} ctx - 캔버스 렌더링 컨텍스트
+     * @property {object} chartRect - 차트 영역 정보
+     * @property {object} labelOffset - 라벨 오프셋 정보
+     * @property {object} axesSteps - 축 스텝 정보
+     * @property {object} [selectLabel] - 선택된 라벨 정보
+     * @property {object} [selectSeries] - 선택된 시리즈 정보
+     * @property {object} [legendHitInfo] - 범례 히트 정보
+     * @property {boolean} [isBrush] - 브러시 사용 여부
+     */
+
+    /**
+     * Draw series data
+     * @param {LineDrawParam} param     object for drawing series data
+     *
+     * @returns {undefined}
+     */
+
+  }, {
     key: "draw",
     value: function draw(param) {
       var _selectLabel$selected,
@@ -41742,8 +41840,7 @@ var element_line_Line = /*#__PURE__*/function () {
       }
 
       var endPoint = chartRect.y2 - labelOffset.bottom;
-      var x;
-      var y;
+      var isLinearInterpolation = this.useLinearInterpolation();
       var barAreaByCombo = 0;
       var minmaxX = axesSteps.x[this.xAxisIndex];
       var minmaxY = axesSteps.y[this.yAxisIndex];
@@ -41768,51 +41865,40 @@ var element_line_Line = /*#__PURE__*/function () {
       }; // draw line
 
 
-      var needCutoff = false;
-      this.data.reduce(function (prev, curr) {
-        x = getXPos(curr.x);
-        y = getYPos(curr.y);
+      var prevValid;
+      this.data.forEach(function (curr) {
+        var _prevValid, _prevValid2;
 
-        if (x !== null) {
-          x += helpers_util.aliasPixel(x);
-        }
+        var x = getXPos(curr.x);
+        var y = getYPos(curr.y);
 
-        if (_this2.usePassingValue) {
-          if (curr.o === _this2.passingValue) {
-            y = getYPos(prev.y);
+        if (_this2.isExistGrp && isLinearInterpolation && curr.o === null) {
+          var _curr$b;
 
-            if (prev.o === null) {
-              needCutoff = true;
-            }
+          y = getYPos((_curr$b = curr.b) !== null && _curr$b !== void 0 ? _curr$b : 0);
+        }
 
-            if (_this2.isExistGrp && !needCutoff) {
-              var _curr$b;
+        if (x !== null) {
+          x += helpers_util.aliasPixel(x);
+        }
 
-              y = getYPos((_curr$b = curr.b) !== null && _curr$b !== void 0 ? _curr$b : 0);
-              ctx.lineTo(x, y);
-            }
+        curr.xp = x;
+        curr.yp = y;
 
-            curr.xp = x;
-            curr.yp = y;
-            return curr;
+        if (isLinearInterpolation && curr.o === null) {
+          if (!_this2.isExistGrp) {
+            return;
           }
         }
 
-        var isNullValue = helpers_util.isNullOrUndefined(prev.o) || helpers_util.isNullOrUndefined(curr.o) || helpers_util.isNullOrUndefined(curr.x) || helpers_util.isNullOrUndefined(curr.y);
-
-        if (isNullValue || needCutoff) {
+        if (lodash_es_isNil((_prevValid = prevValid) === null || _prevValid === void 0 ? void 0 : _prevValid.y) && !_this2.isExistGrp || !isLinearInterpolation && (lodash_es_isNil((_prevValid2 = prevValid) === null || _prevValid2 === void 0 ? void 0 : _prevValid2.y) || lodash_es_isNil(curr.o))) {
           ctx.moveTo(x, y);
-          needCutoff = false;
         } else {
           ctx.lineTo(x, y);
         }
 
-        curr.xp = x; // eslint-disable-line
-
-        curr.yp = y; // eslint-disable-line
-
-        return curr;
-      }, this.data[0]);
+        prevValid = curr;
+      });
       ctx.stroke();
 
       if (this.segments) {
@@ -41852,20 +41938,22 @@ var element_line_Line = /*#__PURE__*/function () {
         var valueArray = this.data.map(function (item) {
           return item === null || item === void 0 ? void 0 : item.o;
         });
+        /** @type {Array<[number, number]>} */
+
         var needFillDataIndexList = [];
 
         for (var i = 0; i < valueArray.length + 1; i++) {
-          if (helpers_util.isNullOrUndefined(valueArray[i])) {
+          if (isLinearInterpolation && lodash_es_isUndefined(valueArray[i]) || !isLinearInterpolation && lodash_es_isNil(valueArray[i])) {
             if (start !== null && end !== null) {
               var temp = valueArray.slice(start, i);
               var lastNormalValueIndex = temp.findLastIndex(function (item) {
-                return item !== helpers_util.isNullOrUndefined(item) && item !== _this2.passingValue;
+                return !lodash_es_isNil(item) && item !== null;
               });
               needFillDataIndexList.push([start, start + lastNormalValueIndex]);
               start = null;
               end = null;
             }
-          } else if (valueArray[i] === this.passingValue) {
+          } else if (isLinearInterpolation && valueArray[i] === null) {
             end = i;
           } else {
             start = start === null ? i : start;
@@ -41895,7 +41983,7 @@ var element_line_Line = /*#__PURE__*/function () {
 
             if (ix === startIndex) {
               ctx.moveTo(currData.xp, currData.yp);
-            } else if (_this2.isExistGrp || _this2.passingValue !== currData.o) {
+            } else if (_this2.isExistGrp || currData.o !== null) {
               ctx.lineTo(currData.xp, currData.yp);
             }
 
@@ -41921,14 +42009,19 @@ var element_line_Line = /*#__PURE__*/function () {
         ctx.strokeStyle = helpers_util.colorStringToRgba(mainColor, mainColorOpacity);
         var focusStyle = helpers_util.colorStringToRgba(pointFillColor, 1);
         var blurStyle = helpers_util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+        var isLinearSingle = this.interpolation === 'linear' && this.data.filter(function (item) {
+          return item.o !== null;
+        }).length === 1;
         this.data.forEach(function (curr, ix) {
           var _this2$data, _this2$data2;
 
-          if (curr.xp === null || curr.yp === null || curr.o === _this2.passingValue) {
+          if (curr.xp === null || curr.yp === null || curr.o === null) {
             return;
           }
 
-          var isSingle = helpers_util.isNullOrUndefined((_this2$data = _this2.data[ix - 1]) === null || _this2$data === void 0 ? void 0 : _this2$data.o) && helpers_util.isNullOrUndefined((_this2$data2 = _this2.data[ix + 1]) === null || _this2$data2 === void 0 ? void 0 : _this2$data2.o);
+          var prevData = (_this2$data = _this2.data[ix - 1]) === null || _this2$data === void 0 ? void 0 : _this2$data.o;
+          var nextData = (_this2$data2 = _this2.data[ix + 1]) === null || _this2$data2 === void 0 ? void 0 : _this2$data2.o;
+          var isSingle = !isLinearInterpolation && lodash_es_isNil(prevData) && lodash_es_isNil(nextData) || isLinearSingle;
           var isSelectedLabel = selectedLabelIndexList.includes(ix);
 
           if (_this2.point || isSingle || isSelectedLabel) {
@@ -41959,7 +42052,7 @@ var element_line_Line = /*#__PURE__*/function () {
           o = gdata.o;
       ctx.save();
 
-      if (xp !== null && yp !== null && o !== this.passingValue && this.pointHighlight) {
+      if (xp !== null && yp !== null && o !== null && this.pointHighlight) {
         ctx.strokeStyle = helpers_util.colorStringToRgba(this.color, 0);
         ctx.fillStyle = helpers_util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity);
         helpers_canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, xp, yp);
@@ -41997,6 +42090,7 @@ var element_line_Line = /*#__PURE__*/function () {
         return !helpers_util.isNullOrUndefined(data.x);
       });
       var SPARE_XP = 0.5;
+      var isLinearInterpolation = this.useLinearInterpolation();
 
       if (gdata !== null && gdata !== void 0 && gdata.length) {
         if (typeof dataIndex === 'number' && this.show) {
@@ -42080,7 +42174,7 @@ var element_line_Line = /*#__PURE__*/function () {
         }
       }
 
-      if (this.usePassingValue && (item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.o) === this.passingValue) {
+      if (isLinearInterpolation && (item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.o) === null) {
         item.data = null;
       }
 
@@ -42350,16 +42444,29 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
     value: function defaultScatterDraw(param) {
       var _this2 = this;
 
-      var ctx = param.ctx;
+      var ctx = param.ctx,
+          axesSteps = param.axesSteps,
+          duple = param.duple,
+          legendHitInfo = param.legendHitInfo;
+      var minmaxY = axesSteps.y[this.yAxisIndex];
       this.data.forEach(function (item, idx) {
-        _this2.calcItem(item, param);
+        var shouldDraw = legendHitInfo ? legendHitInfo.sId === _this2.sId : !duple.has("".concat(item.x).concat(item.y));
+
+        if (shouldDraw) {
+          if (!duple.has("".concat(item.x).concat(item.y))) {
+            duple.add("".concat(item.x).concat(item.y));
+          }
 
-        if (item.xp !== null && item.yp !== null) {
-          var color = item.dataColor || _this2.color;
-          ctx.strokeStyle = helpers_util.colorStringToRgba(color, _this2.getOpacity(param, color, idx));
-          var pointFillColor = item.dataColor || _this2.pointFill;
-          ctx.fillStyle = helpers_util.colorStringToRgba(pointFillColor, _this2.getOpacity(param, pointFillColor, idx));
-          helpers_canvas.drawPoint(ctx, _this2.pointStyle, _this2.pointSize, item.xp, item.yp);
+          _this2.calcItem(item, param);
+
+          if (item.xp !== null && item.yp !== null) {
+            var overflowColor = item.y > minmaxY.graphMax && _this2.overflowColor;
+            var color = overflowColor || item.dataColor || _this2.color;
+            ctx.strokeStyle = helpers_util.colorStringToRgba(color, _this2.getOpacity(param, color, idx));
+            var pointFillColor = item.dataColor || _this2.pointFill;
+            ctx.fillStyle = helpers_util.colorStringToRgba(pointFillColor, _this2.getOpacity(param, pointFillColor, idx));
+            helpers_canvas.drawPoint(ctx, _this2.pointStyle, _this2.pointSize, item.xp, item.yp);
+          }
         }
       });
     }
@@ -42375,7 +42482,8 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
     value: function realTimeScatterDraw(param) {
       var ctx = param.ctx,
           axesSteps = param.axesSteps,
-          duple = param.duple;
+          duple = param.duple,
+          legendHitInfo = param.legendHitInfo;
       var minmaxY = axesSteps.y[this.yAxisIndex];
       var pointStyle = typeof this.pointStyle === 'string' ? this.pointStyle : this.pointStyle.value;
       var pointSize = typeof this.pointSize === 'number' ? this.pointSize : this.pointSize.value;
@@ -42387,17 +42495,23 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
           var _this$data$this$sId2, _this$data$this$sId2$, _this$data$this$sId3, _this$data$this$sId3$;
 
           var item = (_this$data$this$sId3 = this.data[this.sId]) === null || _this$data$this$sId3 === void 0 ? void 0 : (_this$data$this$sId3$ = _this$data$this$sId3.dataGroup[i]) === null || _this$data$this$sId3$ === void 0 ? void 0 : _this$data$this$sId3$.data[j];
+          var shouldDraw = legendHitInfo ? legendHitInfo.sId === this.sId : !duple.has("".concat(item.x).concat(item.y));
+
+          if (shouldDraw) {
+            if (!duple.has("".concat(item.x).concat(item.y))) {
+              duple.add("".concat(item.x).concat(item.y));
+            }
 
-          if (!duple.has("".concat(item.x).concat(item.y))) {
-            duple.add("".concat(item.x).concat(item.y));
             this.calcItem(item, param);
 
             if (item.xp !== null && item.yp !== null) {
               var overflowColor = item.y > minmaxY.graphMax && this.overflowColor;
-              var color = overflowColor || item.color || this.color;
-              ctx.strokeStyle = color;
-              var pointFillColor = overflowColor || item.color || this.pointFill || this.color;
-              ctx.fillStyle = pointFillColor;
+              var baseStrokeColor = overflowColor || item.color || this.color;
+              var baseFillColor = overflowColor || item.color || this.pointFill || this.color;
+              var strokeOpacity = this.getOpacity(param, baseStrokeColor, j);
+              var fillOpacity = this.getOpacity(param, baseFillColor, j);
+              ctx.strokeStyle = helpers_util.colorStringToRgba(baseStrokeColor, strokeOpacity);
+              ctx.fillStyle = helpers_util.colorStringToRgba(baseFillColor, fillOpacity);
               helpers_canvas.drawPoint(ctx, pointStyle, pointSize, item.xp, item.yp);
             }
           }
@@ -44752,6 +44866,47 @@ var model_series_modules = {
   Store: model_store,
   Series: model_series
 });
+/**
+ * @typedef {Object} ChartDOMSize
+ * @property {number} width - 차트 DOM의 너비
+ * @property {number} height - 차트 DOM의 높이
+ */
+
+/**
+ * @typedef {Object} ChartRect
+ * @property {number} x1 - 차트 영역의 시작 X 좌표
+ * @property {number} x2 - 차트 영역의 끝 X 좌표
+ * @property {number} y1 - 차트 영역의 시작 Y 좌표
+ * @property {number} y2 - 차트 영역의 끝 Y 좌표
+ * @property {number} chartWidth - 실제 차트 그리기 영역의 너비
+ * @property {number} chartHeight - 실제 차트 그리기 영역의 높이
+ * @property {number} width - 전체 차트 컨테이너의 너비
+ * @property {number} height - 전체 차트 컨테이너의 높이
+ */
+
+/**
+* @typedef {Object} MouseLabelValue
+* @property {string|number} labelVal - 마우스 위치에 해당하는 라벨 값
+* @property {number} labelIdx - 라벨 인덱스 (없으면 -1)
+*/
+
+/**
+* @typedef {Object} ChartSeriesDataPoint
+* @property {number|null} x - x축 값 또는 라벨
+* @property {number|null} y - y축 값 또는 데이터 값
+* @property {number|null} o - 원본 데이터 값
+* @property {number|null} b - 스택형 차트의 베이스 값
+* @property {number|null} xp - x좌표 위치(픽셀 등)
+* @property {number|null} yp - y좌표 위치(픽셀 등)
+* @property {number|null} w - 너비
+* @property {number|null} h - 높이
+* @property {string|null} dataColor - 데이터 색상
+* @property {string|null} dataTextColor - 텍스트 색상
+*/
+
+/**
+ * @typedef {'none' | 'linear' | 'zero'} InterpolationType
+ */
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.js
 
 
@@ -47040,7 +47195,9 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   updateStartEndRowIndex: function updateStartEndRowIndex() {
-    var index = Math.max(Math.floor(this.legendBoxDOM.scrollTop / this.legendItemHeight), 0);
+    var _this$legendBoxDOM;
+
+    var index = Math.max(Math.floor(((_this$legendBoxDOM = this.legendBoxDOM) === null || _this$legendBoxDOM === void 0 ? void 0 : _this$legendBoxDOM.scrollTop) / this.legendItemHeight), 0);
     this.startRowIndex = Math.min(index, Math.max(this.totalRowCount - this.visibleRowCount, 0));
     this.endRowIndex = this.startRowIndex + this.visibleRowCount + 1;
   },
@@ -47383,26 +47540,14 @@ var plugins_legend_modules = {
       });
     };
     /**
-     * callback for legendBoxDOM hovering
+     * callback for mouseleave event on legendBoxDOM
      *
      * @returns {undefined}
      */
 
 
-    this.onLegendBoxOver = function (e) {
-      var _targetDOM$series;
-
-      var targetDOM = _this8.getContainerDOM(e);
-
-      if (!targetDOM) {
-        return;
-      }
-
-      var targetId = targetDOM === null || targetDOM === void 0 ? void 0 : (_targetDOM$series = targetDOM.series) === null || _targetDOM$series === void 0 ? void 0 : _targetDOM$series.sId;
-      var legendHitInfo = {
-        sId: targetId,
-        type: _this8.options.type
-      };
+    this.onLegendBoxLeave = function () {
+      _this8.legendHover = null;
 
       _this8.update({
         updateSeries: false,
@@ -47411,18 +47556,35 @@ var plugins_legend_modules = {
           keepDomain: false
         },
         hitInfo: {
-          legend: legendHitInfo
+          legend: null
         }
       });
     };
     /**
-     * callback for mouseleave event on legendBoxDOM
+     * callback for legendBoxDOM hovering
      *
      * @returns {undefined}
      */
 
 
-    this.onLegendBoxLeave = function () {
+    this.onLegendBoxOver = function (e) {
+      var _targetDOM$series;
+
+      var targetDOM = _this8.getContainerDOM(e);
+
+      if (!targetDOM) {
+        _this8.onLegendBoxLeave();
+
+        return;
+      }
+
+      var targetId = targetDOM === null || targetDOM === void 0 ? void 0 : (_targetDOM$series = targetDOM.series) === null || _targetDOM$series === void 0 ? void 0 : _targetDOM$series.sId;
+      var legendHitInfo = {
+        sId: targetId,
+        type: _this8.options.type
+      };
+      _this8.legendHover = legendHitInfo;
+
       _this8.update({
         updateSeries: false,
         updateSelTip: {
@@ -47430,7 +47592,7 @@ var plugins_legend_modules = {
           keepDomain: false
         },
         hitInfo: {
-          legend: null
+          legend: legendHitInfo
         }
       });
     };
@@ -47527,6 +47689,28 @@ var plugins_legend_modules = {
         }
       });
     };
+    /**
+     * callback for mouseleave event on legendBoxDOM
+     *
+     * @returns {undefined}
+     */
+
+
+    this.onLegendBoxLeave = function () {
+      _this9.legendHover = null;
+      var series = Object.values(_this9.seriesList)[0];
+      series.colorState.forEach(function (item) {
+        item.state = 'normal';
+      });
+
+      _this9.update({
+        updateSeries: false,
+        updateSelTip: {
+          update: false,
+          keepDomain: false
+        }
+      });
+    };
     /**
      * callback for legendBoxDOM hovering
      *
@@ -47542,6 +47726,8 @@ var plugins_legend_modules = {
       var targetDOM = _this9.getContainerDOM(e);
 
       if (!targetDOM) {
+        _this9.onLegendBoxLeave();
+
         return;
       }
 
@@ -47550,6 +47736,7 @@ var plugins_legend_modules = {
         sId: targetId,
         type: _this9.options.type
       };
+      _this9.legendHover = legendHitInfo;
       series.colorState.forEach(function (colorItem) {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
       });
@@ -47565,27 +47752,6 @@ var plugins_legend_modules = {
         }
       });
     };
-    /**
-     * callback for mouseleave event on legendBoxDOM
-     *
-     * @returns {undefined}
-     */
-
-
-    this.onLegendBoxLeave = function () {
-      var series = Object.values(_this9.seriesList)[0];
-      series.colorState.forEach(function (item) {
-        item.state = 'normal';
-      });
-
-      _this9.update({
-        updateSeries: false,
-        updateSelTip: {
-          update: false,
-          keepDomain: false
-        }
-      });
-    };
 
     this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
     this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
@@ -47667,12 +47833,12 @@ var plugins_legend_modules = {
     var _this$options2,
         _this$options2$legend,
         _this$options2$legend2,
-        _this$legendBoxDOM,
+        _this$legendBoxDOM2,
         _this11 = this;
 
     var columns = (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$legend = _this$options2.legend) === null || _this$options2$legend === void 0 ? void 0 : (_this$options2$legend2 = _this$options2$legend.table) === null || _this$options2$legend2 === void 0 ? void 0 : _this$options2$legend2.columns;
     var aggregations = this.getAggregations();
-    var rowDOMList = (_this$legendBoxDOM = this.legendBoxDOM) === null || _this$legendBoxDOM === void 0 ? void 0 : _this$legendBoxDOM.getElementsByClassName('ev-chart-legend--table__row');
+    var rowDOMList = (_this$legendBoxDOM2 = this.legendBoxDOM) === null || _this$legendBoxDOM2 === void 0 ? void 0 : _this$legendBoxDOM2.getElementsByClassName('ev-chart-legend--table__row');
     rowDOMList.forEach(function (row) {
       var valueDOMList = row === null || row === void 0 ? void 0 : row.getElementsByClassName('ev-chart-legend--table__value');
       valueDOMList.forEach(function (dom) {
@@ -47964,13 +48130,13 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   setLegendPosition: function setLegendPosition() {
-    var _opt$legend, _this$wrapperDOM, _this$legendDOM, _this$legendBoxDOM2, _this$resizeDOM, _opt$title, _opt$title2, _opt$legend2, _opt$legend$padding, _opt$legend3;
+    var _opt$legend, _this$wrapperDOM, _this$legendDOM, _this$legendBoxDOM3, _this$resizeDOM, _opt$title, _opt$title2, _opt$legend2, _opt$legend$padding, _opt$legend3;
 
     var opt = this.options;
     var position = opt === null || opt === void 0 ? void 0 : (_opt$legend = opt.legend) === null || _opt$legend === void 0 ? void 0 : _opt$legend.position;
     var wrapperStyle = (_this$wrapperDOM = this.wrapperDOM) === null || _this$wrapperDOM === void 0 ? void 0 : _this$wrapperDOM.style;
     var legendStyle = (_this$legendDOM = this.legendDOM) === null || _this$legendDOM === void 0 ? void 0 : _this$legendDOM.style;
-    var boxStyle = (_this$legendBoxDOM2 = this.legendBoxDOM) === null || _this$legendBoxDOM2 === void 0 ? void 0 : _this$legendBoxDOM2.style;
+    var boxStyle = (_this$legendBoxDOM3 = this.legendBoxDOM) === null || _this$legendBoxDOM3 === void 0 ? void 0 : _this$legendBoxDOM3.style;
     var resizeStyle = (_this$resizeDOM = this.resizeDOM) === null || _this$resizeDOM === void 0 ? void 0 : _this$resizeDOM.style;
     var chartRect;
     var legendPad;
@@ -48549,6 +48715,11 @@ var plugins_legend_gradient_modules = {
         return;
       }
 
+      _this2.legendHover = {
+        sId: 'gradient',
+        type: _this2.options.type
+      };
+
       _this2.update({
         updateSeries: false,
         updateSelTip: {
@@ -48566,6 +48737,7 @@ var plugins_legend_gradient_modules = {
 
     this.onLegendBoxLeave = function () {
       _this2.legendDragInfo.dragging = false;
+      _this2.legendHover = null;
 
       _this2.clearOverlay();
 
@@ -51238,7 +51410,7 @@ var plugins_interaction_modules = {
         if (item !== null && item !== void 0 && item.data) {
           var gdata = void 0;
 
-          if (item.data.o === null) {
+          if (item.data.o === null && series.interpolation !== 'zero') {
             if (!series.isExistGrp) {
               gdata = isHorizontal ? item.data.x : item.data.y;
             }
@@ -53989,6 +54161,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     };
     this.defaultSelectItemInfo = defaultSelectItemInfo;
     this.defaultSelectInfo = defaultSelectInfo;
+    this.legendHover = null;
   }
   /**
    * Initialize chart object
@@ -54573,8 +54746,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Get chart DOM size and set canvas size
+     * @typedef {import('./model/index').ChartDOMSize} ChartDOMSize
      *
-     * @returns {object} chart size information
+     * @returns {ChartDOMSize} chart size information
      */
 
   }, {
@@ -54594,8 +54768,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Calculate chart size
+     * @typedef {import('./model/index').ChartRect} ChartRect
      *
-     * @returns {object} chart size information
+     * @returns {ChartRect} chart size information
      */
 
   }, {
@@ -54800,7 +54975,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(updateInfo) {
-      var _this$updateScrollbar, _this$options$realTim2;
+      var _this$updateScrollbar, _this$options$realTim2, _renderHitInfo, _this$legendHover;
 
       var options = this.options;
       var data = this.data.data;
@@ -54926,7 +55101,15 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesX = this.createAxes('x', options.axesX);
       this.axesY = this.createAxes('y', options.axesY);
       this.initDefaultSelectInfo();
-      this.render(updateInfo === null || updateInfo === void 0 ? void 0 : updateInfo.hitInfo);
+      var renderHitInfo = updateInfo === null || updateInfo === void 0 ? void 0 : updateInfo.hitInfo;
+
+      if (!((_renderHitInfo = renderHitInfo) !== null && _renderHitInfo !== void 0 && _renderHitInfo.legend) && (_this$legendHover = this.legendHover) !== null && _this$legendHover !== void 0 && _this$legendHover.sId) {
+        renderHitInfo = _objectSpread2(_objectSpread2({}, renderHitInfo || {}), {}, {
+          legend: this.legendHover
+        });
+      }
+
+      this.render(renderHitInfo);
       var isDragMove = this.dragInfo && this.drawSelectionArea;
 
       if (isDragMove) {