evui 3.4.154 → 3.4.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.154",
+  "version": "3.4.156",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/chart.core.js

@@ -268,7 +268,13 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
+
     this.labelRange = this.getAxesLabelRange();
+
+    if (this.scrollbar?.x?.use || this.scrollbar?.y?.use) {
+      this.updateScrollbarPosition();
+    }
+
     this.axesSteps = this.calculateSteps();
 
     this.adjustXAndYAxisWidth();
@@ -276,10 +282,6 @@ class EvChart {
     this.drawAxis(hitInfo);
     this.drawSeries(hitInfo);
 
-    if (this.scrollbar?.x?.use || this.scrollbar?.y?.use) {
-      this.updateScrollbarPosition();
-    }
-
     this.drawTip();
 
     if (
@@ -452,10 +454,10 @@ class EvChart {
               const lastHitInfo = this.lastHitInfo;
               const defaultSelectInfo = this.defaultSelectItemInfo;
 
-              if (lastHitInfo?.maxIndex || lastHitInfo?.maxIndex === 0) {
+              if (lastHitInfo?.dataIndex || lastHitInfo?.dataIndex === 0) {
                 selectInfo = {
                   seriesID: lastHitInfo.sId,
-                  dataIndex: lastHitInfo.maxIndex,
+                  dataIndex: lastHitInfo.dataIndex,
                 };
               } else if (defaultSelectInfo?.dataIndex || defaultSelectInfo?.dataIndex === 0) {
                 selectInfo = { ...defaultSelectInfo };
@@ -856,12 +858,18 @@ class EvChart {
    * @param {boolean} updateData is update data
    * @returns {undefined}
    */
-  updateScrollbar(updateData) {
-    if (this.scrollbar?.x?.isInit || this.options.axesX?.[0]?.scrollbar?.use) {
+  updateScrollbar(updateData, updateByScrollbar) {
+    const isForceUpdate = updateByScrollbar || updateData;
+    const xUse = this.options.axesX?.[0]?.scrollbar?.use ?? false;
+    const yUse = this.options.axesY?.[0]?.scrollbar?.use ?? false;
+    const prevXUse = this.scrollbar?.x?.use ?? false;
+    const prevYUse = this.scrollbar?.y?.use ?? false;
+
+    if (xUse !== prevXUse || xUse || (isForceUpdate && xUse)) {
       this.updateScrollbarInfo('x', updateData);
     }
 
-    if (this.scrollbar?.y?.isInit || this.options.axesY?.[0]?.scrollbar?.use) {
+    if (yUse !== prevYUse || yUse || (isForceUpdate && yUse)) {
       this.updateScrollbarInfo('y', updateData);
     }
   }
@@ -886,13 +894,14 @@ class EvChart {
       updateData,
       updateTooltip,
       lightUpdate,
+      updateByScrollbar,
     } = updateInfo;
 
     if (!this.isInit) {
       return;
     }
 
-    this.updateScrollbar(updateData);
+    this.updateScrollbar(updateData, updateByScrollbar);
 
     this.resetProps();
 

package/src/components/chart/element/element.bar.js

@@ -115,13 +115,12 @@ class Bar {
     const startIndex = truthyNumber(minIndex) ? minIndex : 0;
     const endIndex = truthyNumber(maxIndex) ? maxIndex : this.data.length - 1;
 
-    // 스크롤 범위 내에서만 루프 돌림
+    this.visibleStartIndex = startIndex;
+
     for (let i = startIndex; i <= endIndex; i++) {
-      const screenIndex = i - startIndex; // 현재 화면상의 위치 인덱스
-      const item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
+      const screenIndex = i - startIndex;
+      const item = this.data[i];
       if (item) {
-        // 스크롤 offset(minIndex)만큼 보정해서 그리기
-
         const categoryPoint = isHorizontal
           ? ysp - (cArea * screenIndex) - cPad
           : xsp + (cArea * screenIndex) + cPad;
@@ -214,11 +213,7 @@ class Bar {
         item.yp = y; // eslint-disable-line
         item.w = w; // eslint-disable-line
         item.h = isHorizontal ? -h : h; // eslint-disable-line
-        item.index = i; // 실제 데이터 인덱스 (스크롤 offset 포함)
-
-        // 검색(hitInfo) 로직은 this.data[0..filteredCount-1] 범위만 검사하므로,
-        // 현재 화면에 그린 항목을 배열 앞쪽으로 매핑해준다.
-        this.data[screenIndex] = item;
+        item.index = i;
       }
     }
   }
@@ -294,13 +289,21 @@ class Bar {
    */
   findGraphData(offset, isHorizontal, dataIndex, useIndicatorOnLabel) {
     if (typeof dataIndex === 'number' && this.show && useIndicatorOnLabel) {
-      const gdata = this.data;
+      const barData = this.data;
       const item = { data: null, hit: false, color: this.color };
 
-      if (gdata[dataIndex]) {
-        item.data = gdata[dataIndex];
-        item.index = dataIndex;
-        item.hit = this.isPointInBar(offset, gdata[dataIndex]);
+      // dataIndex를 현재 화면에 보이는 범위로 clamp하여 stale xp/yp 참조 방지
+      const visStart = this.visibleStartIndex ?? 0;
+      const visEnd = visStart + (this.filteredCount ?? barData.length) - 1;
+      const clampedIndex = Math.max(visStart, Math.min(dataIndex, visEnd));
+
+      if (barData[clampedIndex]) {
+        item.data = barData[clampedIndex];
+        item.index = clampedIndex;
+        item.hit = this.isPointInBar(offset, barData[clampedIndex]);
+        // bar 박스 내부 클릭은 "직접 박스 히트"로 표시.
+        // findHitItem에서 line 포인트 근접 히트보다 우선 선택되도록 하기 위함.
+        item.directHit = item.hit;
       }
 
       return item;
@@ -326,10 +329,11 @@ class Bar {
     const [xp, yp] = offset;
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
+    const startIdx = this.visibleStartIndex ?? 0;
     const totalCount = this.filteredCount ?? gdata.length;
 
-    let s = 0;
-    let e = totalCount - 1;
+    let s = startIdx;
+    let e = startIdx + totalCount - 1;
 
     while (s <= e) {
       const m = Math.floor((s + e) / 2);
@@ -346,6 +350,8 @@ class Bar {
         item.data = barData;
         item.index = barData.index;
         item.hit = this.isPointInBar(offset, barData);
+        // bar 박스 내부 클릭은 "직접 박스 히트"로 표시 (findHitItem 우선순위용).
+        item.directHit = item.hit;
         return item;
       }
 

package/src/components/chart/element/element.line.js

@@ -328,6 +328,24 @@ class Line {
     const gdata = this.data.filter(data => !Util.isNullOrUndefined(data.x));
     const isLinearInterpolation = this.useLinearInterpolation();
 
+    // line 포인트 "정확 히트" 판정용 반경.
+    // combo 차트에서 line 포인트 중심을 직격한 경우, 같은 좌표의 bar(directHit)보다
+    // line이 우선되도록 item.directHit = true로 표시한다. 그 외(단순 Y축 근접)는 기존처럼 hit만.
+    // 포인트 반지름에 기본 포인트 크기(LINE_OPTION.pointSize)만큼의 클릭 여유 마진을 더하고,
+    // 시각적으로 하이라이트되는 포인트 반경(highlight.maxSize)을 최소 보장값으로 사용한다.
+    const directHitRadius = Math.max(
+      (this.pointSize ?? LINE_OPTION.pointSize) + LINE_OPTION.pointSize,
+      LINE_OPTION.highlight.maxSize,
+    );
+    const isLinePointDirectHit = (point) => {
+      if (!point || point.xp === undefined || point.yp === undefined) {
+        return false;
+      }
+      const dx = xp - point.xp;
+      const dy = yp - point.yp;
+      return dx * dx + dy * dy <= directHitRadius * directHitRadius;
+    };
+
     if (gdata?.length) {
       if (typeof dataIndex === 'number' && this.show) {
         item.data = gdata[dataIndex];
@@ -340,6 +358,10 @@ class Line {
           if (yDist <= directHitThreshold) {
             item.hit = true;
           }
+          if (isLinePointDirectHit(point)) {
+            item.hit = true;
+            item.directHit = true;
+          }
         }
       } else if (typeof this.beforeFindItemIndex === 'number' && this.beforeFindItemIndex !== -1 && this.show && useSelectLabelOrItem) {
         item.data = gdata[this.beforeFindItemIndex];
@@ -472,6 +494,10 @@ class Line {
             if (yDist <= directHitThreshold) {
               item.hit = true;
             }
+            if (isLinePointDirectHit(point)) {
+              item.hit = true;
+              item.directHit = true;
+            }
           }
         }
       }

package/src/components/chart/element/element.tip.js

@@ -155,7 +155,7 @@ const modules = {
 
     if (tipType === 'sel') {
       if (hitInfo && hitInfo.label !== null) {
-        lastTip.pos = type === 'bar' ? hitInfo.maxIndex : hitInfo.label;
+        lastTip.pos = type === 'bar' ? hitInfo.dataIndex : hitInfo.label;
         ldata = lastTip.pos;
       } else if (lastTip.pos !== null) {
         ldata = lastTip.pos;
@@ -339,7 +339,7 @@ const modules = {
         let labelCount = labelAxes.labels.length;
         if (scrollbarOpt?.use) {
           const { range, interval, type } = scrollbarOpt;
-          const [min, max] = range;
+          const [min, max] = range ?? [];
           if (truthyNumber(min) && truthyNumber(max)) {
             labelCount = Math.floor((+max - +min) / interval) + 1;
             startIndex = type === 'step' ? min : labelAxes.labels.findIndex(v => v === +min);

package/src/components/chart/model/model.store.js

@@ -809,12 +809,9 @@ const modules = {
         return null;
       }
 
-      itemPosition = [this.getItemByPosition(
-        [dataInfo.xp, dataInfo.yp],
-        useApproximate,
-        dataIndex,
-        true,
-      )];
+      itemPosition = [
+        this.getHitItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate, dataIndex, true),
+      ];
     } else {
       const seriesList = Object.entries(this.seriesList);
       let firShowSeriesID;
@@ -835,7 +832,7 @@ const modules = {
           return null;
         }
 
-        return this.getItemByPosition(
+        return this.getHitItemByPosition(
           [dataInfo?.xp ?? 0, dataInfo?.yp ?? 0],
           useApproximate,
           idx,
@@ -863,31 +860,48 @@ const modules = {
   },
 
   /**
-   * Find graph item by position x and y
+   * Find the hit item at the given position (x, y).
+   *
+   * 선택 우선순위:
+   *   1. directHit (bar 박스 내부 클릭) — 가장 가까운 것
+   *   2. hit (line 포인트 근접 등) — 가장 가까운 것
+   *   3. hit이 전혀 없으면 데이터가 있는 첫 시리즈로 fallback (기존 동작 호환)
+   *
+   * 과거에는 "같은 라벨 위에서 값이 가장 큰 시리즈"를 돌려주는 max-value 덮어쓰기 방식이었으나,
+   * bar + line combo 차트에서 작은 bar를 클릭해도 큰 값의 line이 선택되는 버그의 원인이었다.
+   * 이번 수정으로 사용자가 실제로 가리킨 시리즈(hit)가 선택되도록 바뀐다.
+   *
    * @param {array}   offset          position x and y
    * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
    * @param {number} dataIndex        selected data index
    * @param {boolean}  useSelectLabelOrItem   used to display select label/item at tooltip location
    *
-   * @returns {object} clicked item information
+   * @returns {object} hit item information
    */
-  getItemByPosition(
-    offset,
-    useApproximate = false,
-    dataIndex,
-    useSelectLabelOrItem = false,
-  ) {
+  getHitItemByPosition(offset, useApproximate = false, dataIndex, useSelectLabelOrItem = false) {
     const seriesIDs = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
-    let maxType = null;
-    let maxLabel = null;
-    let maxValuePos = null;
-    let maxValue = null;
-    let maxSeriesID = '';
+    // hit 기반 결과 (최우선)
+    let hitType = null;
+    let hitLabel = null;
+    let hitValuePos = null;
+    let hitValue = null;
+    let hitSeriesID = '';
+    let hitDataIndex = null;
+    let hitDistance = Infinity;
+    let hasDirectHit = false;
+
+    // fallback: hit이 전혀 없을 때 사용할 "데이터 있는 첫 시리즈" 정보
+    let fallbackType = null;
+    let fallbackLabel = null;
+    let fallbackValuePos = null;
+    let fallbackValue = null;
+    let fallbackSeriesID = '';
+    let fallbackDataIndex = null;
+
     let acc = 0;
     let useStack = false;
-    let maxIndex = null;
 
     for (let ix = 0; ix < seriesIDs.length; ix++) {
       const seriesID = seriesIDs[ix];
@@ -907,12 +921,13 @@ const modules = {
 
         if (data) {
           if (Util.isPieType(item.type)) {
-            maxLabel = seriesID;
-            maxSeriesID = seriesID;
-            maxValuePos = (data.ea - data.sa) / 2;
-            maxValue = data.o;
-            maxIndex = data.index;
-            maxType = item.type;
+            // pie 차트는 hit detection 체계가 달라 기존 동작 유지 (단일 pie 시리즈가 일반적)
+            hitType = item.type;
+            hitLabel = seriesID;
+            hitSeriesID = seriesID;
+            hitValuePos = (data.ea - data.sa) / 2;
+            hitValue = data.o;
+            hitDataIndex = data.index;
           } else {
             const ldata = isHorizontal ? data.y : data.x;
             const lp = isHorizontal ? data.yp : data.xp;
@@ -927,23 +942,45 @@ const modules = {
                 acc += data.y;
               }
 
+              // fallback 기록: 데이터가 있는 첫 시리즈를 저장
+              if (fallbackSeriesID === '') {
+                fallbackType = series.type;
+                fallbackLabel = ldata;
+                fallbackValuePos = lp;
+                fallbackValue = g;
+                fallbackSeriesID = seriesID;
+                fallbackDataIndex = index;
+              }
 
-              if (maxType === 'bar' && useStack) {
-                if (item.hit) {
-                  maxValue = g;
-                  maxSeriesID = seriesID;
-                  maxIndex = index;
-                  maxLabel = ldata;
-                  maxValuePos = lp;
-                  maxType = series.type;
+              // hit 기반 선택: item.hit이 true이고 유효한 좌표가 있을 때만 고려
+              if (item.hit && data.xp !== undefined && data.yp !== undefined) {
+                const distance = (data.xp - offset[0]) ** 2 + (data.yp - offset[1]) ** 2;
+
+                if (item.directHit) {
+                  // 직접 박스 히트는 최우선. 여러 개이면 가장 가까운 것.
+                  if (!hasDirectHit || distance < hitDistance) {
+                    hitDistance = distance;
+                    hitType = series.type;
+                    hitLabel = ldata;
+                    hitValuePos = lp;
+                    hitValue = g;
+                    hitSeriesID = seriesID;
+                    hitDataIndex = index;
+                  }
+                  hasDirectHit = true;
+                } else if (!hasDirectHit) {
+                  // directHit가 없을 때만 일반 hit 거리 비교 참여
+                  // (라인 근접 히트가 박스 직접 히트를 이기지 못하도록)
+                  if (distance < hitDistance) {
+                    hitDistance = distance;
+                    hitType = series.type;
+                    hitLabel = ldata;
+                    hitValuePos = lp;
+                    hitValue = g;
+                    hitSeriesID = seriesID;
+                    hitDataIndex = index;
+                  }
                 }
-              } else if (maxValue === null || maxValue <= g) {
-                maxValue = g;
-                maxSeriesID = seriesID;
-                maxLabel = ldata;
-                maxValuePos = lp;
-                maxIndex = index;
-                maxType = series.type;
               }
             }
           }
@@ -951,22 +988,24 @@ const modules = {
       }
     }
 
+    const hasHit = hitSeriesID !== '';
+
     return {
-      type: maxType,
-      label: maxLabel,
-      pos: maxValuePos,
-      value: maxValue ?? 0,
-      sId: maxSeriesID,
+      type: hasHit ? hitType : fallbackType,
+      label: hasHit ? hitLabel : fallbackLabel,
+      pos: hasHit ? hitValuePos : fallbackValuePos,
+      value: (hasHit ? hitValue : fallbackValue) ?? 0,
+      sId: hasHit ? hitSeriesID : fallbackSeriesID,
       acc,
       useStack,
-      maxIndex,
+      dataIndex: hasHit ? hitDataIndex : fallbackDataIndex,
     };
   },
 
   /**
    * @typedef {Object} LabelInfoResult
    * @property {number} labelIndex - 선택된 라벨의 인덱스
-   * @property {object} hitInfo - 해당 위치에서의 히트 정보 (getItemByPosition 반환값)
+   * @property {object} hitInfo - 해당 위치에서의 히트 정보 (getHitItemByPosition 반환값)
    */
   /**
    * Find label info by position x and y
@@ -1040,13 +1079,13 @@ const modules = {
         offsetX = x;
       }
 
-      hitInfo = this.getItemByPosition(
+      hitInfo = this.getHitItemByPosition(
         [offsetX, y],
         selectLabel?.useApproximateValue,
         dataIndex,
         true,
       );
-      labelIndex = hitInfo.maxIndex ?? -1;
+      labelIndex = hitInfo.dataIndex ?? -1;
     }
 
     return {

package/src/components/chart/plugins/plugins.interaction.js

@@ -294,13 +294,13 @@ const modules = {
       const useSelectSeries = selectSeriesOpt?.use && selectSeriesOpt?.useClick;
 
       const setSelectedItemInfo = () => {
-        const hitInfo = this.getItemByPosition(offset, false);
+        const hitInfo = this.getHitItemByPosition(offset, false);
 
         ({
           label: args.label,
           value: args.value,
           sId: args.seriesId,
-          maxIndex: args.dataIndex,
+          dataIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
 
@@ -308,7 +308,7 @@ const modules = {
           args.selected = {
             eventTarget: 'item',
             seriesId: this.isDeselectItem(hitInfo) ? null : hitInfo.sId,
-            dataIndex: this.isDeselectItem(hitInfo) ? null : hitInfo.maxIndex,
+            dataIndex: this.isDeselectItem(hitInfo) ? null : hitInfo.dataIndex,
           };
         }
       };
@@ -917,6 +917,9 @@ const modules = {
     let maxg = null;
     let maxSID = null;
     let minDistance = Infinity;
+    // directHit(bar 박스 내부 클릭/hover) 시리즈가 발견되었는지 추적.
+    // 한 번이라도 directHit가 있으면 line의 근접 포인트 히트는 hitId 후보에서 배제된다.
+    let hasDirectHit = false;
 
     // 1. 먼저 공통으로 사용할 데이터 인덱스 결정
     const targetDataIndex = this.findClosestDataIndex(offset, sIds);
@@ -986,12 +989,23 @@ const modules = {
               maxSID = sId;
             }
 
-            // 마우스 위치와의 거리 계산하여 가장 가까운 시리즈 선택
+            // 마우스 위치와의 거리 계산하여 가장 가까운 시리즈 선택.
+            // directHit(bar 박스 내부)가 하나라도 있으면 그중에서만 선택하고,
+            // 라인의 근접 포인트 히트(item.hit=true, directHit=false)는 hitId 후보에서 배제한다.
+            // bar + line combo 차트에서 작은 bar 클릭 시 큰 값의 line이 잡히던 버그 방지.
             if (item.hit && item.data.xp !== undefined && item.data.yp !== undefined) {
               const distance = (item.data.xp - offset[0]) ** 2
                 + (item.data.yp - offset[1]) ** 2;
 
-              if (distance < minDistance) {
+              if (item.directHit) {
+                // directHit는 최우선. 여러 directHit 중에서는 가장 가까운 것 선택.
+                if (!hasDirectHit || distance < minDistance) {
+                  minDistance = distance;
+                  hitId = sId;
+                }
+                hasDirectHit = true;
+              } else if (!hasDirectHit && distance < minDistance) {
+                // directHit가 없을 때만 일반 hit 거리 비교
                 minDistance = distance;
                 hitId = sId;
               }
@@ -1622,9 +1636,9 @@ const modules = {
    */
   isDeselectItem(hitInfo) {
     return this.options.selectItem.useDeselectItem
-      && hitInfo?.maxIndex === this.defaultSelectItemInfo?.dataIndex
+      && hitInfo?.dataIndex === this.defaultSelectItemInfo?.dataIndex
       && hitInfo?.sId === this.defaultSelectItemInfo?.seriesID
-      && !isNaN(hitInfo?.maxIndex);
+      && !isNaN(hitInfo?.dataIndex);
   },
 
   /**

package/src/components/chart/plugins/plugins.scrollbar.js

@@ -29,11 +29,15 @@ const module = {
       scrollbarOpt[key] = merged[key];
     });
 
-    delete scrollbarOpt.savedPosition;
+    if (scrollbarOpt.resetPosition) {
+      scrollbarOpt.range = axisOpt?.[0]?.range?.length ? [...axisOpt?.[0]?.range] : null;
+      this.resetScrollbarSavedPositions(dir);
+    }
 
     if (!scrollbarOpt.isInit) {
       scrollbarOpt.type = axisOpt?.[0]?.type;
       scrollbarOpt.range = axisOpt?.[0]?.range?.length ? [...axisOpt?.[0]?.range] : null;
+      this.resetScrollbarSavedPositions(dir);
 
       this.initScrollbarRange(dir);
       this.createScrollbarLayout(dir);
@@ -104,16 +108,18 @@ const module = {
     const axisOpt = dir === 'x' ? this.axesX : this.axesY;
     const isUpdateAxesRange = !isEqual(newOpt?.[0]?.range, axisOpt?.[0]?.range);
     if (isUpdateAxesRange || updateData) {
-      const isResetPosition = dir === 'x' ? this.options.axesX?.[0]?.scrollbar?.resetPosition : this.options.axesY?.[0]?.scrollbar?.resetPosition;
-      if (isUpdateAxesRange || isResetPosition) {
+      const isResetPosition = dir === 'x'
+        ? this.options.axesX?.[0]?.scrollbar?.resetPosition
+        : this.options.axesY?.[0]?.scrollbar?.resetPosition;
+
+      if (isUpdateAxesRange) {
         this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
-        // range가 업데이트되면 저장된 스크롤 위치를 초기화
-        delete this.scrollbar[dir].savedPosition;
-      } else if (updateData) {
-        // 데이터가 업데이트되면 저장된 픽셀 위치는 더 이상 유효하지 않으므로 삭제하여
-        // 논리적 범위에 따라 다시 계산하도록 합니다.
-        delete this.scrollbar[dir].savedPosition;
       }
+
+      if (isResetPosition || updateData) {
+        this.resetScrollbarSavedPositions(dir);
+      }
+
       this.initScrollbarRange(dir);
     }
     this.scrollbar[dir].use = !!newOpt?.[0].scrollbar?.use;
@@ -244,16 +250,29 @@ const module = {
     const buttonSize = scrollbarOpt.showButton ? scrollHeight : 0;
     const trackSize = fullSize - (buttonSize * 2);
 
-    // 현재 위치를 보존해야 하는 경우 기존 위치를 저장
-    let savedThumbPosition = null;
-    if (preservePosition && scrollbarOpt.savedPosition !== undefined) {
-      savedThumbPosition = scrollbarOpt.savedPosition;
-    }
+    const thumbSize = this.getScrollbarThumbSize(dir, trackSize);
 
-    const thumbSize = this.getScrollbarThumbSize(dir, trackSize, savedThumbPosition);
+    // 비율로 저장된 위치가 있으면 새 track 크기에 맞게 복원
+    if (preservePosition && scrollbarOpt.savedPositionRatio !== undefined) {
+      const maxPosition = Math.max(0, trackSize - thumbSize.size);
+      if (scrollbarOpt.savedAtStart) {
+        thumbSize.position = 0;
+      } else if (scrollbarOpt.savedAtEnd) {
+        thumbSize.position = maxPosition;
+      } else {
+        thumbSize.position = Math.min(scrollbarOpt.savedPositionRatio * trackSize, maxPosition);
+      }
+    }
 
-    // 새로 계산된 위치를 저장
-    scrollbarOpt.savedPosition = thumbSize.position;
+    // 위치를 비율 및 처음/끝 고정 여부로 저장
+    // currentMaxPosition === 0 (thumbSize >= trackSize) 인 경우 저장하지 않음
+    // → trackSize가 다시 커졌을 때 이전 savedAtEnd/savedAtStart/savedPositionRatio 상태를 유지
+    const currentMaxPosition = Math.max(0, trackSize - thumbSize.size);
+    if (currentMaxPosition > 0) {
+      scrollbarOpt.savedPositionRatio = thumbSize.position / trackSize;
+      scrollbarOpt.savedAtStart = thumbSize.position <= 0;
+      scrollbarOpt.savedAtEnd = thumbSize.position >= currentMaxPosition;
+    }
 
     let scrollbarStyle = 'display: block;';
     let scrollbarTrackStyle;
@@ -328,9 +347,8 @@ const module = {
    * get scrollbar thumb size
    * @param dir axis direction ('x' | 'y')
    * @param trackSize scrollbar track size
-   * @param savedThumbPosition 기존 위치를 보존해야 하는 경우 저장된 위치
    */
-  getScrollbarThumbSize(dir, trackSize, savedThumbPosition) {
+  getScrollbarThumbSize(dir, trackSize) {
     const scrollbarOpt = this.scrollbar[dir];
     const [min, max] = scrollbarOpt.range;
     const axesType = scrollbarOpt.type;
@@ -374,11 +392,6 @@ const module = {
     scrollbarOpt.steps = steps;
     scrollbarOpt.interval = interval;
 
-    // 기존 위치를 보존해야 하는 경우 저장된 위치를 사용
-    if (savedThumbPosition !== null) {
-      thumbPosition = savedThumbPosition;
-    }
-
     return {
       size: thumbSize,
       position: thumbPosition,
@@ -438,16 +451,32 @@ const module = {
       scrollbarOpt.range = [minValue, maxValue];
 
       // 사용자가 스크롤할 때는 저장된 위치를 초기화
-      delete scrollbarOpt.savedPosition;
+      this.resetScrollbarSavedPositions(dir);
 
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
         lightUpdate: minValue > 1,
+        updateByScrollbar: true,
       });
     }
   },
 
+  /**
+   * reset scrollbar saved positions
+   * @param dir axis direction ('x' | 'y')
+   */
+  resetScrollbarSavedPositions(dir) {
+    const scrollbarOpt = this.scrollbar[dir];
+    if (!scrollbarOpt) {
+      return;
+    }
+
+    delete scrollbarOpt.savedPositionRatio;
+    delete scrollbarOpt.savedAtStart;
+    delete scrollbarOpt.savedAtEnd;
+  },
+
   /**
    * create scroll event
    */
@@ -662,11 +691,13 @@ const module = {
     this.scrollbar[dir].range = [movedMin, movedMax];
 
     // 사용자가 드래그로 스크롤할 때는 저장된 위치를 초기화
-    delete this.scrollbar[dir].savedPosition;
+    this.resetScrollbarSavedPositions(dir);
 
     this.update({
       updateSeries: false,
       updateSelTip: { update: false, keepDomain: false },
+      lightUpdate: movedMin > 1,
+      updateByScrollbar: true,
     });
   },