evui 3.4.155 → 3.4.157

package/package.json

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

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

@@ -454,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 };

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

@@ -301,6 +301,9 @@ class Bar {
         item.data = barData[clampedIndex];
         item.index = clampedIndex;
         item.hit = this.isPointInBar(offset, barData[clampedIndex]);
+        // bar 박스 내부 클릭은 "직접 박스 히트"로 표시.
+        // findHitItem에서 line 포인트 근접 히트보다 우선 선택되도록 하기 위함.
+        item.directHit = item.hit;
       }
 
       return item;
@@ -347,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;

package/src/components/chart/helpers/helpers.util.js

@@ -424,4 +424,27 @@ export default {
 
     return `${color}80`;
   },
+
+  /**
+   * 클릭 좌표(cx, cy)에서 데이터 포인트까지의 거리²를 반환한다.
+   * w/h 가 있으면 박스 외벽까지의 거리(내부면 0), 없으면 포인트까지의 유클리드 거리².
+   * @param {object} data - 데이터 포인트 (xp, yp, w?, h?)
+   * @param {number} cx - 클릭 x 좌표
+   * @param {number} cy - 클릭 y 좌표
+   * @returns {number}
+   */
+  calcBoxDistance(data, cx, cy) {
+    if (data.w !== null && data.w !== undefined && data.h !== null && data.h !== undefined) {
+      const sx = data.xp;
+      const sy = data.yp;
+      const xMin = Math.min(sx, sx + data.w);
+      const xMax = Math.max(sx, sx + data.w);
+      const yMin = Math.min(sy, sy + data.h);
+      const yMax = Math.max(sy, sy + data.h);
+      const dx = Math.max(0, xMin - cx, cx - xMax);
+      const dy = Math.max(0, yMin - cy, cy - yMax);
+      return dx * dx + dy * dy;
+    }
+    return (data.xp - cx) ** 2 + (data.yp - cy) ** 2;
+  },
 };

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,94 @@ 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 (distance 기반)
+   *
    * @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
+   * @param {boolean}  disableNullLabelSnap   true 이면 all-null 라벨도 그대로 반환 (click/dblclick 용)
    *
-   * @returns {object} clicked item information
+   * @returns {object} hit item information
    */
