evui 3.3.54 → 3.3.56

package/dist/evui.common.js

@@ -4314,7 +4314,7 @@ var update = add("5ac4a7d0", content, true, {"sourceMap":false,"shadowMode":fals
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
 exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
-exports.push([module.i, ".ev-chart-brush-wrapper,.ev-chart-wrapper{display:block;position:relative;width:100%;height:100%}.ev-chart-brush-container,.ev-chart-container{position:relative;overflow:hidden;width:100%;height:100%}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body{overflow-x:hidden;overflow-y:hidden}", ""]);
+exports.push([module.i, ".ev-chart-brush-wrapper,.ev-chart-wrapper{display:block;position:relative;width:100%;height:100%}.ev-chart-brush-container,.ev-chart-container{position:relative;overflow:hidden;width:100%;height:100%}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-custom__header,.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body,.ev-chart-tooltip .ev-chart-tooltip-custom{overflow-x:hidden;overflow-y:hidden}.ev-chart-tooltip .ev-chart-tooltip-custom__body{padding:8px 20px 8px 16px;overflow-x:hidden;overflow-y:hidden}.ev-chart-tooltip .ev-chart-tooltip-custom__body .row{display:flex;flex-direction:row;align-items:center}.ev-chart-tooltip .ev-chart-tooltip-custom__body .series-name{flex:auto}.ev-chart-tooltip .ev-chart-tooltip-custom__body .value{text-align:right}.ev-chart-tooltip .ev-chart-tooltip-custom__body .color-circle,.ev-chart-tooltip .ev-chart-tooltip-custom__body .color-rect{width:12px;height:12px;margin-right:16px}.ev-chart-tooltip .ev-chart-tooltip-custom__body .color-circle{border-radius:12px}.ev-chart-scrollbar{position:absolute;z-index:3}.ev-chart-scrollbar-container{position:relative;top:0;left:0;width:100%;height:100%}.ev-chart-scrollbar-thumb,.ev-chart-scrollbar-track{position:absolute}.ev-chart-scrollbar-thumb:hover{opacity:.7}.ev-chart-scrollbar-button{position:absolute;text-align:center}.ev-chart-scrollbar-button:hover{opacity:.5!important}.ev-chart-scrollbar-button-icon{display:none;margin:0 auto;font-size:12px}", ""]);
 // Exports
 module.exports = exports;
 
@@ -8045,7 +8045,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.54\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.56\"}");
 
 /***/ }),
 
@@ -15639,6 +15639,9 @@ function getPrecision(v) {
   var decimal = (v === null || v === void 0 ? void 0 : v.toString().split('.')[1]) || 0;
   return decimal ? decimal.length : 0;
 }
+function checkNullAndUndefined(value) {
+  return value === null || value === undefined;
+}
 // CONCATENATED MODULE: ./src/components/inputNumber/uses.js
 
 
@@ -32557,6 +32560,7 @@ var es_number_min_safe_integer = __webpack_require__("e6e1");
 
 
 
+
 /* harmony default export */ var helpers_util = ({
   /**
    * Transforming hex to rgb code
@@ -32899,6 +32903,17 @@ var es_number_min_safe_integer = __webpack_require__("e6e1");
    */
   checkSafeInteger: function checkSafeInteger(value) {
     return value <= Number.MAX_SAFE_INTEGER && value >= Number.MIN_SAFE_INTEGER;
+  },
+
+  /**
+   * Convert html(string) To Element
+   * @param htmlString
+   * @returns {ChildNode}
+   */
+  htmlToElement: function htmlToElement(htmlString) {
+    var template = document.createElement('template');
+    template.innerHTML = htmlString.trim();
+    return template.content.firstChild;
   }
 });
 // CONCATENATED MODULE: ./src/components/chart/model/model.store.js
