evui 3.4.70 → 3.4.72

package/dist/evui.common.js

@@ -11224,7 +11224,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.70\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.72\"}");
 
 /***/ }),
 
@@ -41505,7 +41505,7 @@ var element_line_Line = /*#__PURE__*/function () {
 
     ['color', 'pointFill', 'fillColor'].forEach(function (colorProp) {
       if (_this[colorProp] === undefined) {
-        _this[colorProp] = colorProp === 'pointFill' ? _this.color : COLOR[sIdx];
+        _this[colorProp] = colorProp === 'pointFill' ? _this.color : COLOR[sIdx % COLOR.length];
       }
     });
     this.type = 'line';
@@ -41584,7 +41584,7 @@ var element_line_Line = /*#__PURE__*/function () {
       }
 
       var getOpacity = function getOpacity(colorStr) {
-        return colorStr.includes('rgba') ? helpers_util.getOpacity(colorStr) : extent.opacity;
+        return colorStr !== null && colorStr !== void 0 && colorStr.includes('rgba') ? helpers_util.getOpacity(colorStr) : extent.opacity;
       };
 
       var mainColor = this.color;
@@ -46546,6 +46546,9 @@ var plugins_title_modules = {
 
 
 
+
+
+
 
 
 var plugins_legend_modules = {
@@ -46555,7 +46558,9 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   createLegendLayout: function createLegendLayout() {
-    var _this$options, _this$options$legend;
+    var _this$options,
+        _this$options$legend,
+        _this = this;
 
     this.legendDOM = document.createElement('div');
     this.legendDOM.className = 'ev-chart-legend';
@@ -46579,10 +46584,27 @@ var plugins_legend_modules = {
     } else {
       this.legendBoxDOM.style.overflowX = 'hidden';
       this.legendBoxDOM.style.overflowY = 'auto';
+      this.legendBoxDOM.style.height = '100%';
     }
 
     this.legendDOM.appendChild(this.legendBoxDOM);
     this.wrapperDOM.appendChild(this.legendDOM);
+
+    if (this.options.legend.virtualScroll && !this.useTable) {
+      this.legendTopSpacer = document.createElement('div');
+      this.legendTopSpacer.className = 'ev-chart-legend--top-spacer';
+      this.legendTopSpacer.style.clear = 'both';
+      this.legendTopSpacer.style.opacity = 0;
+      this.legendBottomSpacer = document.createElement('div');
+      this.legendBottomSpacer.className = 'ev-chart-legend--bottom-spacer';
+      this.legendBottomSpacer.style.clear = 'both';
+      this.legendBottomSpacer.style.opacity = 0;
+      this.legendBoxDOM.appendChild(this.legendTopSpacer);
+      this.legendBoxDOM.appendChild(this.legendBottomSpacer);
+      this.updateVisibleRowCountFrameId = requestAnimationFrame(function () {
+        _this.updateVisibleRowCount();
+      });
+    }
   },
 
   /**
@@ -46593,7 +46615,7 @@ var plugins_legend_modules = {
    */
   setLegendColumnHeader: function setLegendColumnHeader() {
     var _this$options$legend2,
-        _this = this;
+        _this2 = this;
 
     var tableOpt = (_this$options$legend2 = this.options.legend) === null || _this$options$legend2 === void 0 ? void 0 : _this$options$legend2.table;
     var columns = tableOpt.columns;
@@ -46614,7 +46636,7 @@ var plugins_legend_modules = {
         columnNameDOM.dataset.type = keyText;
         helpers_util.setDOMStyle(columnNameDOM, tableOpt === null || tableOpt === void 0 ? void 0 : (_tableOpt$style = tableOpt.style) === null || _tableOpt$style === void 0 ? void 0 : _tableOpt$style.header);
 
-        _this.legendTableDOM.append(columnNameDOM);
+        _this2.legendTableDOM.append(columnNameDOM);
       }
     });
   },
@@ -46631,6 +46653,7 @@ var plugins_legend_modules = {
 
     this.isHeatMapType = this.options.type === 'heatMap';
     this.useTable = !!((_this$options$legend3 = this.options.legend) !== null && _this$options$legend3 !== void 0 && (_this$options$legend4 = _this$options$legend3.table) !== null && _this$options$legend4 !== void 0 && _this$options$legend4.use) && this.options.type !== 'heatmap' && this.options.type !== 'scatter';
+    this.legendItemHeight = 18;
 
     if (!this.isInitLegend) {
       this.createLegendLayout();
@@ -46649,6 +46672,90 @@ var plugins_legend_modules = {
     this.isLegendMove = false;
   },
 
+  /**
+   * Calculate and update the number of rows and items per row that are visible
+   * within the legend container based on its dimensions and the layout of the legend.
+   * If the legend is positioned on the right or left, only one item per row is shown.
+   * Otherwise, the number of items per row is determined by dividing the container width
+   * by the item width.
+   *
+   * @returns {undefined}
+   */
+  updateVisibleRowCount: function updateVisibleRowCount() {
+    var isLeftOrRight = this.options.legend.position === 'right' || this.options.legend.position === 'left';
+    var legendBoxHeight = this.legendBoxDOM.clientHeight;
+    var legendBoxWidth = this.legendBoxDOM.clientWidth;
+    var itemWidth = Math.max(this.options.legend.width - 8, 1);
+    var useLegendSeriesCount = Object.values(this.seriesList).filter(function (series) {
+      return series.showLegend !== false;
+    }).length;
+    this.itemsPerRow = isLeftOrRight ? 1 : Math.floor(legendBoxWidth / itemWidth);
+    this.totalRowCount = Math.ceil(useLegendSeriesCount / this.itemsPerRow);
+    this.visibleRowCount = legendBoxHeight > this.legendItemHeight ? Math.round(legendBoxHeight / this.legendItemHeight) + 1 : this.totalRowCount;
+  },
+
+  /**
+   * Calculate and set the start and end row indexes for visible items within the
+   * scrollable legend area. Determines the row range that should be displayed based
+   * on the current scroll position and the height of each legend item.
+   *
+   * @returns {undefined}
+   */
+  updateStartEndRowIndex: function updateStartEndRowIndex() {
+    var index = Math.max(Math.floor(this.legendBoxDOM.scrollTop / this.legendItemHeight), 0);
+    this.startRowIndex = index > this.totalRowCount - 1 ? 0 : index;
+    this.endRowIndex = this.startRowIndex + this.visibleRowCount;
+  },
+
+  /**
+   * Render only the visible legend items in the legend container based on the
+   * calculated start and end row indexes. Removes existing legend items,
+   * adjusts spacer heights to enable smooth scrolling, and adds only the items
+   * within the visible range.
+   *
+   * @returns {undefined}
+   */
+  renderVisibleLegends: function renderVisibleLegends() {
+    var _this3 = this;
+
+    this.updateStartEndRowIndex();
+    var elementsToRemove = this.legendBoxDOM.querySelectorAll('.ev-chart-legend-container');
+    elementsToRemove.forEach(function (element) {
+      return element.remove();
+    });
+    var totalScrollHeight = this.totalRowCount * this.legendItemHeight;
+    var top = this.startRowIndex * this.legendItemHeight;
+    var bottom = Math.max(totalScrollHeight - this.visibleRowCount * this.legendItemHeight - top, 0);
+    this.legendTopSpacer.style.height = "".concat(top, "px");
+    this.legendBottomSpacer.style.height = "".concat(bottom, "px");
+    var startIndex = this.startRowIndex * this.itemsPerRow;
+    var endIndex = this.endRowIndex * this.itemsPerRow;
+    var groups = this.data.groups.at(0);
+    var useLegendSeries = [];
+
+    if (groups) {
+      useLegendSeries = groups.slice().reverse().filter(function (sId) {
+        return _this3.seriesList[sId].showLegend;
+      }).map(function (sId) {
+        return [sId, _this3.seriesList[sId]];
+      });
+    } else {
+      useLegendSeries = Object.entries(this.seriesList).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            series = _ref2[1];
+
+        return series.showLegend;
+      });
+    }
+
+    useLegendSeries.slice(startIndex, endIndex).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          series = _ref4[1];
+
+      _this3.addLegend(series);
+    });
+  },
+
   /**
    * Add legend with group information to align each series properly.
    * Especially if a chart is stacked,
@@ -46657,36 +46764,86 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   addLegendList: function addLegendList() {
-    var _this2 = this;
+    var _this4 = this;
 
     var groups = this.data.groups;
     var seriesList = this.seriesList;
+
+    if (this.options.legend.virtualScroll) {
+      if (this.useTable) {
+        this.addLegendForGroups(groups, seriesList, true);
+        this.addStandaloneLegends(seriesList, true);
+      } else {
+        this.renderVisibleLegendsFrameId = requestAnimationFrame(function () {
+          _this4.renderVisibleLegends();
+        });
+      }
+    } else {
+      this.addLegendForGroups(groups, seriesList, this.useTable);
+      this.addStandaloneLegends(seriesList, this.useTable);
+    }
+  },
+
+  /**
+   * Adds legends for each group in `groups` array, iterating through each series
+   * within the group in reverse order. This ensures the legends align with the series
+   * order as displayed in the chart. Only adds series with `showLegend` set to `true`.
+   *
+   * @param {Array} groups - Array of groups containing series identifiers.
+   * @param {Object} seriesList - Object containing all series, keyed by series ID.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addLegendForGroups: function addLegendForGroups(groups, seriesList, useTable) {
+    var _this5 = this;
+
     groups.forEach(function (group) {
       group.slice().reverse().forEach(function (sId) {
         var series = seriesList[sId];
 
         if (series && series.showLegend) {
-          if (_this2.useTable) {
-            _this2.addLegendWithValues(series);
-          } else {
-            _this2.addLegend(series);
-          }
+          _this5.addLegendBasedOnType(series, useTable);
         }
       });
     });
-    Object.values(seriesList).forEach(function (series) {
-      if (series.isExistGrp || !series.showLegend) {
-        return;
-      }
+  },
 
-      if (_this2.useTable) {
-        _this2.addLegendWithValues(series);
-      } else {
-        _this2.addLegend(series);
+  /**
+   * Adds legends for series that are not part of any group. Iterates through each series
+   * in `seriesList` and only adds those that are not assigned to any group (based on `isExistGrp`)
+   * and have `showLegend` set to `true`.
+   *
+   * @param {Object} seriesList - Object containing all series, keyed by series ID.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addStandaloneLegends: function addStandaloneLegends(seriesList, useTable) {
+    var _this6 = this;
+
+    Object.values(seriesList).forEach(function (series) {
+      if (!series.isExistGrp && series.showLegend) {
+        _this6.addLegendBasedOnType(series, useTable);
       }
     });
   },
 
+  /**
+   * Adds a legend item for a specific series, determining whether to include additional
+   * values based on the `useTable` parameter. Calls `addLegendWithValues` if `useTable` is true,
+   * otherwise calls `addLegend`.
+   *
+   * @param {Object} series - Series object containing data to display in the legend.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addLegendBasedOnType: function addLegendBasedOnType(series, useTable) {
+    if (useTable) {
+      this.addLegendWithValues(series);
+    } else {
+      this.addLegend(series);
+    }
+  },
+
   /**
    * Add Legend with Color Information
    * Only Heatmap chart
@@ -46694,7 +46851,7 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   addColorLegendList: function addColorLegendList() {
-    var _this3 = this;
+    var _this7 = this;
 
     var seriesList = this.seriesList;
     Object.values(seriesList).forEach(function (series) {
@@ -46742,7 +46899,7 @@ var plugins_legend_modules = {
             }
           }
 
-          _this3.addLegend({
+          _this7.addLegend({
             cId: id,
             color: color,
             name: name,
@@ -46785,7 +46942,7 @@ var plugins_legend_modules = {
    * @returns {undefined}
    */
   initEvent: function initEvent() {
-    var _this4 = this;
+    var _this8 = this;
 
     if (this.isInitLegend) {
       return;
@@ -46804,15 +46961,15 @@ var plugins_legend_modules = {
      */
 
     this.onLegendBoxClick = function (e) {
-      var opt = _this4.options.legend;
+      var opt = _this8.options.legend;
 
       if (opt !== null && opt !== void 0 && opt.stopClickEvt) {
         return;
       }
 
-      var chartIdx = _this4.data.chartIdx;
+      var chartIdx = _this8.data.chartIdx;
 
-      var targetDOM = _this4.getContainerDOM(e);
+      var targetDOM = _this8.getContainerDOM(e);
 
       if (!targetDOM) {
         return;
@@ -46824,7 +46981,7 @@ var plugins_legend_modules = {
       var valueDOMList = targetDOM === null || targetDOM === void 0 ? void 0 : targetDOM.getElementsByClassName(classList.value);
       var isActive = !(targetDOM !== null && targetDOM !== void 0 && targetDOM.className.includes('inactive'));
 
-      if (isActive && _this4.seriesInfo.count === 1) {
+      if (isActive && _this8.seriesInfo.count === 1) {
         return;
       }
 
@@ -46833,7 +46990,7 @@ var plugins_legend_modules = {
       }
 
       if (isActive) {
-        _this4.seriesInfo.count--;
+        _this8.seriesInfo.count--;
         var inactiveColor = opt.inactive;
         colorDOM.style.backgroundColor = inactiveColor;
         colorDOM.style.borderColor = inactiveColor;
@@ -46842,7 +46999,7 @@ var plugins_legend_modules = {
           dom.style.color = inactiveColor;
         });
       } else {
-        _this4.seriesInfo.count++;
+        _this8.seriesInfo.count++;
         var seriesColor;
 
         if (typeof series.color !== 'string') {
@@ -46871,15 +47028,15 @@ var plugins_legend_modules = {
       series.show = !series.show;
       targetDOM.classList.toggle('inactive');
 
-      if (_this4.brushSeries) {
-        var seriesList = _toConsumableArray(_this4.brushSeries.list);
+      if (_this8.brushSeries) {
+        var seriesList = _toConsumableArray(_this8.brushSeries.list);
 
-        seriesList[chartIdx] = _this4.seriesList;
-        _this4.brushSeries.list = seriesList;
-        _this4.brushSeries.chartIdx = chartIdx;
+        seriesList[chartIdx] = _this8.seriesList;
+        _this8.brushSeries.list = seriesList;
+        _this8.brushSeries.chartIdx = chartIdx;
       }
 
-      _this4.update({
+      _this8.update({
         updateSeries: false,
         updateSelTip: {
           update: true,
@@ -46897,7 +47054,7 @@ var plugins_legend_modules = {
     this.onLegendBoxOver = function (e) {
       var _targetDOM$series;
 
-      var targetDOM = _this4.getContainerDOM(e);
+      var targetDOM = _this8.getContainerDOM(e);
 
       if (!targetDOM) {
         return;
@@ -46906,10 +47063,10 @@ var plugins_legend_modules = {
       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: _this4.options.type
+        type: _this8.options.type
       };
 
-      _this4.update({
+      _this8.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -46928,7 +47085,7 @@ var plugins_legend_modules = {
 
 
     this.onLegendBoxLeave = function () {
-      _this4.update({
+      _this8.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -46943,6 +47100,12 @@ var plugins_legend_modules = {
     this.legendBoxDOM.addEventListener('click', this.onLegendBoxClick);
     this.legendBoxDOM.addEventListener('mouseover', this.onLegendBoxOver);
     this.legendBoxDOM.addEventListener('mouseleave', this.onLegendBoxLeave);
+
+    if (this.options.legend.virtualScroll && !this.useTable) {
+      this.legendBoxDOM.addEventListener('resize', this.updateVisibleRowCount);
+      this.legendBoxDOM.addEventListener('scroll', this.renderVisibleLegends.bind(this));
+    }
+
     this.initResizeEvent();
   },
 
@@ -46951,7 +47114,7 @@ var plugins_legend_modules = {
    * Only Heatmap
    */
   initEventForColorLegend: function initEventForColorLegend() {
-    var _this5 = this;
+    var _this9 = this;
 
     if (this.isInitLegend) {
       return;
@@ -46966,15 +47129,15 @@ var plugins_legend_modules = {
     this.onLegendBoxClick = function (e) {
       var _targetDOM$series2;
 
-      var opt = _this5.options.legend;
+      var opt = _this9.options.legend;
 
       if (opt !== null && opt !== void 0 && opt.stopClickEvt) {
         return;
       }
 
-      var series = Object.values(_this5.seriesList)[0];
+      var series = Object.values(_this9.seriesList)[0];
 
-      var targetDOM = _this5.getContainerDOM(e);
+      var targetDOM = _this9.getContainerDOM(e);
 
       if (!targetDOM) {
         return;
@@ -47018,7 +47181,7 @@ var plugins_legend_modules = {
       colorDOM.classList.toggle('inactive');
       nameDOM.classList.toggle('inactive');
 
-      _this5.update({
+      _this9.update({
         updateSeries: false,
         updateSelTip: {
           update: true,
@@ -47036,9 +47199,9 @@ var plugins_legend_modules = {
     this.onLegendBoxOver = function (e) {
       var _Object$values, _targetDOM$series4;
 
-      var series = (_Object$values = Object.values(_this5.seriesList)) === null || _Object$values === void 0 ? void 0 : _Object$values[0];
+      var series = (_Object$values = Object.values(_this9.seriesList)) === null || _Object$values === void 0 ? void 0 : _Object$values[0];
 
-      var targetDOM = _this5.getContainerDOM(e);
+      var targetDOM = _this9.getContainerDOM(e);
 
       if (!targetDOM) {
         return;
@@ -47047,13 +47210,13 @@ var plugins_legend_modules = {
       var targetId = targetDOM === null || targetDOM === void 0 ? void 0 : (_targetDOM$series4 = targetDOM.series) === null || _targetDOM$series4 === void 0 ? void 0 : _targetDOM$series4.cId;
       var legendHitInfo = {
         sId: targetId,
-        type: _this5.options.type
+        type: _this9.options.type
       };
       series.colorState.forEach(function (colorItem) {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
       });
 
-      _this5.update({
+      _this9.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -47072,12 +47235,12 @@ var plugins_legend_modules = {
 
 
     this.onLegendBoxLeave = function () {
-      var series = Object.values(_this5.seriesList)[0];
+      var series = Object.values(_this9.seriesList)[0];
       series.colorState.forEach(function (item) {
         item.state = 'normal';
       });
 
-      _this5.update({
+      _this9.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
@@ -47092,7 +47255,7 @@ var plugins_legend_modules = {
     this.initResizeEvent();
   },
   initResizeEvent: function initResizeEvent() {
-    var _this6 = this;
+    var _this10 = this;
 
     /**
      * callback for resizeDOM click event
@@ -47104,33 +47267,33 @@ var plugins_legend_modules = {
     this.onResizeMouseDown = function (e) {
       e.stopPropagation();
       e.preventDefault();
-      var opt = _this6.options;
+      var opt = _this10.options;
       var pos = opt.legend.position;
       var title = opt.title.show ? opt.title.height : 0;
-      var ghostDOM = _this6.ghostDOM;
-      _this6.resizeDOM.style.display = 'none';
+      var ghostDOM = _this10.ghostDOM;
+      _this10.resizeDOM.style.display = 'none';
 
-      _this6.wrapperDOM.appendChild(ghostDOM); // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
+      _this10.wrapperDOM.appendChild(ghostDOM); // mouse down 시, resizeDOM의 위치를 기반으로 ghostDOM의 위치를 세팅
 
 
       if (pos === 'left' || pos === 'right') {
         ghostDOM.style.top = "".concat(title, "px");
-        ghostDOM.style.left = _this6.resizeDOM.style.left;
-        ghostDOM.style.right = _this6.resizeDOM.style.right;
-        ghostDOM.style.height = _this6.resizeDOM.style.height;
+        ghostDOM.style.left = _this10.resizeDOM.style.left;
+        ghostDOM.style.right = _this10.resizeDOM.style.right;
+        ghostDOM.style.height = _this10.resizeDOM.style.height;
       } else {
         ghostDOM.classList.add('horizontal');
 
         if (pos === 'top') {
-          ghostDOM.style.top = _this6.resizeDOM.style.top;
+          ghostDOM.style.top = _this10.resizeDOM.style.top;
         } else if (pos === 'bottom') {
-          ghostDOM.style.bottom = _this6.resizeDOM.style.bottom;
+          ghostDOM.style.bottom = _this10.resizeDOM.style.bottom;
         }
       }
 
-      _this6.wrapperDOM.addEventListener('mousemove', _this6.mouseMove, false);
+      _this10.wrapperDOM.addEventListener('mousemove', _this10.mouseMove, false);
 
-      _this6.wrapperDOM.addEventListener('mouseup', _this6.mouseUp, false);
+      _this10.wrapperDOM.addEventListener('mouseup', _this10.mouseUp, false);
     };
 
     if (this.resizeDOM) {
@@ -47167,7 +47330,7 @@ var plugins_legend_modules = {
         _this$options2$legend,
         _this$options2$legend2,
         _this$legendBoxDOM,
-        _this7 = this;
+        _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();
@@ -47185,7 +47348,7 @@ var plugins_legend_modules = {
 
         var seriesId = row.series.sId;
         var value = aggregations === null || aggregations === void 0 ? void 0 : (_aggregations$seriesI = aggregations[seriesId]) === null || _aggregations$seriesI === void 0 ? void 0 : _aggregations$seriesI[key];
-        dom.textContent = _this7.getFormattedValue(columns[key], value);
+        dom.textContent = _this11.getFormattedValue(columns[key], value);
       });
     });
   },
@@ -47202,6 +47365,7 @@ var plugins_legend_modules = {
 
   /**
    * To update legend, remove all of legendBoxDOM's children
+   * (except spacers when virtualScroll is enabled)
    *
    * @returns {undefined}
    */
@@ -47220,6 +47384,9 @@ var plugins_legend_modules = {
       }
 
       this.setLegendColumnHeader();
+    } else if (this.options.legend.virtualScroll) {
+      this.updateVisibleRowCount();
+      this.renderVisibleLegends();
     } else {
       while (legendBoxDOM.hasChildNodes()) {
         legendBoxDOM.removeChild(legendBoxDOM.firstChild);
@@ -47237,6 +47404,16 @@ var plugins_legend_modules = {
   destroyLegend: function destroyLegend() {
     var legendDOM = this.legendDOM;
 
+    if (this.renderVisibleLegendsFrameId != null) {
+      cancelAnimationFrame(this.renderVisibleLegendsFrameId);
+      this.renderVisibleLegendsFrameId = null;
+    }
+
+    if (this.updateVisibleRowCountFrameId != null) {
+      cancelAnimationFrame(this.updateVisibleRowCountFrameId);
+      this.updateVisibleRowCountFrameId = null;
+    }
+
     if (!legendDOM) {
       return;
     }
@@ -47292,7 +47469,6 @@ var plugins_legend_modules = {
     nameDOM.textContent = series.name;
     nameDOM.setAttribute('title', series.name);
     nameDOM.dataset.type = 'name';
-    this.legendDOM.style.padding = '5px 0 0 0';
     containerDOM.appendChild(colorDOM);
     containerDOM.appendChild(nameDOM);
 
@@ -47303,11 +47479,11 @@ var plugins_legend_modules = {
       containerDOM.style.width = '100%';
     }
 
-    containerDOM.style.height = '18px';
+    containerDOM.style.height = "".concat(this.legendItemHeight, "px");
     containerDOM.style.display = 'inline-block';
     containerDOM.style.overflow = 'hidden';
     containerDOM.dataset.type = 'container';
-    this.legendBoxDOM.appendChild(containerDOM);
+    this.legendBoxDOM.insertBefore(containerDOM, this.legendBottomSpacer);
 
     if (series.show) {
       this.seriesInfo.count++;
@@ -47325,7 +47501,7 @@ var plugins_legend_modules = {
         _opt$table3,
         _opt$table3$style,
         _columns$name,
-        _this8 = this;
+        _this12 = this;
 
     var opt = this.options.legend;
     var columns = opt === null || opt === void 0 ? void 0 : (_opt$table2 = opt.table) === null || _opt$table2 === void 0 ? void 0 : _opt$table2.columns;
@@ -47421,7 +47597,7 @@ var plugins_legend_modules = {
       if (columns[key].use) {
         var _columns$key2;
 
-        var formattedTxt = _this8.getFormattedValue(columns[key], aggregations[key]);
+        var formattedTxt = _this12.getFormattedValue(columns[key], aggregations[key]);
 
         var valueDOM = document.createElement('td');
         valueDOM.className = 'ev-chart-legend--table__value';
@@ -47463,15 +47639,15 @@ var plugins_legend_modules = {
     var title = opt !== null && opt !== void 0 && (_opt$title = opt.title) !== null && _opt$title !== void 0 && _opt$title.show ? opt === null || opt === void 0 ? void 0 : (_opt$title2 = opt.title) === null || _opt$title2 === void 0 ? void 0 : _opt$title2.height : 0;
     var positionTop = title + (opt === null || opt === void 0 ? void 0 : (_opt$legend2 = opt.legend) === null || _opt$legend2 === void 0 ? void 0 : _opt$legend2.height);
 
-    var _ref = (_opt$legend$padding = opt === null || opt === void 0 ? void 0 : (_opt$legend3 = opt.legend) === null || _opt$legend3 === void 0 ? void 0 : _opt$legend3.padding) !== null && _opt$legend$padding !== void 0 ? _opt$legend$padding : {},
-        _ref$top = _ref.top,
-        top = _ref$top === void 0 ? 0 : _ref$top,
-        _ref$bottom = _ref.bottom,
-        bottom = _ref$bottom === void 0 ? 0 : _ref$bottom,
-        _ref$left = _ref.left,
-        left = _ref$left === void 0 ? 0 : _ref$left,
-        _ref$right = _ref.right,
-        right = _ref$right === void 0 ? 0 : _ref$right;
+    var _ref5 = (_opt$legend$padding = opt === null || opt === void 0 ? void 0 : (_opt$legend3 = opt.legend) === null || _opt$legend3 === void 0 ? void 0 : _opt$legend3.padding) !== null && _opt$legend$padding !== void 0 ? _opt$legend$padding : {},
+        _ref5$top = _ref5.top,
+        top = _ref5$top === void 0 ? 0 : _ref5$top,
+        _ref5$bottom = _ref5.bottom,
+        bottom = _ref5$bottom === void 0 ? 0 : _ref5$bottom,
+        _ref5$left = _ref5.left,
+        left = _ref5$left === void 0 ? 0 : _ref5$left,
+        _ref5$right = _ref5.right,
+        right = _ref5$right === void 0 ? 0 : _ref5$right;
 
     if (!wrapperStyle || !legendStyle) {
       return;
@@ -47815,9 +47991,9 @@ var plugins_legend_modules = {
    * @param value
    * @returns {string}
    */
-  getFormattedValue: function getFormattedValue(_ref2, value) {
-    var formatter = _ref2.formatter,
-        decimalPoint = _ref2.decimalPoint;
+  getFormattedValue: function getFormattedValue(_ref6, value) {
+    var formatter = _ref6.formatter,
+        decimalPoint = _ref6.decimalPoint;
 
     if (value === undefined || value === null) {
       return 'Null';
@@ -54117,6 +54293,11 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           if (this.options.legend.type === 'gradient') {
             this.legendBoxDOM.removeEventListener('mousedown', this.onLegendMouseDown);
           }
+
+          if (this.options.legend.virtualScroll && !this.useTable) {
+            this.legendBoxDOM.removeEventListener('resize', this.updateVisibleRowCount);
+            this.legendBoxDOM.removeEventListener('scroll', this.renderVisibleLegends);
+          }
         }
 
         if (this.resizeDOM) {
@@ -54141,6 +54322,16 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         this.tooltipDOM = null;
       }
 
+      if (this.renderVisibleLegendsFrameId != null) {
+        cancelAnimationFrame(this.renderVisibleLegendsFrameId);
+        this.renderVisibleLegendsFrameId = null;
+      }
+
+      if (this.updateVisibleRowCountFrameId != null) {
+        cancelAnimationFrame(this.updateVisibleRowCountFrameId);
+        this.updateVisibleRowCountFrameId = null;
+      }
+
       this.wrapperDOM = null;
       this.chartDOM = null;
       this.legendDOM = null;
@@ -54831,6 +55022,7 @@ var DEFAULT_OPTIONS = {
     width: 140,
     height: 24,
     allowResize: false,
+    virtualScroll: false,
     table: {
       use: false,
       columns: {