-  getItemByPosition(
+  getHitItemByPosition(
     offset,
     useApproximate = false,
     dataIndex,
     useSelectLabelOrItem = false,
+    disableNullLabelSnap = 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 = '';
+    const [cx, cy] = offset;
+
+    // dataIndex 미지정 시 클릭 좌표에 가장 가까운 valid 라벨 인덱스 결정.
+    // disableNullLabelSnap=true 이면 all-null 라벨도 후보로 인정.
+    let resolvedDataIndex = dataIndex;
+    if (resolvedDataIndex === undefined && !useApproximate) {
+      const refSeriesID = seriesIDs.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      if (refSeriesID) {
+        const refData = this.seriesList[refSeriesID].data;
+        const clickPos = isHorizontal ? offset[1] : offset[0];
+        let nearestDistance = Infinity;
+        let nearestIndex = -1;
+        for (let i = 0; i < refData.length; i++) {
+          const hasValidData = disableNullLabelSnap || seriesIDs.some((sId) => {
+            const s = this.seriesList[sId];
+            return s?.show && s.data?.[i]?.o !== null && s.data?.[i]?.o !== undefined;
+          });
+
+          const p = refData[i];
+          if (hasValidData && p) {
+            let labelPos;
+            if (isHorizontal) {
+              labelPos = p.h ? p.yp + (p.h / 2) : p.yp;
+            } else {
+              labelPos = p.w ? p.xp + (p.w / 2) : p.xp;
+            }
+            if (labelPos !== null && labelPos !== undefined) {
+              const d = Math.abs(clickPos - labelPos);
+              if (d < nearestDistance) {
+                nearestDistance = d;
+                nearestIndex = i;
+              }
+            }
+          }
+        }
+        if (nearestIndex !== -1) resolvedDataIndex = nearestIndex;
+      }
+    }
+
+    // hit 기반 결과 (최우선)
+    let hitType = null;
+    let hitLabel = null;
+    let hitValuePos = null;
+    let hitValue = null;
+    let hitSeriesID = '';
+    let hitDataIndex = null;
+    let hitDistance = Infinity;
+    let hasDirectHit = false;
+
+    // hit 없을 때 쓸 fallback — 값이 있는 시리즈 중 클릭 좌표에 가장 가까운 것.
+    let fallbackType = null;
+    let fallbackLabel = null;
+    let fallbackValuePos = null;
+    let fallbackValue = null;
+    let fallbackSeriesID = '';
+    let fallbackDataIndex = null;
+    let fallbackDistance = Infinity;
+
     let acc = 0;
     let useStack = false;
-    let maxIndex = null;
 
     for (let ix = 0; ix < seriesIDs.length; ix++) {
       const seriesID = seriesIDs[ix];
@@ -899,7 +959,7 @@ const modules = {
           series,
           offset,
           isHorizontal,
-          dataIndex,
+          resolvedDataIndex,
           useSelectLabelOrItem,
         );
         const data = item.data;
@@ -907,12 +967,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 +988,61 @@ const modules = {
                 acc += data.y;
               }
 
+              // fallback 후보: 값이 있는 시리즈 중 거리가 가장 가까운 쪽.
+              // 값이 null 인 시리즈는 제외.
+              const hasMeaningfulValue = g !== null && g !== undefined && !Number.isNaN(g);
+              const hasCoords = data.xp !== null && data.xp !== undefined
+                && data.yp !== null && data.yp !== undefined;
+              if (hasMeaningfulValue && hasCoords) {
+                const distance = Util.calcBoxDistance(data, cx, cy);
+                if (fallbackSeriesID === '' || distance < fallbackDistance) {
+                  fallbackDistance = distance;
+                  fallbackType = series.type;
+                  fallbackLabel = ldata;
+                  fallbackValuePos = lp;
+                  fallbackValue = g;
+                  fallbackSeriesID = seriesID;
+                  fallbackDataIndex = index;
+                }
+              } else if (hasMeaningfulValue && 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 +1050,45 @@ const modules = {
       }
     }
 
+    // all-null 라벨인 경우 label/dataIndex 만 채워 반환 (sId='', value=0).
+    if (
+      disableNullLabelSnap
+      && hitSeriesID === ''
+      && fallbackSeriesID === ''
+      && resolvedDataIndex !== undefined
+      && resolvedDataIndex >= 0
+    ) {
+      const refSeriesID = seriesIDs.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      const refPoint = refSeriesID
+        ? this.seriesList[refSeriesID].data?.[resolvedDataIndex]
+        : null;
+      if (refPoint) {
+        fallbackLabel = isHorizontal ? refPoint.y : refPoint.x;
+        fallbackDataIndex = resolvedDataIndex;
+      }
+    }
+
+    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 +1162,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

@@ -2,6 +2,7 @@ import { numberWithComma } from '@/common/utils';
 import throttle from '@/common/utils.throttle';
 import { cloneDeep, defaultsDeep, inRange, isEqual } from 'lodash-es';
 import dayjs from 'dayjs';
+import Util from '../helpers/helpers.util';
 
 const modules = {
   /**
@@ -180,10 +181,10 @@ const modules = {
       }
 
       const setSelectedItemInfo = () => {
-        const hitInfo = this.findHitItem(offset);
+        const hitInfo = this.findHitItem(offset, true);
 
         // 실제 클릭된 아이템의 정보 추출 (hitId가 있으면 해당 아이템, 없으면 첫 번째 아이템)
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItem) {
@@ -196,8 +197,8 @@ const modules = {
       };
 
       const setSelectedLabelInfo = (targetAxis) => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         const {
@@ -220,8 +221,8 @@ const modules = {
       };
 
       const setSelectedSeriesInfo = () => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItemId !== null) {
@@ -294,13 +295,13 @@ const modules = {
       const useSelectSeries = selectSeriesOpt?.use && selectSeriesOpt?.useClick;
 
       const setSelectedItemInfo = () => {
-        const hitInfo = this.getItemByPosition(offset, false);
+        const hitInfo = this.getHitItemByPosition(offset, false, undefined, false, true);
 
         ({
           label: args.label,
           value: args.value,
           sId: args.seriesId,
-          maxIndex: args.dataIndex,
+          dataIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
 
@@ -308,7 +309,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,
           };
         }
       };
@@ -337,8 +338,8 @@ const modules = {
       };
 
       const setSelectedSeriesInfo = () => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItemId !== null) {
@@ -904,12 +905,14 @@ const modules = {
    *   maxHighlight: [string, number] | null,
    * }} hit item information
    */
-  findHitItem(offset) {
+  findHitItem(offset, disableNullLabelSnap = false) {
     const sIds = Object.keys(this.seriesList);
     const items = {};
     const isHorizontal = !!this.options.horizontal;
     const ctx = this.tooltipCtx;
 
+    const [cx, cy] = offset;
+
     let hitId = null;
     let maxs = '';
     let maxsw = 0;
@@ -917,9 +920,14 @@ const modules = {
     let maxg = null;
     let maxSID = null;
     let minDistance = Infinity;
+    // directHit 가 하나라도 있으면 일반 hit 는 hitId 후보에서 배제.
+    let hasDirectHit = false;
+    // hit 이 없을 때 거리 기반으로 선택할 fallback (기존 "첫 시리즈 고정" 대체).
+    let fallbackId = null;
+    let fallbackDistance = Infinity;
 
     // 1. 먼저 공통으로 사용할 데이터 인덱스 결정
-    const targetDataIndex = this.findClosestDataIndex(offset, sIds);
+    const targetDataIndex = this.findClosestDataIndex(offset, sIds, disableNullLabelSnap);
 
     if (targetDataIndex === -1 && !this.isNotUseIndicator()) {
       return { items, hitId, maxTip: [maxs, maxv], maxHighlight: null };
@@ -986,24 +994,69 @@ const modules = {
               maxSID = sId;
             }
 
-            // 마우스 위치와의 거리 계산하여 가장 가까운 시리즈 선택
+            // hit 기반 선택: directHit 최우선, 그 외 일반 hit 는 directHit 없을 때만.
             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) {
+                if (!hasDirectHit || distance < minDistance) {
+                  minDistance = distance;
+                  hitId = sId;
+                }
+                hasDirectHit = true;
+              } else if (!hasDirectHit && distance < minDistance) {
                 minDistance = distance;
                 hitId = sId;
               }
             }
+
+            // fallback 후보: hit 여부와 무관하게 거리가 가장 가까운 시리즈.
+            // 참고: 이 블록은 outer `if (gdata !== null && gdata !== undefined)` 안에 있어서
+            // 값이 null 인 시리즈는 items 수집 단계에서 이미 걸러진 상태. 별도 null 값 가드 불필요.
+            if (item.data.xp !== undefined && item.data.yp !== undefined
+                && item.data.xp !== null && item.data.yp !== null) {
+              const fbDistance = Util.calcBoxDistance(item.data, cx, cy);
+              if (fbDistance < fallbackDistance) {
+                fallbackDistance = fbDistance;
+                fallbackId = sId;
+              }
+            }
           }
         }
       }
     }
 
-    hitId = hitId === null ? Object.keys(items)[0] : hitId;
+    // hit 없으면 거리 기반 fallback, 그것도 없으면 items 첫 키(항상 비어있을 가능성 방어).
+    if (hitId === null) {
+      hitId = fallbackId !== null ? fallbackId : Object.keys(items)[0];
+    }
     const maxHighlight = maxg !== null ? [maxSID, maxg] : null;
 
+    // all-null 라벨인 경우 synthetic items[''] 로 label/index 만 채워 전달.
+    if (disableNullLabelSnap
+        && Object.keys(items).length === 0
+        && targetDataIndex !== -1) {
+      const refSeriesID = sIds.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      const refPoint = refSeriesID
+        ? this.seriesList[refSeriesID].data?.[targetDataIndex]
+        : null;
+      if (refPoint) {
+        items[''] = {
+          id: '',
+          name: '',
+          label: isHorizontal ? refPoint.y : refPoint.x,
+          index: targetDataIndex,
+          axis: { x: 0, y: 0 },
+          data: { o: undefined, x: refPoint.x, y: refPoint.y },
+        };
+        hitId = '';
+      }
+    }
+
     return { items, hitId, maxTip: [maxs, maxv], maxHighlight };
   },
 
@@ -1013,7 +1066,7 @@ const modules = {
    * @param {array} sIds series IDs
    * @returns {number} closest data index
    */
-  findClosestDataIndex(offset, sIds) {
+  findClosestDataIndex(offset, sIds, disableNullLabelSnap = false) {
     const [xp, yp] = offset;
     const isHorizontal = !!this.options.horizontal;
     const mousePos = isHorizontal ? yp : xp;
@@ -1061,10 +1114,9 @@ const modules = {
     let closestDistance = Infinity;
     let closestIndex = -1;
 
-    // 각 라벨에서 가장 가까운 것 찾기
+    // 각 라벨에서 가장 가까운 것 찾기 (disableNullLabelSnap=true 면 all-null 라벨도 후보)
     for (let i = 0; i < referenceData.length; i++) {
-      // 이 라벨에 유효한 데이터가 있는 시리즈가 하나 이상 있는지 확인
-      const hasValidData = sIds.some((sId) => {
+      const hasValidData = disableNullLabelSnap || sIds.some((sId) => {
         const series = this.seriesList[sId];
         return series?.show && series.data?.[i]?.o !== null && series.data?.[i]?.o !== undefined;
       });
@@ -1622,9 +1674,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

@@ -113,7 +113,15 @@ const module = {
         : this.options.axesY?.[0]?.scrollbar?.resetPosition;
 
       if (isUpdateAxesRange) {
-        this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
+        const newOptRange = newOpt?.[0]?.range;
+        const currentRange = this.scrollbar[dir].range;
+        if (!isResetPosition && newOptRange?.length && currentRange?.length) {
+          // 리사이즈 등으로 range 크기만 변경된 경우, 현재 스크롤 위치(min)를 유지하고 크기만 조정
+          const newSize = newOptRange[1] - newOptRange[0];
+          this.scrollbar[dir].range = [currentRange[0], currentRange[0] + newSize];
+        } else {
+          this.scrollbar[dir].range = newOptRange?.length ? [...newOptRange] : null;
+        }
       }
 
       if (isResetPosition || updateData) {