@@ -33309,7 +33324,6 @@ var modules = {
   /**
    * Take data to create data for each series
    * @param {array} data data array for each series
-   * @param {object}  label   chart label
    *
    * @returns {array} data info added position and etc
    */
@@ -33910,7 +33924,7 @@ var modules = {
    * @returns {object} clicked label information
    */
   getLabelInfoByPosition: function getLabelInfoByPosition(offset, targetAxis) {
-    var _Object$values$sort$, _Object$values$sort$2, _scale, _scale$labels;
+    var _Object$values$sort$, _Object$values$sort$2, _scrollbarOpt, _scale, _scale$labels, _scale3, _scale3$labels;
 
     var _offset2 = _slicedToArray(offset, 2),
         x = _offset2[0],
@@ -33933,13 +33947,17 @@ var modules = {
         horizontal = _this$options.horizontal,
         selectLabel = _this$options.selectLabel;
     var scale;
+    var scrollbarOpt;
 
     if (targetAxis === 'xAxis') {
       scale = this.axesX[0];
+      scrollbarOpt = this.scrollbar.x;
     } else if (targetAxis === 'yAxis') {
       scale = this.axesY[0];
+      scrollbarOpt = this.scrollbar.y;
     } else {
       scale = horizontal ? this.axesY[0] : this.axesX[0];
+      scrollbarOpt = horizontal ? this.scrollbar.y : this.scrollbar.x;
     }
 
     var startPoint = aPos[scale.units.rectStart];
@@ -33947,11 +33965,41 @@ var modules = {
     var labelIndex;
     var hitInfo;
 
-    if ((_scale = scale) !== null && _scale !== void 0 && (_scale$labels = _scale.labels) !== null && _scale$labels !== void 0 && _scale$labels.length) {
-      var labelGap = (endPoint - startPoint) / scale.labels.length;
+    if ((_scrollbarOpt = scrollbarOpt) !== null && _scrollbarOpt !== void 0 && _scrollbarOpt.use && (_scale = scale) !== null && _scale !== void 0 && (_scale$labels = _scale.labels) !== null && _scale$labels !== void 0 && _scale$labels.length) {
+      var _scrollbarOpt2 = scrollbarOpt,
+          type = _scrollbarOpt2.type,
+          range = _scrollbarOpt2.range,
+          _scrollbarOpt2$interv = _scrollbarOpt2.interval,
+          interval = _scrollbarOpt2$interv === void 0 ? 1 : _scrollbarOpt2$interv;
+
+      var _ref14 = range !== null && range !== void 0 ? range : [0, scale.labels.length],
+          _ref15 = _slicedToArray(_ref14, 2),
+          min = _ref15[0],
+          max = _ref15[1];
+
+      var labelCount = Math.floor((+max - +min) / interval) + 1;
+      var labelGap = (endPoint - startPoint) / labelCount;
       var isYAxis = targetAxis === 'yAxis' || horizontal;
       var index = Math.floor(((isYAxis ? y : x) - startPoint) / labelGap);
-      labelIndex = scale.labels.length > index ? index : -1;
+
+      if (type === 'step') {
+        labelIndex = min + index;
+      } else {
+        var _scale2;
+
+        var minIndex = (_scale2 = scale) === null || _scale2 === void 0 ? void 0 : _scale2.labels.findIndex(function (label) {
+          return label === +min;
+        });
+        labelIndex = minIndex + index;
+      }
+    } else if ((_scale3 = scale) !== null && _scale3 !== void 0 && (_scale3$labels = _scale3.labels) !== null && _scale3$labels !== void 0 && _scale3$labels.length) {
+      var _labelGap = (endPoint - startPoint) / scale.labels.length;
+
+      var _isYAxis = targetAxis === 'yAxis' || horizontal;
+
+      var _index = Math.floor(((_isYAxis ? y : x) - startPoint) / _labelGap);
+
+      labelIndex = scale.labels.length > _index ? _index : -1;
     } else {
       var _hitInfo$maxIndex;
 
@@ -35038,6 +35086,17 @@ var AXIS_OPTION = {
     textAlign: 'right',
     fontStyle: 'normal',
     color: '#808080'
+  },
+  scrollbar: {
+    use: false,
+    width: 14,
+    height: 14,
+    background: '#F2F2F2',
+    showButton: true,
+    thumbStyle: {
+      background: '#929292',
+      radius: 0
+    }
   }
 };
 var PLOT_LINE_OPTION = {
@@ -36156,6 +36215,7 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
 
 
 
+
 var element_bar_Bar = /*#__PURE__*/function () {
   function Bar(sId, opt, sIdx, isHorizontal) {
     var _this = this;
@@ -36219,19 +36279,37 @@ var element_bar_Bar = /*#__PURE__*/function () {
       var y;
       var minmaxX = axesSteps.x[this.xAxisIndex];
       var minmaxY = axesSteps.y[this.yAxisIndex];
+      var totalCount = this.data.length;
+      var minIndex;
+      var maxIndex;
+
+      if (isHorizontal) {
+        var _ref = [minmaxY.minIndex, minmaxY.maxIndex];
+        minIndex = _ref[0];
+        maxIndex = _ref[1];
+      } else {
+        var _ref2 = [minmaxX.minIndex, minmaxX.maxIndex];
+        minIndex = _ref2[0];
+        maxIndex = _ref2[1];
+      }
+
+      if (truthyNumber(minIndex) && truthyNumber(maxIndex)) {
+        totalCount = maxIndex - minIndex + 1;
+      }
+
       var xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       var yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
       var xsp = chartRect.x1 + labelOffset.left;
       var ysp = chartRect.y2 - labelOffset.bottom;
       var dArea = isHorizontal ? yArea : xArea;
-      var cArea = dArea / (this.data.length || 1);
+      var cArea = dArea / (totalCount || 1);
       var cPad;
       var isUnableToDrawCategoryPadding = param.cPadRatio >= 1 || param.cPadRatio <= 0;
 
       if (isUnableToDrawCategoryPadding) {
         cPad = 2;
       } else {
-        cPad = Math.max(dArea * (param.cPadRatio / 2) / this.data.length, 2);
+        cPad = Math.max(dArea * (param.cPadRatio / 2) / totalCount, 2);
       }
 
       var bArea;
@@ -36254,17 +36332,24 @@ var element_bar_Bar = /*#__PURE__*/function () {
       this.chartRect = chartRect;
       this.labelOffset = labelOffset;
       this.borderRadius = param.borderRadius;
+      this.range = [minIndex, maxIndex];
       var categoryPoint = null;
       this.data.forEach(function (dataItem, index) {
-        var _param$selectLabel, _param$selectLabel$se, _param$selectLabel2, _param$selectLabel2$s;
+        var _param$selectLabel, _param$selectItem, _param$selectLabel$se, _param$selectLabel2, _param$selectLabel2$s, _param$selectItem$sel, _param$selectItem2;
 
         ctx.beginPath();
         var item = dataItem;
 
+        if (truthyNumber(minIndex) && index < minIndex) {
+          return;
+        } else if (truthyNumber(minIndex) && index > maxIndex) {
+          return;
+        }
+
         if (isHorizontal) {
-          categoryPoint = ysp - cArea * index - cPad;
+          categoryPoint = ysp - cArea * (index - (minIndex || 0)) - cPad;
         } else {
-          categoryPoint = xsp + cArea * index + cPad;
+          categoryPoint = xsp + cArea * (index - (minIndex || 0)) + cPad;
         }
 
         if (isHorizontal) {
@@ -36294,13 +36379,25 @@ var element_bar_Bar = /*#__PURE__*/function () {
         var barColor = item.dataColor || _this2.color;
         var legendHitInfo = param === null || param === void 0 ? void 0 : param.legendHitInfo;
         var selectLabelOption = param === null || param === void 0 ? void 0 : (_param$selectLabel = param.selectLabel) === null || _param$selectLabel === void 0 ? void 0 : _param$selectLabel.option;
+        var selectItemOption = param === null || param === void 0 ? void 0 : (_param$selectItem = param.selectItem) === null || _param$selectItem === void 0 ? void 0 : _param$selectItem.option;
         var selectedLabelList = (_param$selectLabel$se = param === null || param === void 0 ? void 0 : (_param$selectLabel2 = param.selectLabel) === null || _param$selectLabel2 === void 0 ? void 0 : (_param$selectLabel2$s = _param$selectLabel2.selected) === null || _param$selectLabel2$s === void 0 ? void 0 : _param$selectLabel2$s.dataIndex) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : [];
+
+        var _ref3 = (_param$selectItem$sel = param === null || param === void 0 ? void 0 : (_param$selectItem2 = param.selectItem) === null || _param$selectItem2 === void 0 ? void 0 : _param$selectItem2.selected) !== null && _param$selectItem$sel !== void 0 ? _param$selectItem$sel : {},
+            selectedItemDataIndex = _ref3.dataIndex,
+            selectedItemSeriesId = _ref3.seriesID;
+
         var isDownplay = false;
 
         if (legendHitInfo) {
           isDownplay = (legendHitInfo === null || legendHitInfo === void 0 ? void 0 : legendHitInfo.sId) !== _this2.sId;
         } else if (selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.use && selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.useSeriesOpacity) {
           isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
+        } else if (truthy(selectedItemDataIndex) && selectItemOption !== null && selectItemOption !== void 0 && selectItemOption.useSeriesOpacity) {
+          if (_this2.isExistGrp) {
+            isDownplay = selectedItemDataIndex !== index;
+          } else {
+            isDownplay = selectedItemDataIndex !== index || selectedItemSeriesId !== _this2.sId;
+          }
         }
 
         if (typeof barColor !== 'string') {
@@ -36445,8 +36542,18 @@ var element_bar_Bar = /*#__PURE__*/function () {
         color: this.color
       };
       var gdata = this.data;
+      var totalCount = gdata.length;
+
+      var _this$range = _slicedToArray(this.range, 2),
+          min = _this$range[0],
+          max = _this$range[1];
+
+      if (truthyNumber(min) && truthyNumber(max)) {
+        totalCount = max - min + 1;
+      }
+
       var s = 0;
-      var e = gdata.length - 1;
+      var e = totalCount - 1;
 
       while (s <= e) {
         var m = Math.floor((s + e) / 2);
@@ -36491,8 +36598,18 @@ var element_bar_Bar = /*#__PURE__*/function () {
         color: this.color
       };
       var gdata = this.data;
+      var totalCount = gdata.length;
+
+      var _this$range2 = _slicedToArray(this.range, 2),
+          min = _this$range2[0],
+          max = _this$range2[1];
+
+      if (truthyNumber(min) && truthyNumber(max)) {
+        totalCount = max - min + 1;
+      }
+
       var s = 0;
-      var e = gdata.length - 1;
+      var e = totalCount - 1;
 
       while (s <= e) {
         var m = Math.floor((s + e) / 2);
@@ -36530,11 +36647,11 @@ var element_bar_Bar = /*#__PURE__*/function () {
 
   }, {
     key: "drawValueLabels",
-    value: function drawValueLabels(_ref) {
-      var context = _ref.context,
-          data = _ref.data,
-          positions = _ref.positions,
-          isHighlight = _ref.isHighlight;
+    value: function drawValueLabels(_ref4) {
+      var context = _ref4.context,
+          data = _ref4.data,
+          positions = _ref4.positions,
+          isHighlight = _ref4.isHighlight;
       var isHorizontal = this.isHorizontal;
       var _this$showValue = this.showValue,
           fontSize = _this$showValue.fontSize,
@@ -36560,9 +36677,9 @@ var element_bar_Bar = /*#__PURE__*/function () {
       if (isStacked) {
         value = data.o;
       } else {
-        var _ref2;
+        var _ref5;
 
-        value = (_ref2 = isHorizontal ? data.x : data.y) !== null && _ref2 !== void 0 ? _ref2 : '';
+        value = (_ref5 = isHorizontal ? data.x : data.y) !== null && _ref5 !== void 0 ? _ref5 : '';
       }
 
       var formattedTxt;
@@ -36651,9 +36768,9 @@ var element_bar_Bar = /*#__PURE__*/function () {
     }
   }, {
     key: "drawBar",
-    value: function drawBar(_ref3) {
-      var ctx = _ref3.ctx,
-          positions = _ref3.positions;
+    value: function drawBar(_ref6) {
+      var ctx = _ref6.ctx,
+          positions = _ref6.positions;
       var isHorizontal = this.isHorizontal;
       var isStackBar = ('stackIndex' in this);
       var isBorderRadius = this.borderRadius && this.borderRadius > 0;
@@ -37445,6 +37562,10 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
     value: function drawItem(ctx, x, y, w, h, borderOpt) {
       ctx.beginPath();
 
+      if (w < 0 || h < 0) {
+        return;
+      }
+
       if (borderOpt.show) {
         var radius = borderOpt.radius;
 
@@ -37476,7 +37597,7 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
     }
   }, {
     key: "calculateXY",
-    value: function calculateXY(dir, value, startPoint) {
+    value: function calculateXY(dir, value, startPoint, minMax) {
       var point = null;
 
       if (this.labels[dir] && this.labels[dir].length) {
@@ -37484,17 +37605,39 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
           return label === value;
         });
 
-        if (index > -1) {
-          point = dir === 'x' ? startPoint + this.size.w * index : startPoint - this.size.h * (index + 1);
-        } else {
-          var timeIndex = this.labels[dir].findIndex(function (label) {
-            return new Date(label).getTime() === new Date(value).getTime();
+        if (index === -1) {
+          index = this.labels[dir].findIndex(function (label) {
+            return +label === +value;
           });
+        }
 
-          if (timeIndex > -1) {
-            point = dir === 'x' ? startPoint + this.size.w * timeIndex : startPoint - this.size.h * (timeIndex + 1);
+        var minIndex = minMax.minIndex,
+            maxIndex = minMax.maxIndex,
+            graphMin = minMax.graphMin,
+            graphMax = minMax.graphMax;
+
+        if (truthyNumber(maxIndex) && index > maxIndex) {
+          return null;
+        }
+
+        if (truthyNumber(minIndex) && index < minIndex) {
+          return null;
+        }
+
+        if (checkNullAndUndefined(minIndex) && checkNullAndUndefined(maxIndex)) {
+          if (value < graphMin || value > graphMax) {
+            return null;
           }
         }
+
+        var startIndex = minIndex !== null && minIndex !== void 0 ? minIndex : this.labels[dir].findIndex(function (label) {
+          return +label === +graphMin;
+        });
+
+        if (index > -1) {
+          index -= startIndex > -1 ? startIndex : 0;
+          point = dir === 'x' ? startPoint + this.size.w * index : startPoint - this.size.h * (index + 1);
+        }
       }
 
       return point;
@@ -37514,13 +37657,16 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
           overlayCtx = param.overlayCtx,
           selectLabel = param.selectLabel,
           legendHitInfo = param.legendHitInfo,
-          selectItem = param.selectItem;
+          selectItem = param.selectItem,
+          axesSteps = param.axesSteps;
       var xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       var yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
       var xsp = chartRect.x1 + labelOffset.left;
       var ysp = chartRect.y2 - labelOffset.bottom;
-      this.size.w = xArea / this.labels.x.length;
-      this.size.h = yArea / this.labels.y.length;
+      var minmaxX = axesSteps.x[this.xAxisIndex];
+      var minmaxY = axesSteps.y[this.yAxisIndex];
+      this.size.w = xArea / minmaxX.oriSteps;
+      this.size.h = yArea / minmaxY.oriSteps;
 
       var getOpacity = function getOpacity(item, opacity, index) {
         if (!legendHitInfo) {
@@ -37550,9 +37696,10 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
 
       this.data.forEach(function (item, index) {
         var axisLineWidth = 1;
-        var xp = _this2.calculateXY('x', item.x, xsp) + axisLineWidth;
 
-        var yp = _this2.calculateXY('y', item.y, ysp);
+        var xp = _this2.calculateXY('x', item.x, xsp, minmaxX);
+
+        var yp = _this2.calculateXY('y', item.y, ysp, minmaxY);
 
         var w = _this2.size.w;
         var h = _this2.size.h;
@@ -37591,14 +37738,19 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
                   color = _borderOpt.color,
                   lineWidth = _borderOpt.lineWidth,
                   borderOpacity = _borderOpt.opacity;
-              ctx.strokeStyle = helpers_util.colorStringToRgba(color, itemOpacity === 1 ? borderOpacity : itemOpacity);
-              ctx.lineWidth = lineWidth;
-              xp += lineWidth * 0.5;
-              yp += lineWidth * 0.5;
-              w -= lineWidth;
-              h -= lineWidth;
+              ctx.strokeStyle = helpers_util.colorStringToRgba(color, itemOpacity === 1 ? borderOpacity : itemOpacity); // item 사이즈 보다 border 선 굵기가 큰 경우 lineWidth props 무시
+
+              if (lineWidth < w && lineWidth < h) {
+                ctx.lineWidth = lineWidth;
+                xp += lineWidth * 0.5;
+                yp += lineWidth * 0.5;
+                w -= lineWidth;
+                h -= lineWidth;
+              }
             }
 
+            xp += axisLineWidth;
+
             _this2.drawItem(ctx, xp, yp, w, h, borderOpt);
 
             ctx.restore();
@@ -37795,10 +37947,14 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
 
         if (this.stroke.show) {
           var lineWidth = this.stroke.lineWidth;
-          x += lineWidth * 0.5;
-          y += lineWidth * 0.5;
-          w -= lineWidth;
-          h -= lineWidth;
+
+          if (lineWidth < w && lineWidth < h) {
+            ctx.lineWidth = lineWidth;
+            x += lineWidth * 0.5;
+            y += lineWidth * 0.5;
+            w -= lineWidth;
+            h -= lineWidth;
+          }
         }
 
         this.drawItem(ctx, x - 0.5, y - 0.5, w + 1, h + 1, this.stroke);
@@ -38157,12 +38313,12 @@ var dayjs_min_default = /*#__PURE__*/__webpack_require__.n(dayjs_min);
 
 
 var scale_Scale = /*#__PURE__*/function () {
-  function Scale(type, opt, ctx, options) {
+  function Scale(type, axisOpt, ctx, options) {
     var _this = this;
 
     _classCallCheck(this, Scale);
 
-    var merged = lodash_es_defaultsDeep({}, opt, AXIS_OPTION);
+    var merged = lodash_es_defaultsDeep({}, axisOpt, AXIS_OPTION);
     Object.keys(merged).forEach(function (key) {
       _this[key] = merged[key];
     });
@@ -38214,21 +38370,21 @@ var scale_Scale = /*#__PURE__*/function () {
     /**
      * Calculate min/max value, label and size information for axis
      * @param {object} minMax    min/max information
+     * @param {object} scrollbarOpt scrollbar option
      *
      * @returns {object} min/max value and label
      */
 
   }, {
     key: "calculateScaleRange",
-    value: function calculateScaleRange(minMax) {
-      var _this$range;
-
+    value: function calculateScaleRange(minMax, scrollbarOpt) {
       var maxValue;
       var minValue;
+      var range = scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use ? scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range : this.range;
 
-      if (((_this$range = this.range) === null || _this$range === void 0 ? void 0 : _this$range.length) === 2) {
-        maxValue = this.range[1];
-        minValue = this.range[0];
+      if ((range === null || range === void 0 ? void 0 : range.length) === 2) {
+        maxValue = range[1];
+        minValue = range[0];
       } else {
         maxValue = minMax.max;
         minValue = minMax.min;
@@ -39341,23 +39497,25 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _inherits(StepScale, _Scale);
 
   var _super = _createSuper(StepScale);
 
-  function StepScale(type, opt, ctx, labels, options) {
+  function StepScale(type, axisOpt, ctx, labels, options) {
     var _this;
 
     _classCallCheck(this, StepScale);
 
-    _this = _super.call(this, type, opt, ctx, options);
+    _this = _super.call(this, type, axisOpt, ctx, options);
     _this.labels = labels;
     return _this;
   }
   /**
    * Calculate min/max value, label and size information for step scale
    * @param {object} minMax       min/max information (unused on step scale)
+   * @param {object} scrollbarOpt    scroll bar option
    * @param {object} chartRect    chart size information
    *
    * @returns {object} min/max value and label
@@ -39366,14 +39524,31 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
 
   _createClass(StepScale, [{
     key: "calculateScaleRange",
-    value: function calculateScaleRange(minMax, chartRect) {
+    value: function calculateScaleRange(minMax, scrollbarOpt, chartRect) {
       var stepMinMax = this.labelStyle.alignToGridLine ? minMax : helpers_util.getStringMinMax(this.labels);
       var maxValue = stepMinMax.max;
       var minValue = stepMinMax.min;
-      var maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+      var minIndex = 0;
+      var maxIndex = this.labels.length - 1;
+      var labelCount = this.labels.length;
+      var range = scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use ? scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range : this.range;
+
+      if (range !== null && range !== void 0 && range.length) {
+        var _range = _slicedToArray(range, 2);
+
+        minIndex = _range[0];
+        maxIndex = _range[1];
+        maxValue = this.labels[maxIndex];
+        minValue = this.labels[minIndex];
+        labelCount = maxIndex - minIndex + 1;
+      }
+
+      var maxWidth = chartRect.chartWidth / (labelCount + 2);
       return {
         min: minValue,
         max: maxValue,
+        minIndex: minIndex,
+        maxIndex: maxIndex,
         minLabel: this.getLabelFormat(minValue, maxWidth),
         maxLabel: this.getLabelFormat(maxValue, maxWidth),
         size: helpers_util.calcTextSize(this.getLabelFormat(maxValue, maxWidth), helpers_util.getLabelStyle(this.labelStyle))
@@ -39389,30 +39564,39 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   }, {
     key: "calculateSteps",
     value: function calculateSteps(range) {
-      var numberOfSteps = this.labels.length;
+      var minValue = range.minValue,
+          maxValue = range.maxValue,
+          minIndex = range.minIndex,
+          maxIndex = range.maxIndex,
+          maxSteps = range.maxSteps;
+      var numberOfSteps = maxIndex - minIndex + 1;
       var interval = 1;
+      var oriSteps = numberOfSteps;
       var isNumbersArray = this.labels.every(function (label) {
         return !isNaN(label);
       });
 
       if (this.labelStyle.alignToGridLine && isNumbersArray) {
-        var maxSteps = range.maxSteps;
-
         if (maxSteps > 2) {
           while (numberOfSteps > maxSteps * 2) {
             interval *= 2;
             numberOfSteps = Math.round(numberOfSteps / interval);
           }
         } else {
-          interval = this.labels.length;
+          interval = oriSteps;
         }
+      } else if (numberOfSteps > maxSteps * 2) {
+        interval *= 2;
       }
 
       return {
+        oriSteps: oriSteps,
         steps: numberOfSteps,
         interval: interval,
-        graphMin: range.minValue,
-        graphMax: range.maxValue
+        graphMin: minValue,
+        graphMax: maxValue,
+        minIndex: minIndex,
+        maxIndex: maxIndex
       };
     }
     /**
@@ -39442,14 +39626,14 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         y1: chartRect.y1 + labelOffset.top,
         y2: chartRect.y2 - labelOffset.bottom
       };
-      var oriSteps = this.labels.length;
       var steps = stepInfo.steps;
       var count = stepInfo.interval;
+      var startIndex = stepInfo.minIndex;
       var startPoint = aPos[this.units.rectStart];
       var endPoint = aPos[this.units.rectEnd];
       var offsetPoint = aPos[this.units.rectOffset(this.position)];
       var offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
-      var maxWidth = chartRect.chartWidth / (this.labels.length + 2);
+      var maxWidth = chartRect.chartWidth / (steps + 2);
       this.drawAxisTitle(chartRect, labelOffset);
 
       if ((_this$labelStyle = this.labelStyle) !== null && _this$labelStyle !== void 0 && _this$labelStyle.show) {
@@ -39484,7 +39668,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
           return;
         }
 
-        var labelGap = (endPoint - startPoint) / labels.length;
+        var labelGap = (endPoint - startPoint) / steps;
         var alignToGridLine = this.labelStyle.alignToGridLine;
         var labelCenter = null;
         var linePosition = null;
@@ -39494,10 +39678,11 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         var labelPoint;
         var index;
 
-        for (index = 0; index < oriSteps; index += count) {
+        for (index = 0; index < steps; index += count) {
           var _selectedLabelInfo$da, _selectedLabelInfo$da2;
 
-          var item = this.labels[index];
+          var labelIndex = startIndex + index;
+          var item = this.labels[labelIndex];
           labelCenter = Math.round(startPoint + labelGap * index);
           linePosition = labelCenter + aliasPixel;
           labelText = this.getLabelFormat(item, maxWidth);
@@ -39513,7 +39698,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
             targetAxis = horizontal ? 'y' : 'x';
           }
 
-          var isBlurredLabel = (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.use) && (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.useLabelOpacity) && targetAxis === this.type && (selectedLabelInfo === null || selectedLabelInfo === void 0 ? void 0 : (_selectedLabelInfo$da = selectedLabelInfo.dataIndex) === null || _selectedLabelInfo$da === void 0 ? void 0 : _selectedLabelInfo$da.length) && !(selectedLabelInfo !== null && selectedLabelInfo !== void 0 && (_selectedLabelInfo$da2 = selectedLabelInfo.dataIndex) !== null && _selectedLabelInfo$da2 !== void 0 && _selectedLabelInfo$da2.includes(index));
+          var isBlurredLabel = (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.use) && (selectLabelOpt === null || selectLabelOpt === void 0 ? void 0 : selectLabelOpt.useLabelOpacity) && targetAxis === this.type && (selectedLabelInfo === null || selectedLabelInfo === void 0 ? void 0 : (_selectedLabelInfo$da = selectedLabelInfo.dataIndex) === null || _selectedLabelInfo$da === void 0 ? void 0 : _selectedLabelInfo$da.length) && !(selectedLabelInfo !== null && selectedLabelInfo !== void 0 && (_selectedLabelInfo$da2 = selectedLabelInfo.dataIndex) !== null && _selectedLabelInfo$da2 !== void 0 && _selectedLabelInfo$da2.includes(labelIndex));
           var labelColor = this.labelStyle.color;
           var defaultOpacity = 1;
 
@@ -39732,17 +39917,18 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
   _inherits(TimeCategoryScale, _Scale);
 
   var _super = _createSuper(TimeCategoryScale);
 
-  function TimeCategoryScale(type, opt, ctx, labels, options) {
+  function TimeCategoryScale(type, axisOpt, ctx, labels, options) {
     var _this;
 
     _classCallCheck(this, TimeCategoryScale);
 
-    _this = _super.call(this, type, opt, ctx);
+    _this = _super.call(this, type, axisOpt, ctx);
     _this.labels = labels;
     _this.options = options;
     return _this;
@@ -39858,6 +40044,8 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
   }, {
     key: "draw",
     value: function draw(chartRect, labelOffset, stepInfo, hitInfo, selectLabelInfo) {
+      var _this2 = this;
+
       var ctx = this.ctx;
       var labels = this.labels;
       var aPos = {
@@ -39910,7 +40098,7 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       }
 
       var alignToGridLine = this.labelStyle.alignToGridLine;
-      var graphGap = (endPoint - startPoint) / (labels.length || 1);
+      var graphGap = (endPoint - startPoint) / (oriSteps || 1);
 
       if (this.categoryMode && !alignToGridLine) {
         startPoint += Math.ceil(graphGap / 2) - 2;
@@ -39925,13 +40113,15 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       var labelPoint;
 
       for (var ix = 0; ix < oriSteps; ix += count) {
-        var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data, _selectLabelInfo$data2;
+        var _this$options, _this$options$selectL, _this$options2, _this$options2$select, _selectLabelInfo$data;
 
         ticks[ix] = axisMin + ix * stepValue;
         labelCenter = Math.round(startPoint + graphGap * ix);
         linePosition = labelCenter + aliasPixel;
         labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
-        var isBlurredLabel = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$selectL = _this$options.selectLabel) === null || _this$options$selectL === void 0 ? void 0 : _this$options$selectL.use) && ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$select = _this$options2.selectLabel) === null || _this$options2$select === void 0 ? void 0 : _this$options2$select.useLabelOpacity) && this.options.horizontal === (this.type === 'y') && (selectLabelInfo === null || selectLabelInfo === void 0 ? void 0 : (_selectLabelInfo$data = selectLabelInfo.dataIndex) === null || _selectLabelInfo$data === void 0 ? void 0 : _selectLabelInfo$data.length) && !(selectLabelInfo !== null && selectLabelInfo !== void 0 && (_selectLabelInfo$data2 = selectLabelInfo.dataIndex) !== null && _selectLabelInfo$data2 !== void 0 && _selectLabelInfo$data2.includes(ix));
+        var isBlurredLabel = ((_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$selectL = _this$options.selectLabel) === null || _this$options$selectL === void 0 ? void 0 : _this$options$selectL.use) && ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$select = _this$options2.selectLabel) === null || _this$options2$select === void 0 ? void 0 : _this$options2$select.useLabelOpacity) && this.options.horizontal === (this.type === 'y') && (selectLabelInfo === null || selectLabelInfo === void 0 ? void 0 : (_selectLabelInfo$data = selectLabelInfo.dataIndex) === null || _selectLabelInfo$data === void 0 ? void 0 : _selectLabelInfo$data.length) && !(selectLabelInfo !== null && selectLabelInfo !== void 0 && selectLabelInfo.label.map(function (t) {
+          return _this2.getLabelFormat(Math.min(axisMax, t));
+        }).includes(labelText));
         var labelColor = this.labelStyle.color;
         var defaultOpacity = 1;
 
@@ -42001,6 +42191,662 @@ var plugins_legend_gradient_modules = {
   }
 };
 /* harmony default export */ var plugins_legend_gradient = (plugins_legend_gradient_modules);
+// CONCATENATED MODULE: ./src/components/chart/plugins/plugins.scrollbar.js
+
+
+
+
+
+
+
+
+
+
+
+var plugins_scrollbar_module = {
+  /**
+   * init scrollbar information
+   */
+  initScrollbar: function initScrollbar() {
+    var _this$options$axesX, _this$options$axesX$, _this$options$axesX$$, _this$options$axesY, _this$options$axesY$, _this$options$axesY$$;
+
+    if ((_this$options$axesX = this.options.axesX) !== null && _this$options$axesX !== void 0 && (_this$options$axesX$ = _this$options$axesX[0]) !== null && _this$options$axesX$ !== void 0 && (_this$options$axesX$$ = _this$options$axesX$.scrollbar) !== null && _this$options$axesX$$ !== void 0 && _this$options$axesX$$.use) {
+      this.initScrollbarInfo(this.options.axesX, 'x');
+    }
+
+    if ((_this$options$axesY = this.options.axesY) !== null && _this$options$axesY !== void 0 && (_this$options$axesY$ = _this$options$axesY[0]) !== null && _this$options$axesY$ !== void 0 && (_this$options$axesY$$ = _this$options$axesY$.scrollbar) !== null && _this$options$axesY$$ !== void 0 && _this$options$axesY$$.use) {
+      this.initScrollbarInfo(this.options.axesY, 'y');
+    }
+  },
+
+  /**
+   * init scrollbar information with axis information
+   * @param axisOpt axis option
+   * @param dir axis direction (x | y)
+   */
+  initScrollbarInfo: function initScrollbarInfo(axisOpt, dir) {
+    var scrollbarOpt = this.scrollbar[dir];
+
+    if (!scrollbarOpt.isInit) {
+      var _axisOpt$, _axisOpt$2, _axisOpt$3;
+
+      var merged = lodash_es_defaultsDeep({}, axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$ = axisOpt[0]) === null || _axisOpt$ === void 0 ? void 0 : _axisOpt$.scrollbar, AXIS_OPTION.scrollbar);
+      Object.keys(merged).forEach(function (key) {
+        scrollbarOpt[key] = merged[key];
+      });
+      scrollbarOpt.type = axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$2 = axisOpt[0]) === null || _axisOpt$2 === void 0 ? void 0 : _axisOpt$2.type;
+      scrollbarOpt.range = (axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$3 = axisOpt[0]) === null || _axisOpt$3 === void 0 ? void 0 : _axisOpt$3.range) || null;
+      scrollbarOpt.interval = null;
+      this.createScrollbarLayout(dir);
+      this.createScrollbar(dir);
+      this.createScrollEvent(dir);
+      scrollbarOpt.isInit = true;
+    }
+  },
+
+  /**
+   * update scrollbar information
+   */
+  updateScrollbar: function updateScrollbar() {
+    this.updateScrollbarInfo('x');
+    this.updateScrollbarInfo('y');
+  },
+
+  /**
+   * Updated scrollbar information with updated axis information
+   * @param dir axis direction (x | y)
+   */
+  updateScrollbarInfo: function updateScrollbarInfo(dir) {
+    var _newOpt$, _newOpt$$scrollbar, _newOpt$2, _newOpt$0$scrollbar, _newOpt$3, _newOpt$4, _axisOpt$4, _newOpt$0$scrollbar2;
+
+    var _this$options = this.options,
+        axesX = _this$options.axesX,
+        axesY = _this$options.axesY;
+    var newOpt = dir === 'x' ? axesX : axesY;
+
+    if (!this.scrollbar[dir].isInit && newOpt !== null && newOpt !== void 0 && (_newOpt$ = newOpt[0]) !== null && _newOpt$ !== void 0 && (_newOpt$$scrollbar = _newOpt$.scrollbar) !== null && _newOpt$$scrollbar !== void 0 && _newOpt$$scrollbar.use && newOpt !== null && newOpt !== void 0 && (_newOpt$2 = newOpt[0]) !== null && _newOpt$2 !== void 0 && _newOpt$2.range) {
+      this.initScrollbarInfo(newOpt, dir);
+      return;
+    } else if (!(newOpt !== null && newOpt !== void 0 && (_newOpt$0$scrollbar = newOpt[0].scrollbar) !== null && _newOpt$0$scrollbar !== void 0 && _newOpt$0$scrollbar.use) || checkNullAndUndefined(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$3 = newOpt[0]) === null || _newOpt$3 === void 0 ? void 0 : _newOpt$3.range)) {
+      this.destroyScrollbar(dir);
+      return;
+    }
+
+    var axisOpt = dir === 'x' ? this.axesX : this.axesY;
+    var isUpdateAxesRange = !lodash_es_isEqual(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$4 = newOpt[0]) === null || _newOpt$4 === void 0 ? void 0 : _newOpt$4.range, axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$4 = axisOpt[0]) === null || _axisOpt$4 === void 0 ? void 0 : _axisOpt$4.range);
+
+    if (isUpdateAxesRange) {
+      var _newOpt$5;
+
+      this.scrollbar[dir].range = (newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$5 = newOpt[0]) === null || _newOpt$5 === void 0 ? void 0 : _newOpt$5.range) || null;
+    }
+
+    this.scrollbar[dir].use = !!(newOpt !== null && newOpt !== void 0 && (_newOpt$0$scrollbar2 = newOpt[0].scrollbar) !== null && _newOpt$0$scrollbar2 !== void 0 && _newOpt$0$scrollbar2.use);
+  },
+
+  /**
+   * update scrollbar position
+   */
+  updateScrollbarPosition: function updateScrollbarPosition() {
+    var _this$scrollbar$x, _this$scrollbar$x2, _this$scrollbar$y, _this$scrollbar$y2;
+
+    if ((_this$scrollbar$x = this.scrollbar.x) !== null && _this$scrollbar$x !== void 0 && _this$scrollbar$x.use && (_this$scrollbar$x2 = this.scrollbar.x) !== null && _this$scrollbar$x2 !== void 0 && _this$scrollbar$x2.isInit) {
+      this.setScrollbarPosition('x');
+    }
+
+    if ((_this$scrollbar$y = this.scrollbar.y) !== null && _this$scrollbar$y !== void 0 && _this$scrollbar$y.use && (_this$scrollbar$y2 = this.scrollbar.y) !== null && _this$scrollbar$y2 !== void 0 && _this$scrollbar$y2.isInit) {
+      this.setScrollbarPosition('y');
+    }
+  },
+
+  /**
+   * create scrollbar layout
+   * @param dir axis direction ('x' | 'y')
+   */
+  createScrollbarLayout: function createScrollbarLayout(dir) {
+    var scrollbarOpt = this.scrollbar[dir];
+    scrollbarOpt.dom = document.createElement('div');
+    scrollbarOpt.dom.className = 'ev-chart-scrollbar';
+    scrollbarOpt.dom.dataset.type = 'scrollbar';
+    var containerDOM = document.createElement('div');
+    containerDOM.className = 'ev-chart-scrollbar-container';
+    containerDOM.dataset.type = dir;
+    scrollbarOpt.dom.appendChild(containerDOM);
+    this.wrapperDOM.appendChild(scrollbarOpt.dom);
+  },
+
+  /**
+   * create scrollbar
+   * @param dir axis direction ('x' | 'y')
+   */
+  createScrollbar: function createScrollbar(dir) {
+    var scrollbarOpt = this.scrollbar[dir];
+    var containerDOM = scrollbarOpt.dom.children[0];
+    this.createScrollbarTrack(containerDOM);
+    this.createScrollbarThumb(containerDOM);
+
+    if (scrollbarOpt.showButton) {
+      this.createScrollbarButton(containerDOM);
+    }
+  },
+
+  /**
+   * create scrollbar track
+   * @param containerDOM
+   */
+  createScrollbarTrack: function createScrollbarTrack(containerDOM) {
+    var trackDOM = document.createElement('div');
+    trackDOM.className = 'ev-chart-scrollbar-track';
+    trackDOM.dataset.type = 'track';
+    containerDOM.appendChild(trackDOM);
+  },
+
+  /**
+   * create scrollbar thumb
+   * @param containerDOM
+   */
+  createScrollbarThumb: function createScrollbarThumb(containerDOM) {
+    var thumbDOM = document.createElement('div');
+    thumbDOM.className = 'ev-chart-scrollbar-thumb';
+    thumbDOM.dataset.type = 'thumb';
+    containerDOM.appendChild(thumbDOM);
+  },
+
+  /**
+   * create scrollbar up, down button
+   * @param containerDOM
+   */
+  createScrollbarButton: function createScrollbarButton(containerDOM) {
+    var upBtnDOM = document.createElement('div');
+    upBtnDOM.className = 'ev-chart-scrollbar-button ev-chart-scrollbar-button-up';
+    upBtnDOM.dataset.type = 'button';
+    var iconUpBtn = document.createElement('i');
+    iconUpBtn.className = 'ev-icon ev-icon-triangle-up ev-chart-scrollbar-button-icon';
+    iconUpBtn.dataset.type = 'button-icon';
+    upBtnDOM.appendChild(iconUpBtn);
+    var downBtnDOM = document.createElement('div');
+    downBtnDOM.className = 'ev-chart-scrollbar-button ev-chart-scrollbar-button-down';
+    downBtnDOM.dataset.type = 'button';
+    var iconDownBtn = document.createElement('i');
+    iconDownBtn.className = 'ev-icon ev-icon-triangle-down ev-chart-scrollbar-button-icon';
+    iconDownBtn.dataset.type = 'button-icon';
+    downBtnDOM.appendChild(iconDownBtn);
+    containerDOM.appendChild(upBtnDOM);
+    containerDOM.appendChild(downBtnDOM);
+  },
+
+  /**
+   * set scrollbar position
+   * @param dir axis direction ('x' | 'y')
+   */
+  setScrollbarPosition: function setScrollbarPosition(dir) {
+    var _this$options$title, _this$options$title2;
+
+    var scrollbarOpt = this.scrollbar[dir];
+
+    if (!scrollbarOpt.use || !scrollbarOpt.range) {
+      return;
+    }
+
+    var scrollbarDOM = scrollbarOpt.dom;
+    var chartRect = this.chartRect;
+    var labelOffset = this.labelOffset;
+    var aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom
+    };
+    var titleHeight = (_this$options$title = this.options.title) !== null && _this$options$title !== void 0 && _this$options$title.show ? (_this$options$title2 = this.options.title) === null || _this$options$title2 === void 0 ? void 0 : _this$options$title2.height : 0;
+    var isXScroll = dir === 'x';
+    var scrollHeight = isXScroll ? scrollbarOpt.height : scrollbarOpt.width;
+    var fullSize = isXScroll ? aPos.x2 - aPos.x1 : aPos.y2 - aPos.y1;
+    var buttonSize = scrollbarOpt.showButton ? scrollHeight : 0;
+    var trackSize = fullSize - buttonSize * 2;
+    var thumbSize = this.getScrollbarThumbSize(dir, trackSize);
+    var scrollbarStyle = 'display: block;';
+    var scrollbarTrackStyle;
+    var scrollbarThumbStyle;
+    var upBtnStyle;
+    var downBtnStyle;
+    var commonBtnStyle = "width:".concat(buttonSize, "px;height:").concat(buttonSize, "px;");
+
+    if (isXScroll) {
+      scrollbarStyle = "top: ".concat(chartRect.y2 + titleHeight + labelOffset.top, "px;");
+      scrollbarStyle += "left: ".concat(aPos.x1, "px;");
+      scrollbarStyle += "width: ".concat(fullSize, "px;");
+      scrollbarStyle += " height: ".concat(scrollHeight, "px;");
+      scrollbarTrackStyle = 'top: 0;';
+      scrollbarTrackStyle += "left: ".concat(buttonSize, "px;");
+      scrollbarTrackStyle += "width: ".concat(trackSize, "px;");
+      scrollbarTrackStyle += 'height: 100%;';
+      scrollbarThumbStyle = "width: ".concat(thumbSize.size, "px;");
+      scrollbarThumbStyle += 'height: 100%;';
+      scrollbarThumbStyle += "left: ".concat(thumbSize.position + buttonSize, "px");
+      commonBtnStyle += 'transform:rotate(90deg);top: 0;';
+      upBtnStyle = "".concat(commonBtnStyle, "right:0;");
+      downBtnStyle = "".concat(commonBtnStyle, "left:0;");
+    } else {
+      scrollbarStyle = "top: ".concat(aPos.y1 + titleHeight, "px;");
+      scrollbarStyle += "left: ".concat(aPos.x2 + 10, "px;");
+      scrollbarStyle += "width: ".concat(scrollHeight, "px;");
+      scrollbarStyle += "height: ".concat(fullSize, "px;");
+      scrollbarTrackStyle = "top: ".concat(buttonSize, "px;");
+      scrollbarTrackStyle += 'left: 0;';
+      scrollbarTrackStyle += 'width: 100%;';
+      scrollbarTrackStyle += "height: ".concat(trackSize, "px;");
+      scrollbarThumbStyle = 'width: 100%;';
+      scrollbarThumbStyle += "height: ".concat(thumbSize.size, "px;");
+      scrollbarThumbStyle += "bottom: ".concat(thumbSize.position + buttonSize, "px");
+      commonBtnStyle += 'left:0;';
+      upBtnStyle = "".concat(commonBtnStyle, "top: 0;");
+      downBtnStyle = "".concat(commonBtnStyle, "bottom: 0;");
+    }
+
+    scrollbarDOM.style.cssText = scrollbarStyle;
+    var scrollbarTrackDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-track');
+    scrollbarTrackDOM[0].style.cssText = scrollbarTrackStyle;
+    scrollbarTrackDOM[0].style.backgroundColor = scrollbarOpt.background;
+    var scrollbarThumbDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-thumb');
+    scrollbarThumbDOM[0].style.cssText = scrollbarThumbStyle;
+    scrollbarThumbDOM[0].style.backgroundColor = scrollbarOpt.thumbStyle.background;
+    scrollbarThumbDOM[0].style.borderRadius = "".concat(scrollbarOpt.thumbStyle.radius, "px");
+
+    if (scrollbarOpt.showButton) {
+      var upBtnDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-button-up');
+      var endPosition = Math.floor(trackSize - thumbSize.size);
+      var upBtnOpacity = Math.floor(thumbSize.position) === endPosition ? 0.5 : 1;
+      upBtnDOM[0].style.cssText = "background-color: ".concat(scrollbarOpt.background, ";").concat(upBtnStyle);
+      upBtnDOM[0].style.opacity = upBtnOpacity;
+      upBtnDOM[0].children[0].style.display = 'block';
+      var downBtnDOM = scrollbarDOM.getElementsByClassName('ev-chart-scrollbar-button-down');
+      downBtnDOM[0].style.cssText = "background-color: ".concat(scrollbarOpt.background, ";").concat(downBtnStyle);
+      downBtnDOM[0].style.opacity = Math.floor(thumbSize.position) === 0 ? 0.5 : 1;
+      downBtnDOM[0].children[0].style.display = 'block';
+    }
+  },
+
+  /**
+   * get scrollbar thumb size
+   * @param dir axis direction ('x' | 'y')
+   * @param trackSize scrollbar track size
+   */
+  getScrollbarThumbSize: function getScrollbarThumbSize(dir, trackSize) {
+    var scrollbarOpt = this.scrollbar[dir];
+
+    var _scrollbarOpt$range = _slicedToArray(scrollbarOpt.range, 2),
+        min = _scrollbarOpt$range[0],
+        max = _scrollbarOpt$range[1];
+
+    var axesType = scrollbarOpt.type;
+    var thumbSize;
+    var steps;
+    var interval = 1;
+    var startValue = 0;
+    var thumbPosition = 0;
+
+    if (axesType === 'step') {
+      var labels = this.options.type === 'heatMap' ? this.data.labels[dir] : this.data.labels;
+      var range = max - min + 1;
+      steps = labels.length;
+      var intervalSize = trackSize / steps;
+      thumbSize = intervalSize * range;
+      thumbPosition = intervalSize * min;
+    } else {
+      var _this$axesX, _this$axesX$;
+
+      var minMax = this.minMax[dir];
+      var graphRange = +minMax[0].max - +minMax[0].min;
+
+      var _range = +max - +min;
+
+      interval = (_this$axesX = this.axesX) === null || _this$axesX === void 0 ? void 0 : (_this$axesX$ = _this$axesX[0]) === null || _this$axesX$ === void 0 ? void 0 : _this$axesX$.getInterval({
+        min: minMax[0].min,
+        max: minMax[0].max,
+        maxSteps: this.labelRange[dir].max
+      });
+      steps = Math.ceil(graphRange / interval) + 1;
+      startValue = +minMax[0].min;
+
+      var _intervalSize = trackSize / steps;
+
+      var count = _range / interval + 1;
+      var point = +min - startValue;
+      thumbSize = _intervalSize * count;
+      thumbPosition = _intervalSize * (point / interval);
+    }
+
+    scrollbarOpt.startValue = startValue;
+    scrollbarOpt.steps = steps;
+    scrollbarOpt.interval = interval;
+    return {
+      size: thumbSize,
+      position: thumbPosition,
+      background: scrollbarOpt.background,
+      radius: scrollbarOpt.radius
+    };
+  },
+
+  /**
+   * get scrollbar containerDOM
+   * @param targetDOM event target dom
+   * @returns {HTMLElement|Element|*}
+   */
+  getScrollbarContainerDOM: function getScrollbarContainerDOM(targetDOM) {
+    var childTypes = ['track', 'thumb', 'button'];
+    var type = targetDOM.dataset.type;
+
+    if (childTypes.includes(type)) {
+      return targetDOM.parentElement;
+    } else if (type === 'button-icon') {
+      return targetDOM.parentElement.parentElement;
+    } else if (type === 'scrollbar') {
+      return targetDOM.getElementsByClassName('ev-chart-scrollbar-container')[0];
+    }
+
+    return targetDOM;
+  },
+
+  /**
+   * update scrollbar option range
+   * @param dir axis direction ('x' | 'y')
+   * @param isUp
+   */
+  updateScrollbarRange: function updateScrollbarRange(dir, isUp) {
+    var scrollbarOpt = this.scrollbar[dir];
+    var startValue = scrollbarOpt.startValue,
+        range = scrollbarOpt.range,
+        interval = scrollbarOpt.interval,
+        steps = scrollbarOpt.steps;
+    var endValue = startValue + interval * steps;
+    var axisOpt = dir === 'x' ? this.axesX[0] : this.axesY[0];
+
+    var _ref = range !== null && range !== void 0 ? range : [],
+        _ref2 = _slicedToArray(_ref, 2),
+        min = _ref2[0],
+        max = _ref2[1];
+
+    if (!truthyNumber(min) || !truthyNumber(max)) {
+      scrollbarOpt.range = (axisOpt === null || axisOpt === void 0 ? void 0 : axisOpt.range) || null;
+    }
+
+    var minValue;
+    var maxValue;
+    var isOutOfRange = false;
+
+    if (isUp) {
+      minValue = min + interval;
+      maxValue = max + interval;
+      isOutOfRange = maxValue >= endValue;
+    } else {
+      minValue = min - interval;
+      maxValue = max - interval;
+      isOutOfRange = minValue < startValue;
+    }
+
+    if (!isOutOfRange) {
+      scrollbarOpt.range = [minValue, maxValue];
+      this.update({
+        updateSeries: false,
+        updateSelTip: {
+          update: false,
+          keepDomain: false
+        }
+      });
+    }
+  },
+
+  /**
+   * create scroll event
+   */
+  createScrollEvent: function createScrollEvent() {
+    var _this = this;
+
+    this.onScrollbarClick = function (e) {
+      e.preventDefault();
+      var type = e.target.dataset.type;
+
+      var containerDOM = _this.getScrollbarContainerDOM(e.target);
+
+      var buttonTypes = ['button', 'button-icon'];
+      var dir = containerDOM.dataset.type;
+      var isUp;
+
+      if (buttonTypes.includes(type)) {
+        var buttonDOM;
+
+        if (type === 'button') {
+          buttonDOM = e.target;
+        } else if (type === 'button-icon') {
+          buttonDOM = e.target.parentElement;
+        }
+
+        isUp = buttonDOM.className.includes('up');
+      } else if (type === 'track') {
+        var thumbDOM = containerDOM.getElementsByClassName('ev-chart-scrollbar-thumb');
+
+        var _thumbDOM$0$getBoundi = thumbDOM[0].getBoundingClientRect(),
+            x = _thumbDOM$0$getBoundi.x,
+            y = _thumbDOM$0$getBoundi.y;
+
+        var isXScroll = dir === 'x';
+        var clickPoint = isXScroll ? e.clientX : -e.clientY;
+        var thumbPosition = isXScroll ? x : -y;
+        isUp = clickPoint > thumbPosition;
+      } else {
+        return;
+      }
+
+      _this.updateScrollbarRange(dir, isUp);
+    };
+
+    this.onScrollbarDown = function (e) {
+      e.preventDefault();
+
+      if (e.target.dataset.type !== 'thumb') {
+        return;
+      }
+
+      var containerDOM = _this.getScrollbarContainerDOM(e.target);
+
+      var dir = containerDOM.dataset.type;
+      var thumbDOM = containerDOM.getElementsByClassName('ev-chart-scrollbar-thumb');
+
+      var _thumbDOM$0$getBoundi2 = thumbDOM[0].getBoundingClientRect(),
+          x = _thumbDOM$0$getBoundi2.x,
+          y = _thumbDOM$0$getBoundi2.y,
+          height = _thumbDOM$0$getBoundi2.height;
+
+      var scrollbarOpt = _this.scrollbar[dir];
+      scrollbarOpt.scrolling = true;
+
+      if (dir === 'x') {
+        scrollbarOpt.pointInThumb = e.clientX - x;
+      } else {
+        scrollbarOpt.pointInThumb = y + height - e.clientY;
+      }
+
+      var scrollbarDOM = scrollbarOpt.dom;
+      scrollbarDOM.addEventListener('mousemove', _this.onScrollbarMove);
+      scrollbarDOM.addEventListener('mouseup', _this.onScrollbarUp);
+    };
+
+    var onScrollbarMove = function onScrollbarMove(e) {
+      _this.scrolling(e);
+    };
+
+    this.onScrollbarMove = lodash_es_throttle(onScrollbarMove, 5);
+
+    this.onScrollbarUp = function (e) {
+      e.preventDefault();
+
+      _this.stopScrolling(e);
+    };
+
+    this.onScrollbarLeave = function (e) {
+      e.preventDefault();
+
+      _this.scrolling(e);
+
+      _this.stopScrolling(e);
+    };
+
+    this.onScrollbarWheel = function (e) {
+      e.preventDefault();
+
+      _this.updateScrollbarRange('y', e.deltaY < 0);
+    };
+
+    if (this.scrollbar.x.use && !this.scrollbar.x.isInit) {
+      var scrollbarXDOM = this.scrollbar.x.dom;
+      scrollbarXDOM.addEventListener('click', this.onScrollbarClick);
+      scrollbarXDOM.addEventListener('mousedown', this.onScrollbarDown);
+      scrollbarXDOM.addEventListener('mouseleave', this.onScrollbarLeave);
+    }
+
+    if (this.scrollbar.y.use && !this.scrollbar.y.isInit) {
+      var _this$overlayCanvas;
+
+      var scrollbarYDOM = this.scrollbar.y.dom;
+      scrollbarYDOM.addEventListener('click', this.onScrollbarClick);
+      scrollbarYDOM.addEventListener('mousedown', this.onScrollbarDown);
+      scrollbarYDOM.addEventListener('mouseleave', this.onScrollbarLeave);
+      (_this$overlayCanvas = this.overlayCanvas) === null || _this$overlayCanvas === void 0 ? void 0 : _this$overlayCanvas.addEventListener('wheel', this.onScrollbarWheel);
+    }
+  },
+
+  /**
+   * Update scroll information by move event
+   * @param e Event
+   */
+  scrolling: function scrolling(e) {
+    var containerDOM = this.getScrollbarContainerDOM(e.target);
+    var dir = containerDOM.dataset.type;
+
+    if (!this.scrollbar[dir].scrolling) {
+      return;
+    }
+
+    var _this$scrollbar$dir = this.scrollbar[dir],
+        steps = _this$scrollbar$dir.steps,
+        range = _this$scrollbar$dir.range,
+        pointInThumb = _this$scrollbar$dir.pointInThumb,
+        startValue = _this$scrollbar$dir.startValue,
+        interval = _this$scrollbar$dir.interval;
+    var trackDOM = containerDOM.getElementsByClassName('ev-chart-scrollbar-track');
+
+    var _trackDOM$0$getBoundi = trackDOM[0].getBoundingClientRect(),
+        x = _trackDOM$0$getBoundi.x,
+        y = _trackDOM$0$getBoundi.y,
+        width = _trackDOM$0$getBoundi.width,
+        height = _trackDOM$0$getBoundi.height;
+
+    var isXScroll = dir === 'x';
+    var sp = isXScroll ? x : y;
+    var trackSize = isXScroll ? width : height;
+    var intervalSize = trackSize / steps;
+    var endValue = startValue + (steps - 1) * interval;
+    var movePoint = isXScroll ? e.clientX : e.clientY;
+
+    if (movePoint < sp) {
+      movePoint = sp;
+    } else if (movePoint > sp + trackSize) {
+      movePoint = sp + trackSize;
+    }
+
+    var move;
+
+    if (isXScroll) {
+      move = movePoint - sp - pointInThumb;
+    } else {
+      move = sp + trackSize - movePoint - pointInThumb;
+    }
+
+    if (move <= 0) {
+      return;
+    }
+
+    var movedMin;
+    var movedMax;
+    var currValue = Math.round(Math.abs(move) / intervalSize) * interval;
+
+    var _range2 = _slicedToArray(range, 2),
+        min = _range2[0],
+        max = _range2[1];
+
+    if (move > 0) {
+      var incrementValue = startValue + (currValue - +min);
+      movedMin = +min + incrementValue;
+      movedMax = movedMin + (+max - +min);
+    }
+
+    if (movedMin < startValue || movedMax > endValue) {
+      return;
+    }
+
+    this.scrollbar[dir].range = [movedMin, movedMax];
+    this.update({
+      updateSeries: false,
+      updateSelTip: {
+        update: false,
+        keepDomain: false
+      }
+    });
+  },
+
+  /**
+   * init scrolling event
+   * @param e
+   */
+  stopScrolling: function stopScrolling(e) {
+    var containerDOM = this.getScrollbarContainerDOM(e.target);
+    var dir = containerDOM.dataset.type;
+    var scrollbarOpt = this.scrollbar[dir];
+
+    if (scrollbarOpt.scrolling) {
+      scrollbarOpt.scrolling = false;
+      var scrollbarDOM = scrollbarOpt.dom;
+      scrollbarDOM.removeEventListener('mousemove', this.onScrollbarMove, false);
+      scrollbarDOM.removeEventListener('mouseup', this.onScrollbarUp, false);
+    }
+  },
+
+  /**
+   * hide scrollbar dom
+   * @param dir axis direction ('x' | 'y')
+   */
+  hideScrollbar: function hideScrollbar(dir) {
+    var scrollbarDOM = this.scrollbar[dir].dom;
+
+    if (!scrollbarDOM) {
+      return;
+    }
+
+    var scrollbarStyle = scrollbarDOM === null || scrollbarDOM === void 0 ? void 0 : scrollbarDOM.style;
+    scrollbarStyle.display = 'none';
+    scrollbarStyle.width = '0';
+    scrollbarStyle.height = '0';
+  },
+
+  /**
+   * destroy scrollbar dom
+   * @param dir axis direction ('x' | 'y')
+   */
+  destroyScrollbar: function destroyScrollbar(dir) {
+    var scrollbarXDOM = this.scrollbar[dir].dom;
+
+    if (scrollbarXDOM) {
+      var _this$overlayCanvas2;
+
+      scrollbarXDOM.remove();
+      this.scrollbar[dir] = {
+        isInit: false
+      };
+      (_this$overlayCanvas2 = this.overlayCanvas) === null || _this$overlayCanvas2 === void 0 ? void 0 : _this$overlayCanvas2.removeEventListener('wheel', this.onScrollbarWheel, false);
+    }
+  }
+};
+/* harmony default export */ var plugins_scrollbar = (plugins_scrollbar_module);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.from-entries.js
 var es_object_from_entries = __webpack_require__("c1f9");
 
@@ -42190,14 +43036,22 @@ var plugins_interaction_modules = {
         }
 
         if (tooltip.use) {
-          _this.setTooltipLayoutPosition(hitInfo, e);
+          var _tooltip$formatter;
 
-          if (type === 'scatter') {
-            _this.drawTooltipForScatter(hitInfo, _this.tooltipCtx);
-          } else if (type === 'heatMap') {
-            _this.drawToolTipForHeatMap(hitInfo, _this.tooltipCtx);
+          if (tooltip !== null && tooltip !== void 0 && (_tooltip$formatter = tooltip.formatter) !== null && _tooltip$formatter !== void 0 && _tooltip$formatter.html) {
+            _this.drawCustomTooltip(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.items);
+
+            _this.setCustomTooltipLayoutPosition(hitInfo, e);
           } else {
-            _this.drawTooltip(hitInfo, _this.tooltipCtx);
+            _this.setTooltipLayoutPosition(hitInfo, e);
+
+            if (type === 'scatter') {
+              _this.drawTooltipForScatter(hitInfo, _this.tooltipCtx);
+            } else if (type === 'heatMap') {
+              _this.drawToolTipForHeatMap(hitInfo, _this.tooltipCtx);
+            } else {
+              _this.drawTooltip(hitInfo, _this.tooltipCtx);
+            }
           }
         }
       } else if (tooltip.use) {
@@ -42396,7 +43250,11 @@ var plugins_interaction_modules = {
             } else if (useSelectItem) {
               setSelectedItemInfo();
             } else if (useSelectLabel) {
-              setSelectedLabelInfo();
+              var _useBothAxis = selectLabelOpt.useBothAxis;
+
+              var _location = _this.getClickedLocation(offset);
+
+              setSelectedLabelInfo(_useBothAxis ? _location : null);
             }
 
             break;
@@ -43253,7 +44111,9 @@ var plugins_tooltip_modules = {
    * @returns {undefined}
    */
   createTooltipDOM: function createTooltipDOM() {
-    var _this = this;
+    var _this$options$tooltip,
+        _this$options$tooltip2,
+        _this = this;
 
     this.tooltipDOM = document.createElement('div');
     this.tooltipDOM.className = 'ev-chart-tooltip';
@@ -43266,9 +44126,13 @@ var plugins_tooltip_modules = {
     this.tooltipCtx = this.tooltipCanvas.getContext('2d');
     this.tooltipDOM.style.display = 'none';
     this.setFontFamily();
-    this.tooltipBodyDOM.appendChild(this.tooltipCanvas);
-    this.tooltipDOM.appendChild(this.tooltipHeaderDOM);
-    this.tooltipDOM.appendChild(this.tooltipBodyDOM);
+
+    if (!((_this$options$tooltip = this.options.tooltip) !== null && _this$options$tooltip !== void 0 && (_this$options$tooltip2 = _this$options$tooltip.formatter) !== null && _this$options$tooltip2 !== void 0 && _this$options$tooltip2.dom)) {
+      this.tooltipBodyDOM.appendChild(this.tooltipCanvas);
+      this.tooltipDOM.appendChild(this.tooltipHeaderDOM);
+      this.tooltipDOM.appendChild(this.tooltipBodyDOM);
+    }
+
     document.body.appendChild(this.tooltipDOM);
 
     if (this.options.tooltip.debouncedHide) {
@@ -43286,9 +44150,9 @@ var plugins_tooltip_modules = {
    * set tooltip's font style
    */
   setFontFamily: function setFontFamily() {
-    var _this$options$tooltip, _this$options, _this$options$tooltip2;
+    var _this$options$tooltip3, _this$options, _this$options$tooltip4;
 
-    var fontFamily = (_this$options$tooltip = (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$tooltip2 = _this$options.tooltip) === null || _this$options$tooltip2 === void 0 ? void 0 : _this$options$tooltip2.fontFamily) !== null && _this$options$tooltip !== void 0 ? _this$options$tooltip : 'Roboto';
+    var fontFamily = (_this$options$tooltip3 = (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$tooltip4 = _this$options.tooltip) === null || _this$options$tooltip4 === void 0 ? void 0 : _this$options$tooltip4.fontFamily) !== null && _this$options$tooltip3 !== void 0 ? _this$options$tooltip3 : 'Roboto';
     fontStyle = "normal normal lighter 14px ".concat(fontFamily);
     this.tooltipHeaderDOM.style.fontFamily = fontFamily;
   },
@@ -43809,6 +44673,70 @@ var plugins_tooltip_modules = {
 
     ctx.restore();
   },
+  setCustomTooltipLayoutPosition: function setCustomTooltipLayoutPosition(hitInfo, e) {
+    var _document$getElements;
+
+    var mouseX = e.pageX;
+    var mouseY = e.pageY;
+    var customTooltipEl = (_document$getElements = document.getElementsByClassName('ev-chart-tooltip-custom')) === null || _document$getElements === void 0 ? void 0 : _document$getElements[0];
+
+    if (!customTooltipEl) {
+      return;
+    }
+
+    var contentsWidth = customTooltipEl.offsetWidth;
+    var contentsHeight = customTooltipEl.offsetHeight;
+    this.tooltipDOM.style.height = 'auto';
+    this.tooltipBodyDOM.style.height = "".concat(contentsHeight + 6, "px");
+    var bodyWidth = document.body.clientWidth;
+    var bodyHeight = document.body.clientHeight;
+    var distanceMouseAndTooltip = 20;
+    var maximumPosX = bodyWidth - contentsWidth - distanceMouseAndTooltip;
+    var maximumPosY = bodyHeight - (TITLE_HEIGHT + contentsHeight) - distanceMouseAndTooltip;
+    var expectedPosX = mouseX + distanceMouseAndTooltip;
+    var expectedPosY = mouseY + distanceMouseAndTooltip;
+    var reversedPosX = mouseX - contentsWidth - distanceMouseAndTooltip;
+    var reversedPosY = mouseY - (TITLE_HEIGHT + contentsHeight) - distanceMouseAndTooltip;
+    this.tooltipDOM.style.left = expectedPosX > maximumPosX ? "".concat(reversedPosX, "px") : "".concat(expectedPosX, "px");
+    this.tooltipDOM.style.top = expectedPosY > maximumPosY ? "".concat(reversedPosY, "px") : "".concat(expectedPosY, "px");
+    this.tooltipDOM.style.display = 'block';
+  },
+
+  /**
+   * Draw User Custom Tooltip (tooltip > formatter > html)
+   * call "formatter > html" and append to tooltip DOM
+   * @param hitInfoItems
+   */
+  drawCustomTooltip: function drawCustomTooltip(hitInfoItems) {
+    var _this$options2, _opt$formatter3;
+
+    var opt = (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.tooltip;
+
+    if ((_opt$formatter3 = opt.formatter) !== null && _opt$formatter3 !== void 0 && _opt$formatter3.html) {
+      var _opt$formatter4;
+
+      this.tooltipDOM.innerHTML = '';
+      var seriesList = [];
+      Object.keys(hitInfoItems).forEach(function (sId) {
+        seriesList.push({
+          sId: sId,
+          data: hitInfoItems[sId].data,
+          color: hitInfoItems[sId].color,
+          name: hitInfoItems[sId].name
+        });
+      });
+      var userCustomTooltipBody = helpers_util.htmlToElement(opt === null || opt === void 0 ? void 0 : (_opt$formatter4 = opt.formatter) === null || _opt$formatter4 === void 0 ? void 0 : _opt$formatter4.html(seriesList));
+
+      if (userCustomTooltipBody) {
+        this.tooltipDOM.appendChild(userCustomTooltipBody);
+      }
+
+      this.tooltipDOM.style.overflowY = 'hidden';
+      this.tooltipDOM.style.backgroundColor = opt.backgroundColor;
+      this.tooltipDOM.style.border = "1px solid ".concat(opt.borderColor);
+      this.tooltipDOM.style.color = opt.fontColor;
+    }
+  },
 
   /**
    * set style properties on tooltip DOM
@@ -44227,6 +45155,9 @@ var plugins_pie_modules = {
 
 
 
+
+
+
 var element_tip_modules = {
   /**
    * Draw TextTip with tip's locationInfo
@@ -44411,6 +45342,23 @@ var element_tip_modules = {
     var dp;
 
     if (type === 'bar') {
+      var scrollbarOpt = isHorizontal ? this.scrollbar.y : this.scrollbar.x;
+
+      if (scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use) {
+        var _scrollbarOpt$range;
+
+        var _ref = (_scrollbarOpt$range = scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range) !== null && _scrollbarOpt$range !== void 0 ? _scrollbarOpt$range : [],
+            _ref2 = _slicedToArray(_ref, 2),
+            min = _ref2[0],
+            max = _ref2[1];
+
+        if (ldata >= min && ldata <= max) {
+          ldata -= min !== null && min !== void 0 ? min : 0;
+        } else {
+          return false;
+        }
+      }
+
       if (isHorizontal) {
         halfBarSize = Math.round(size.h / 2);
         cp = ysp - size.cat * ldata - size.cPad;
@@ -44522,7 +45470,7 @@ var element_tip_modules = {
     var drawTip = false;
 
     if (dataIndex.length) {
-      var _this$seriesList, _this$data$groups$, _this$data$groups;
+      var _this$seriesList, _this$data$groups$, _this$data$groups, _labelAxes$labels;
 
       drawTip = true;
       var chartRect = this.chartRect;
@@ -44538,6 +45486,7 @@ var element_tip_modules = {
       var valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
       var valuePositionCalcFunction = isHorizontal ? helpers_canvas.calculateX : helpers_canvas.calculateY;
       var labelPositionCalcFunction = isHorizontal ? helpers_canvas.calculateY : helpers_canvas.calculateX;
+      var scrollbarOpt = isHorizontal ? this.scrollbar.y : this.scrollbar.x;
       var chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       var chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
       var valueSpace = isHorizontal ? chartWidth : chartHeight;
@@ -44561,11 +45510,35 @@ var element_tip_modules = {
       var graphX;
       var lineSeries;
       var sizeObj;
+      var startIndex = 0;
+      var endIndex = (_labelAxes$labels = labelAxes.labels) === null || _labelAxes$labels === void 0 ? void 0 : _labelAxes$labels.length;
 
       if (labelAxes.labels) {
+        var labelCount = labelAxes.labels.length;
+
+        if (scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use) {
+          var range = scrollbarOpt.range,
+              interval = scrollbarOpt.interval,
+              type = scrollbarOpt.type;
+
+          var _range = _slicedToArray(range, 2),
+              min = _range[0],
+              max = _range[1];
+
+          if (truthyNumber(min) && truthyNumber(max)) {
+            labelCount = Math.floor((+max - +min) / interval) + 1;
+            startIndex = type === 'step' ? min : labelAxes.labels.findIndex(function (v) {
+              return v === +min;
+            });
+            endIndex = type === 'step' ? max : labelAxes.labels.findIndex(function (v) {
+              return v === +max;
+            });
+          }
+        }
+
         labelStartPoint = aPos[labelAxes.units.rectStart];
         labelEndPoint = aPos[labelAxes.units.rectEnd];
-        labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+        labelGap = (labelEndPoint - labelStartPoint) / labelCount;
       } else {
         graphX = this.axesSteps.x[0];
         lineSeries = seriesList.find(function (sId) {
@@ -44605,7 +45578,12 @@ var element_tip_modules = {
         }
 
         if (labelAxes.labels) {
-          var labelCenter = Math.round(labelStartPoint + labelGap * dataIndex[i]);
+          if (dataIndex[i] < startIndex || dataIndex[i] > endIndex) {
+            return;
+          }
+
+          var labelIndex = dataIndex[i] - startIndex;
+          var labelCenter = Math.round(labelStartPoint + labelGap * labelIndex);
           dp = labelCenter + labelGap / 2;
         } else {
           dp = labelPositionCalcFunction(label[i], graphX.graphMin, graphX.graphMax, chartWidth - sizeObj.comboOffset, aPos.x1 + sizeObj.comboOffset / 2);
@@ -44911,6 +45889,7 @@ var element_tip_modules = {
 
 
 
+
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
@@ -44930,6 +45909,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       Object.assign(this, plugins_legend);
       Object.assign(this, plugins_pie);
       Object.assign(this, plugins_title);
+      Object.assign(this, plugins_scrollbar);
     }
 
     if (options.type === 'heatMap' && options.legend.type === 'gradient') {
@@ -44971,6 +45951,14 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     this.isInitLegend = false;
     this.isInitTitle = false;
     this.isInit = false;
+    this.scrollbar = {
+      x: {
+        isInit: false
+      },
+      y: {
+        isInit: false
+      }
+    };
     this.seriesList = {};
     this.lastTip = {
       pos: null,
@@ -45048,6 +46036,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "initRect",
     value: function initRect() {
+      var _opt$axesX, _opt$axesX$, _opt$axesX$$scrollbar, _opt$axesY, _opt$axesY$, _opt$axesY$$scrollbar;
+
       var opt = this.options;
 
       if (opt.title.show) {
@@ -45066,6 +46056,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         this.setLegendPosition();
       }
 
+      if ((_opt$axesX = opt.axesX) !== null && _opt$axesX !== void 0 && (_opt$axesX$ = _opt$axesX[0]) !== null && _opt$axesX$ !== void 0 && (_opt$axesX$$scrollbar = _opt$axesX$.scrollbar) !== null && _opt$axesX$$scrollbar !== void 0 && _opt$axesX$$scrollbar.use || (_opt$axesY = opt.axesY) !== null && _opt$axesY !== void 0 && (_opt$axesY$ = _opt$axesY[0]) !== null && _opt$axesY$ !== void 0 && (_opt$axesY$$scrollbar = _opt$axesY$.scrollbar) !== null && _opt$axesY$$scrollbar !== void 0 && _opt$axesY$$scrollbar.use) {
+        this.initScrollbar();
+      }
+
       this.chartRect = this.getChartRect();
     }
     /**
@@ -45078,11 +46072,18 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "drawChart",
     value: function drawChart(hitInfo) {
+      var _this$scrollbar, _this$scrollbar$x, _this$scrollbar2, _this$scrollbar2$y;
+
       this.initScale();
       this.labelRange = this.getAxesLabelRange();
       this.axesSteps = this.calculateSteps();
       this.drawAxis(hitInfo);
       this.drawSeries(hitInfo);
+
+      if ((_this$scrollbar = this.scrollbar) !== null && _this$scrollbar !== void 0 && (_this$scrollbar$x = _this$scrollbar.x) !== null && _this$scrollbar$x !== void 0 && _this$scrollbar$x.use || (_this$scrollbar2 = this.scrollbar) !== null && _this$scrollbar2 !== void 0 && (_this$scrollbar2$y = _this$scrollbar2.y) !== null && _this$scrollbar2$y !== void 0 && _this$scrollbar2$y.use) {
+        this.updateScrollbarPosition();
+      }
+
       this.drawTip();
 
       if (this.bufferCanvas) {
@@ -45295,7 +46296,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     value: function createAxes(dir) {
       var axes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var ctx = this.bufferCtx;
-      var labels = this.options.type === 'heatMap' ? this.data.labels[dir] : this.data.labels;
+      var isHeatMapType = this.options.type === 'heatMap';
+      var labels = isHeatMapType ? this.data.labels[dir] : this.data.labels;
       var options = this.options;
       return axes.map(function (axis) {
         switch (axis.type) {
@@ -45333,10 +46335,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
       /* eslint-disable max-len */
       var axesXMinMax = this.axesX.map(function (axis, index) {
-        return axis.calculateScaleRange(_this3.minMax.x[index], _this3.chartRect);
+        return axis.calculateScaleRange(_this3.minMax.x[index], _this3.scrollbar.x, _this3.chartRect);
       });
       var axesYMinMax = this.axesY.map(function (axis, index) {
-        return axis.calculateScaleRange(_this3.minMax.y[index], _this3.chartRect);
+        return axis.calculateScaleRange(_this3.minMax.y[index], _this3.scrollbar.y, _this3.chartRect);
       });
       /* eslint-enable max-len */
 
@@ -45378,6 +46380,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         var range = {
           minValue: _this5.axesRange.x[index].min,
           maxValue: _this5.axesRange.x[index].max,
+          minIndex: _this5.axesRange.x[index].minIndex,
+          maxIndex: _this5.axesRange.x[index].maxIndex,
           minSteps: _this5.labelRange.x[index].min,
           maxSteps: _this5.labelRange.x[index].max
         };
@@ -45387,6 +46391,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         var range = {
           minValue: _this5.axesRange.y[index].min,
           maxValue: _this5.axesRange.y[index].max,
+          minIndex: _this5.axesRange.y[index].minIndex,
+          maxIndex: _this5.axesRange.y[index].maxIndex,
           minSteps: _this5.labelRange.y[index].min,
           maxSteps: _this5.labelRange.y[index].max
         };
@@ -45499,14 +46505,28 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         yAxisTitleHeight = _fontSize + titleMargin;
       }
 
-      var horizontalPadding = padding.left + padding.right;
-      var verticalPadding = padding.top + padding.bottom + xAxisTitleHeight + yAxisTitleHeight;
+      var xAxisScrollOpt = this.scrollbar.x;
+      var yAxisScrollOpt = this.scrollbar.y;
+      var xAxisScrollHeight = 0;
+
+      if (xAxisScrollOpt !== null && xAxisScrollOpt !== void 0 && xAxisScrollOpt.use) {
+        xAxisScrollHeight = xAxisScrollOpt === null || xAxisScrollOpt === void 0 ? void 0 : xAxisScrollOpt.height;
+      }
+
+      var yAxisScrollWidth = 0;
+
+      if (yAxisScrollOpt !== null && yAxisScrollOpt !== void 0 && yAxisScrollOpt.use) {
+        yAxisScrollWidth = yAxisScrollOpt === null || yAxisScrollOpt === void 0 ? void 0 : yAxisScrollOpt.width;
+      }
+
+      var horizontalPadding = padding.left + padding.right + yAxisScrollWidth;
+      var verticalPadding = padding.top + padding.bottom + xAxisTitleHeight + yAxisTitleHeight + xAxisScrollHeight;
       var chartWidth = width > horizontalPadding ? width - horizontalPadding : width;
       var chartHeight = height > verticalPadding ? height - verticalPadding : height;
       var x1 = padding.left;
-      var x2 = Math.max(width - padding.right, x1 + 2);
+      var x2 = Math.max(width - padding.right - yAxisScrollWidth, x1 + 2);
       var y1 = padding.top + yAxisTitleHeight;
-      var y2 = Math.max(height - padding.bottom - xAxisTitleHeight, y1 + 2);
+      var y2 = Math.max(height - padding.bottom - xAxisTitleHeight - xAxisScrollHeight, y1 + 2);
       return {
         x1: x1,
         x2: x2,
@@ -45652,6 +46672,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(updateInfo) {
+      var _this$updateScrollbar;
+
       var options = this.options;
       var data = this.data.data;
       var labels = this.data.labels;
@@ -45666,6 +46688,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         return;
       }
 
+      (_this$updateScrollbar = this.updateScrollbar) === null || _this$updateScrollbar === void 0 ? void 0 : _this$updateScrollbar.call(this);
       this.resetProps();
 
       if (updateSeries) {
@@ -45872,6 +46895,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           this.legendBoxDOM.removeEventListener('click', this.onLegendBoxClick);
           this.legendBoxDOM.removeEventListener('mouseover', this.onLegendBoxOver);
           this.legendBoxDOM.removeEventListener('mouseleave', this.onLegendBoxLeave);
+
+          if (this.options.legend.type === 'gradient') {
+            this.legendBoxDOM.removeEventListener('mousedown', this.onLegendMouseDown);
+          }
         }
 
         if (this.resizeDOM) {