evui 3.4.119 → 3.4.200

package/dist/evui.common.js

@@ -11171,7 +11171,7 @@ module.exports = exports;
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.119\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.200\"}");
 
 /***/ }),
 
@@ -38503,26 +38503,26 @@ var es_string_match = __webpack_require__("466d");
       return value;
     }
 
-    var assignLabelWith = function assignLabelWith(v, target, lb) {
-      if (v % target === 0) {
-        return "".concat((v / target).toFixed(decimalPoint)).concat(lb);
-      }
-
-      return "".concat((v / target).toFixed(1)).concat(lb);
-    };
+    var isNegative = value < 0;
+    var absValue = Math.abs(value);
 
-    if (value >= quad) {
-      label = assignLabelWith(value, quad, 'P');
-    } else if (value >= trill) {
-      label = assignLabelWith(value, trill, 'T');
-    } else if (value >= billi) {
-      label = assignLabelWith(value, billi, 'G');
-    } else if (value >= milli) {
-      label = assignLabelWith(value, milli, 'M');
-    } else if (value >= killo) {
-      label = assignLabelWith(value, 1000, 'K');
+    var assignLabelWith = function assignLabelWith(v, target, lb) {
+      var result = v % target === 0 ? "".concat((v / target).toFixed(decimalPoint)).concat(lb) : "".concat((v / target).toFixed(1)).concat(lb);
+      return isNegative ? "-".concat(result) : result;
+    };
+
+    if (absValue >= quad) {
+      label = assignLabelWith(absValue, quad, 'P');
+    } else if (absValue >= trill) {
+      label = assignLabelWith(absValue, trill, 'T');
+    } else if (absValue >= billi) {
+      label = assignLabelWith(absValue, billi, 'G');
+    } else if (absValue >= milli) {
+      label = assignLabelWith(absValue, milli, 'M');
+    } else if (absValue >= killo) {
+      label = assignLabelWith(absValue, 1000, 'K');
     } else {
-      label = value.toFixed(decimalPoint);
+      label = isNegative ? "-".concat(absValue.toFixed(decimalPoint)) : value.toFixed(decimalPoint);
     }
 
     return label;
@@ -38796,21 +38796,23 @@ var modules = {
           seriesIDs.forEach(function (seriesID) {
             var series = _this.seriesList[seriesID];
             var sData = data[seriesID];
+            var passingValue = series === null || series === void 0 ? void 0 : series.passingValue;
 
             if (series && sData) {
               series.data = _this.addSeriesDSforScatter(sData);
-              series.minMax = _this.getSeriesMinMax(series.data);
+              series.minMax = _this.getSeriesMinMax(series.data, passingValue);
             }
           });
         } else if (typeKey === 'heatMap') {
           seriesIDs.forEach(function (seriesID) {
             var series = _this.seriesList[seriesID];
+            var passingValue = series === null || series === void 0 ? void 0 : series.passingValue;
             var sData = data[seriesID];
 
             if (series && sData) {
               series.labels = label;
               series.data = _this.addSeriesDSForHeatMap(sData);
-              series.minMax = _this.getSeriesMinMax(series.data);
+              series.minMax = _this.getSeriesMinMax(series.data, passingValue);
               series.valueOpt = _this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -38842,7 +38844,7 @@ var modules = {
                 series.data = _this.addSeriesDS(sData, label, series.isExistGrp);
               }
 
-              series.minMax = _this.getSeriesMinMax(series.data);
+              series.minMax = _this.getSeriesMinMax(series.data, series.passingValue);
             }
           });
         }
@@ -39238,17 +39240,19 @@ var modules = {
     var isHorizontal = this.options.horizontal;
     var sdata = [];
 
-    var getBaseDataPosition = function getBaseDataPosition(baseIndex, dataIndex) {
+    var getBaseDataPosition = function getBaseDataPosition(baseIndex, dataIndex, curr) {
       var nextBaseSeriesIndex = baseIndex - 1;
       var baseSeries = _this4.seriesList[bsIds[baseIndex]];
       var baseDataList = baseSeries.data;
       var baseData = baseDataList[dataIndex];
       var position = isHorizontal ? baseData === null || baseData === void 0 ? void 0 : baseData.x : baseData === null || baseData === void 0 ? void 0 : baseData.y;
-      var isPassingValue = baseSeries.passingValue === (baseData === null || baseData === void 0 ? void 0 : baseData.o);
+      var baseValue = baseData === null || baseData === void 0 ? void 0 : baseData.o;
+      var isPassingValue = baseSeries.passingValue === baseValue;
+      var isSameSign = curr >= 0 && baseValue >= 0 || curr < 0 && baseValue < 0;
 
-      if (isPassingValue || position == null || !baseSeries.show) {
+      if (isPassingValue || position == null || !isSameSign || !baseSeries.show) {
         if (nextBaseSeriesIndex > -1) {
-          return getBaseDataPosition(nextBaseSeriesIndex, dataIndex);
+          return getBaseDataPosition(nextBaseSeriesIndex, dataIndex, curr);
         }
 
         return 0;
@@ -39259,7 +39263,7 @@ var modules = {
 
     data.forEach(function (curr, index) {
       var baseIndex = bsIds.length - 1 < 0 ? 0 : bsIds.length - 1;
-      var bdata = getBaseDataPosition(baseIndex, index); // base(previous) series data
+      var bdata = getBaseDataPosition(baseIndex, index, curr); // base(previous) series data
 
       var odata = curr; // current series original data
 
@@ -39442,7 +39446,7 @@ var modules = {
    *
    * @returns {object} min/max info for series
    */
-  getSeriesMinMax: function getSeriesMinMax(data) {
+  getSeriesMinMax: function getSeriesMinMax(data, passingValue) {
     var def = {
       minX: null,
       minY: null,
@@ -39454,21 +39458,22 @@ var modules = {
 
     if (data.length) {
       return data.reduce(function (acc, p, index) {
-        var _p$x, _p$y;
+        var _p$x, _p$y, _p$o;
 
         var minmax = acc;
         var px = ((_p$x = p.x) === null || _p$x === void 0 ? void 0 : _p$x.value) || p.x;
         var py = ((_p$y = p.y) === null || _p$y === void 0 ? void 0 : _p$y.value) || p.y;
+        var po = ((_p$o = p.o) === null || _p$o === void 0 ? void 0 : _p$o.value) || p.o;
 
-        if (px <= minmax.minX) {
+        if (po !== passingValue && px <= minmax.minX) {
           minmax.minX = px === null ? 0 : px;
         }
 
-        if (py <= minmax.minY) {
+        if (po !== passingValue && py <= minmax.minY) {
           minmax.minY = py === null ? 0 : py;
         }
 
-        if (px >= minmax.maxX) {
+        if (po !== passingValue && px >= minmax.maxX) {
           minmax.maxX = px === null ? 0 : px;
 
           if (isHorizontal && px !== null) {
@@ -39477,7 +39482,7 @@ var modules = {
           }
         }
 
-        if (py >= minmax.maxY) {
+        if (po !== passingValue && py >= minmax.maxY) {
           minmax.maxY = py === null ? 0 : py;
 
           if (!isHorizontal && py !== null) {
@@ -40231,14 +40236,25 @@ var modules = {
             }
           }
 
-          if (smm.maxX >= minmax.x[axisX].max) {
+          var isExistGrp = _this10.seriesList[key].isExistGrp;
+          var maxXisNegative = minmax.x[axisX].max < 0;
+
+          if (isExistGrp && maxXisNegative) {
+            minmax.x[axisX].max = smm.maxX;
+            minmax.x[axisX].maxSID = key;
+          } else if (!minmax.x[axisX].max || smm.maxX >= minmax.x[axisX].max) {
             minmax.x[axisX].max = smm.maxX;
             minmax.x[axisX].maxSID = key;
           }
 
-          if (smm.maxY >= minmax.y[axisY].max) {
+          var maxYisNegative = minmax.y[axisY].max < 0;
+
+          if (isExistGrp && maxYisNegative) {
+            minmax.y[axisY].max = smm.maxY;
+            minmax.y[axisY].maxSID = key;
+          } else if (!minmax.y[axisY].max || smm.maxY >= minmax.y[axisY].max) {
             minmax.y[axisY].max = smm.maxY;
-            minmax.y[axisX].maxSID = key;
+            minmax.y[axisY].maxSID = key;
           }
         }
 
@@ -41699,6 +41715,7 @@ var TIME_INTERVALS = {
 
 
 
+
 var element_line_Line = /*#__PURE__*/function () {
   function Line(sId, opt, sIdx) {
     var _this = this;
@@ -41832,7 +41849,6 @@ var element_line_Line = /*#__PURE__*/function () {
         ctx.setLineDash(this.segments);
       }
 
-      var endPoint = chartRect.y2 - labelOffset.bottom;
       var isLinearInterpolation = this.useLinearInterpolation();
       var barAreaByCombo = 0;
       var minmaxX = axesSteps.x[this.xAxisIndex];
@@ -41855,8 +41871,12 @@ var element_line_Line = /*#__PURE__*/function () {
 
       var getYPos = function getYPos(val) {
         return helpers_canvas.calculateY(val, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-      }; // draw line
+      };
 
+      var includeNegativeValue = this.data.some(function (data) {
+        return data.o < 0;
+      });
+      var endPoint = includeNegativeValue ? getYPos(0) : chartRect.y2 - labelOffset.bottom; // draw line
 
       var prevValid;
       this.data.forEach(function (curr) {
@@ -41916,9 +41936,10 @@ var element_line_Line = /*#__PURE__*/function () {
             }
           });
           var gradient = ctx.createLinearGradient(0, chartRect.y2, 0, maxValueYPos);
-          gradient.addColorStop(0, fillColor);
+          var mainGradientColor = extent.opacity < 1 ? fillColor : mainColor;
+          gradient.addColorStop(0, includeNegativeValue ? mainGradientColor : fillColor);
           gradient.addColorStop(0.5, fillColor);
-          gradient.addColorStop(1, extent.opacity < 1 ? fillColor : mainColor);
+          gradient.addColorStop(1, mainGradientColor);
           ctx.fillStyle = gradient;
         } else {
           ctx.fillStyle = fillColor;
@@ -41986,7 +42007,7 @@ var element_line_Line = /*#__PURE__*/function () {
 
                 var nextData = _this2.data[jx];
                 var xp = getXPos(nextData.x);
-                var bp = (_getYPos2 = getYPos(nextData.b)) !== null && _getYPos2 !== void 0 ? _getYPos2 : endPoint;
+                var bp = (_getYPos2 = getYPos(nextData.b)) !== null && _getYPos2 !== void 0 ? _getYPos2 : getYPos(0);
                 ctx.lineTo(xp, bp);
               }
 
@@ -42747,8 +42768,12 @@ var element_bar_Bar = /*#__PURE__*/function () {
 
       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 xAxisPosition = chartRect.x1 + labelOffset.left;
+      var yAxisPosition = chartRect.y2 - labelOffset.bottom;
+      var xZeroPosition = helpers_canvas.calculateX(0, minmaxX.graphMin, minmaxX.graphMax, xArea);
+      var yZeroPosition = helpers_canvas.calculateY(0, minmaxY.graphMin, minmaxY.graphMax, yArea);
+      var xsp = isHorizontal ? xAxisPosition + xZeroPosition : xAxisPosition;
+      var ysp = isHorizontal ? yAxisPosition : yAxisPosition + yZeroPosition;
       var dArea = isHorizontal ? yArea : xArea;
       var cArea = dArea / (totalCount || 1);
       var cPad;
@@ -42812,7 +42837,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
             categoryPoint = ysp - cArea * screenIndex - cPad;
           } else {
             categoryPoint = xsp + cArea * screenIndex + cPad;
-          }
+          } // 기본 위치 설정
+
 
           if (isHorizontal) {
             x = xsp;
@@ -42820,22 +42846,30 @@ var element_bar_Bar = /*#__PURE__*/function () {
           } else {
             x = Math.round(categoryPoint + (bArea * barSeriesX - (w + bPad)));
             y = ysp;
-          }
+          } // 너비 / 높이 계산, 스택의 경우 위치 값 재계산
+
 
           if (isHorizontal) {
+            var barValue = item.b ? item.o : item.x;
+            w = helpers_canvas.calculateX(barValue, minmaxX.graphMin, minmaxX.graphMax, xArea, -xZeroPosition);
+
             if (item.b) {
-              w = helpers_canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
-              x = helpers_canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-            } else {
-              w = helpers_canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+              x = helpers_canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp - xZeroPosition);
             }
-          } else if (item.b) {
-            // vertical stack bar chart
-            h = helpers_canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
-            y = helpers_canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
+
+            var minimumBarWidth = barValue > 0 ? -1 : 1;
+            w = barValue && Math.abs(w) === 0 ? minimumBarWidth : w;
           } else {
-            // vertical bar chart
-            h = helpers_canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
+            var _barValue = item.b ? item.o : item.y;
+
+            h = helpers_canvas.calculateY(_barValue, minmaxY.graphMin, minmaxY.graphMax, yArea, -yZeroPosition);
+
+            if (item.b) {
+              y = helpers_canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp - yZeroPosition);
+            }
+
+            var minimumBarHeight = _barValue > 0 ? -1 : 1;
+            h = _barValue && Math.abs(h) === 0 ? minimumBarHeight : h;
           }
 
           var barColor = item.dataColor || this.color;
@@ -43124,10 +43158,10 @@ var element_bar_Bar = /*#__PURE__*/function () {
           align = _this$showValue.align,
           formatter = _this$showValue.formatter,
           decimalPoint = _this$showValue.decimalPoint;
-      var x = positions.x,
-          y = positions.y,
-          w = positions.w,
-          h = positions.h;
+      var barX = positions.x,
+          barY = positions.y,
+          barWidth = positions.w,
+          barHeight = positions.h;
       var ctx = context;
       ctx.save();
       ctx.beginPath();
@@ -43162,25 +43196,27 @@ var element_bar_Bar = /*#__PURE__*/function () {
         formattedTxt = (_Util$labelSignFormat = helpers_util.labelSignFormat(value, decimalPoint)) !== null && _Util$labelSignFormat !== void 0 ? _Util$labelSignFormat : '';
       }
 
+      var isNegativeValue = value < 0;
       var textWidth = Math.round(ctx.measureText(formattedTxt).width);
-      var textHeight = fontSize + 4;
-      var minXPos = x + 10;
-      var minYPos = y - 10;
-      var widthFreeSpaceToDraw = w - 10;
-      var heightFreeSpaceToDraw = Math.abs(h + 10);
-      var centerX = x + w / 2 <= minXPos ? minXPos : x + w / 2;
-      var centerY = y + h / 2 >= minYPos ? minYPos : y + h / 2;
-      var centerYHorizontal = isHighlight ? y + h / 2 : y - h / 2;
+      var textHeight = fontSize; // fontSize와 textHeight는 같을 수 없지만, 정확히 구할 필요 없음
+
+      var GAP = 10;
+      var minXPos = isNegativeValue ? barX - GAP : barX + GAP;
+      var minYPos = isNegativeValue ? barY + GAP : barY - GAP;
+      var centerXOnBar = barX + barWidth / 2;
+      var centerYOnBar = isHighlight ? barY + barHeight / 2 : barY - barHeight / 2;
+      var drawableBarWidth = Math.abs(barWidth) - GAP;
+      var drawableBarHeight = Math.abs(barHeight) - GAP;
 
       switch (align) {
         case 'start':
           {
-            if (isHorizontal) {
-              if (textWidth < widthFreeSpaceToDraw) {
-                ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
-              }
-            } else if (textHeight < heightFreeSpaceToDraw) {
-              ctx.fillText(formattedTxt, centerX, minYPos);
+            if (isHorizontal && textWidth < drawableBarWidth) {
+              var xPos = isNegativeValue ? minXPos - textWidth : minXPos;
+              ctx.fillText(formattedTxt, xPos, centerYOnBar);
+            } else if (!isHorizontal && textHeight < drawableBarHeight) {
+              var yPos = isNegativeValue ? barY + GAP : barY - GAP;
+              ctx.fillText(formattedTxt, centerXOnBar, yPos);
             }
 
             break;
@@ -43188,12 +43224,10 @@ var element_bar_Bar = /*#__PURE__*/function () {
 
         case 'center':
           {
-            if (isHorizontal) {
-              if (textWidth < widthFreeSpaceToDraw) {
-                ctx.fillText(formattedTxt, centerX, centerYHorizontal);
-              }
-            } else if (textHeight < heightFreeSpaceToDraw) {
-              ctx.fillText(formattedTxt, centerX, centerY);
+            if (isHorizontal && textWidth < drawableBarWidth) {
+              ctx.fillText(formattedTxt, centerXOnBar, centerYOnBar);
+            } else if (!isHorizontal && textHeight < drawableBarHeight) {
+              ctx.fillText(formattedTxt, centerXOnBar, barY + barHeight / 2);
             }
 
             break;
@@ -43207,9 +43241,26 @@ var element_bar_Bar = /*#__PURE__*/function () {
             }
 
             if (isHorizontal) {
-              ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
+              var minXOnChart = this.chartRect.x1 + this.labelOffset.left;
+              var maxXOnChart = this.chartRect.x2 - this.labelOffset.right;
+
+              if (isNegativeValue) {
+                var _xPos = barX - GAP + barWidth - textWidth;
+
+                if (_xPos > minXOnChart) {
+                  ctx.fillText(formattedTxt, _xPos, centerYOnBar);
+                }
+              } else {
+                var _xPos2 = barX + GAP + barWidth;
+
+                if (_xPos2 + textWidth < maxXOnChart) {
+                  ctx.fillText(formattedTxt, _xPos2, centerYOnBar);
+                }
+              }
             } else {
-              ctx.fillText(formattedTxt, centerX, y + h - textHeight / 2);
+              var _yPos = isNegativeValue ? barY + barHeight + GAP : barY + barHeight - GAP;
+
+              ctx.fillText(formattedTxt, centerXOnBar, _yPos);
             }
 
             break;
@@ -43218,14 +43269,22 @@ var element_bar_Bar = /*#__PURE__*/function () {
         default:
         case 'end':
           {
-            if (isHorizontal) {
-              if (textWidth < widthFreeSpaceToDraw) {
-                var xPos = x + w - textWidth * 2;
-                ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+            if (isHorizontal && textWidth < drawableBarWidth) {
+              var _xPos3 = isNegativeValue ? barX + barWidth + GAP : barX + barWidth - textWidth - GAP;
+
+              ctx.fillText(formattedTxt, _xPos3, centerYOnBar);
+            } else if (!isHorizontal) {
+              if (isNegativeValue) {
+                var _yPos2 = barY + barHeight - GAP;
+
+                if (_yPos2 > minYPos) {
+                  ctx.fillText(formattedTxt, centerXOnBar, _yPos2);
+                }
+              } else if (textHeight < drawableBarHeight) {
+                var _yPos3 = barY + barHeight + GAP;
+
+                ctx.fillText(formattedTxt, centerXOnBar, _yPos3);
               }
-            } else if (textHeight < heightFreeSpaceToDraw) {
-              var yPos = y + h + textHeight;
-              ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
             }
 
             break;
@@ -43282,28 +43341,50 @@ var element_bar_Bar = /*#__PURE__*/function () {
       ctx.beginPath();
       ctx.moveTo(x, y);
 
+      if (Math.abs(w) < r * 2) {
+        r = Math.abs(w) / 2;
+      }
+
+      if (Math.abs(h) < r * 2) {
+        r = Math.abs(h) / 2;
+      }
+
       if (isHorizontal) {
-        if (h < r * 2) {
-          r = h / 2;
+        var isNegativeValue = w < 0;
+
+        if (isNegativeValue) {
+          w += r;
+          ctx.lineTo(x + w, y);
+          ctx.arcTo(x + w - r, y, x + w - r, y - r, r);
+          ctx.arcTo(x + w - r, y - h, x + w, y - h, r);
+          ctx.lineTo(x, y - h);
+          ctx.lineTo(x, y);
+        } else {
+          w -= r;
+          ctx.lineTo(x + w, y);
+          ctx.arcTo(x + w + r, y, x + w + r, y - r, r);
+          ctx.arcTo(x + w + r, y - h, x + w, y - h, r);
+          ctx.lineTo(x, y - h);
+          ctx.lineTo(x, y);
         }
-
-        w -= r;
-        ctx.lineTo(x + w, y);
-        ctx.arcTo(x + w + r, y, x + w + r, y - r, r);
-        ctx.arcTo(x + w + r, y - h, x + w, y - h, r);
-        ctx.lineTo(x, y - h);
-        ctx.lineTo(x, y);
       } else {
-        if (w < r * 2) {
-          r = w / 2;
+        var _isNegativeValue = h > 0;
+
+        if (_isNegativeValue) {
+          h -= r;
+          ctx.lineTo(x + w, y);
+          ctx.lineTo(x + w, y + h);
+          ctx.arcTo(x + w, y + h + r, x - w + r, y + h + r, r);
+          ctx.arcTo(x, y + h + r, x, y + h, r);
+          ctx.lineTo(x, y);
+        } else {
+          h += r;
+          ctx.lineTo(x + w, y);
+          ctx.lineTo(x + w, y + h);
+          ctx.arcTo(x + w, y + h - r, x + w - r, y + h - r, r);
+          ctx.arcTo(x, y + h - r, x, y + h, r);
+          ctx.lineTo(x, y);
         }
-
-        h += r;
-        ctx.lineTo(x + w, y);
-        ctx.lineTo(x + w, y + h);
-        ctx.arcTo(x + w, y + h - r, x + w - r, y + h - r, r);
-        ctx.arcTo(x, y + h - r, x, y + h, r);
-        ctx.lineTo(x, y);
       }
 
       ctx.fill();
@@ -45058,6 +45139,7 @@ var scale_Scale = /*#__PURE__*/function () {
     }
     /**
      * With range information, calculate how many labels in axis
+     * linear type은 scale.linear.js에서 처리
      * @param {object} range    min/max information
      *
      * @returns {object} steps, interval, min/max graph value
@@ -45266,6 +45348,14 @@ var scale_Scale = /*#__PURE__*/function () {
 
               ctx.beginPath();
               ticks[ix] = axisMinForLabel + ix * stepValue;
+              var isZeroLine = ticks[ix] === 0;
+
+              if (isZeroLine && _this3.zeroLineColor) {
+                ctx.strokeStyle = _this3.zeroLineColor;
+              } else {
+                ctx.strokeStyle = _this3.gridLineColor;
+              }
+
               linePosition = labelCenter + aliasPixel;
               labelText = _this3.getLabelFormat(Math.min(axisMax, ticks[ix]), {
                 prev: (_ticks = ticks[ix - 1]) !== null && _ticks !== void 0 ? _ticks : ''
@@ -45371,9 +45461,11 @@ var scale_Scale = /*#__PURE__*/function () {
           }
 
           var mergedPlotBandOpt = lodash_es_defaultsDeep({}, plotBand, PLOT_BAND_OPTION);
-          var from = mergedPlotBandOpt.from,
-              to = mergedPlotBandOpt.to,
+          var userDefinedFrom = mergedPlotBandOpt.from,
+              userDefinedTo = mergedPlotBandOpt.to,
               labelOpt = mergedPlotBandOpt.label;
+          var from = userDefinedFrom ? Math.max(userDefinedFrom, axisMin) : axisMin;
+          var to = userDefinedTo ? Math.min(userDefinedTo, axisMax) : axisMax;
 
           _this3.setPlotBandStyle(mergedPlotBandOpt);
 
@@ -45381,8 +45473,8 @@ var scale_Scale = /*#__PURE__*/function () {
           var toPos;
 
           if (_this3.type === 'x') {
-            fromPos = helpers_canvas.calculateX(from !== null && from !== void 0 ? from : minX, axisMin, axisMax, xArea, minX);
-            toPos = helpers_canvas.calculateX(to !== null && to !== void 0 ? to : maxX, axisMin, axisMax, xArea, minX);
+            fromPos = helpers_canvas.calculateX(from, axisMin, axisMax, xArea, minX);
+            toPos = helpers_canvas.calculateX(to, axisMin, axisMax, xArea, minX);
 
             if (fromPos === null || toPos === null) {
               return;
@@ -45390,8 +45482,8 @@ var scale_Scale = /*#__PURE__*/function () {
 
             _this3.drawXPlotBand(fromPos, toPos, minX, maxX, minY, maxY);
           } else {
-            fromPos = helpers_canvas.calculateY(from !== null && from !== void 0 ? from : axisMin, axisMin, axisMax, yArea, maxY);
-            toPos = helpers_canvas.calculateY(to !== null && to !== void 0 ? to : axisMax, axisMin, axisMax, yArea, maxY);
+            fromPos = helpers_canvas.calculateY(from, axisMin, axisMax, yArea, maxY);
+            toPos = helpers_canvas.calculateY(to, axisMin, axisMax, yArea, maxY);
 
             if (fromPos === null || toPos === null) {
               return;
@@ -45961,6 +46053,7 @@ var scale_time_TimeScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_linear_LinearScale = /*#__PURE__*/function (_Scale) {
   _inherits(LinearScale, _Scale);
 
@@ -45999,16 +46092,192 @@ var scale_linear_LinearScale = /*#__PURE__*/function (_Scale) {
      * Calculate interval
      * @param {object} range    range information
      *
-     * @returns {number} interval
+     * @returns {number}  interval (한 칸에 표시할 값의 간격)
      */
 
   }, {
     key: "getInterval",
     value: function getInterval(range) {
+      if (this.interval) return this.interval;
       var max = range.maxValue;
       var min = range.minValue;
-      var step = range.maxSteps;
-      return this.interval ? this.interval : Math.ceil((max - min) / step);
+      var steps = range.maxSteps; // step이 0이면 interval 계산 불가
+
+      if (!steps || steps <= 0) return 0; // startToZero이고, 최소값이 음수일 경우 0을 반드시 포함
+
+      if (this.startToZero && min < 0) {
+        var totalRange = Math.abs(min) + Math.abs(max); // 비율로 나눔
+
+        var negativeRatio = Math.abs(min) / totalRange;
+        var positiveRatio = Math.abs(max) / totalRange; // 각 방향에 최소 1칸 이상 배정되도록 보장
+
+        var negativeSteps = Math.max(1, Math.round(negativeRatio * steps));
+        var positiveSteps = Math.max(1, steps - negativeSteps); // 다시 합이 steps보다 커질 수도 있으니, 조정
+
+        if (negativeSteps + positiveSteps > steps) {
+          // 가장 큰 쪽에서 하나 줄임
+          if (negativeRatio > positiveRatio) {
+            negativeSteps -= 1;
+          } else {
+            positiveSteps -= 1;
+          }
+        }
+
+        return Math.ceil(Math.max(Math.abs(min) / (negativeSteps || 1), Math.abs(max) / (positiveSteps || 1)));
+      }
+
+      return Math.ceil((max - min) / steps);
+    }
+    /**
+    * With range information, calculate how many labels in axis
+    * @param {object} range    min/max information
+    *
+    * @returns {object} steps, interval, min/max graph value
+    */
+
+  }, {
+    key: "calculateSteps",
+    value: function calculateSteps(range) {
+      var maxValue = range.maxValue,
+          minValue = range.minValue;
+      var _range$maxSteps = range.maxSteps,
+          maxSteps = _range$maxSteps === void 0 ? 1 : _range$maxSteps;
+      var interval = this.getInterval(range);
+      var graphMin = 0;
+      var graphMax = 0; // 그래프 최대/최소 값 계산
+
+      if (minValue >= 0) {
+        // 전부 양수
+        graphMin = +minValue;
+        graphMax = Math.ceil(maxValue / interval) * interval;
+      } else if (maxValue >= 0) {
+        // 양수/음수 혼합
+        graphMin = Math.floor(minValue / interval) * interval;
+        graphMax = Math.ceil(maxValue / interval) * interval;
+      } else {
+        // 전부 음수
+        graphMax = +maxValue;
+        graphMin = Math.floor(minValue / interval) * interval;
+      }
+
+      var graphRange = graphMax - graphMin;
+      var numberOfSteps = Math.round(graphRange / interval); // 특수 케이스: 양수 최소값, 최대값이 1일 경우
+
+      if (minValue > 0 && maxValue === 1) {
+        if (!this.decimalPoint) {
+          interval = 1;
+          numberOfSteps = 1;
+          maxSteps = 1;
+        } else if (maxSteps > 2) {
+          interval = 0.2;
+          numberOfSteps = 5;
+          maxSteps = 5;
+        } else {
+          interval = 0.5;
+          numberOfSteps = 2;
+          maxSteps = 2;
+        }
+      } // 최대 스텝 수 조정
+
+
+      while (numberOfSteps > maxSteps) {
+        interval *= 2;
+        numberOfSteps = Math.round(graphRange / interval);
+        interval = Math.ceil(graphRange / numberOfSteps);
+      }
+
+      if (graphRange > numberOfSteps * interval) {
+        interval = Math.ceil(graphRange / numberOfSteps);
+      }
+
+      return {
+        steps: numberOfSteps,
+        interval: interval,
+        graphMin: graphMin,
+        graphMax: graphMax
+      };
+    }
+    /**
+    * 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, scrollbarOpt) {
+      var _this$labelStyle;
+
+      var maxValue;
+      var minValue;
+      var isDefaultMaxSameAsMin = false;
+      var range = scrollbarOpt !== null && scrollbarOpt !== void 0 && scrollbarOpt.use ? scrollbarOpt === null || scrollbarOpt === void 0 ? void 0 : scrollbarOpt.range : this.range;
+
+      if (Array.isArray(range) && (range === null || range === void 0 ? void 0 : range.length) === 2) {
+        if (this.options.type === 'heatMap') {
+          maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
+          minValue = range[0] < +minMax.min ? +minMax.min : range[0];
+        } else {
+          maxValue = range[1];
+          minValue = range[0];
+        }
+      } else if (typeof range === 'function') {
+        var _range = range(minMax.min, minMax.max);
+
+        var _range2 = _slicedToArray(_range, 2);
+
+        minValue = _range2[0];
+        maxValue = _range2[1];
+      } else {
+        maxValue = minMax.max;
+        minValue = minMax.min;
+      } // autoScaleRatio 적용 케이스
+
+
+      if (this.autoScaleRatio) {
+        var temp = maxValue; // 양수 방향에만 autoScaleRatio 적용
+
+        maxValue = Math.ceil(maxValue * (this.autoScaleRatio + 1));
+
+        if (maxValue > 0 && minValue < 0) {
+          // 양수/음수 혼합 케이스 -- 음수 방향에도 maxValue 증가분만큼 더하기
+          var diff = temp - maxValue;
+          minValue += diff;
+        } else if (maxValue < 0 && minValue < 0) {
+          // 전부 음수 케이스 -- 음수 방향에도 autoScaleRatio 적용
+          minValue = Math.ceil(minValue * (this.autoScaleRatio + 1));
+        }
+      } // 0 기준 축 설정 케이스
+
+
+      if (this.startToZero) {
+        if (minValue > 0) {
+          minValue = 0;
+        }
+
+        if (maxValue < 0) {
+          maxValue = 0;
+        }
+      }
+
+      if (maxValue === minValue) {
+        maxValue += 1;
+        isDefaultMaxSameAsMin = true;
+      }
+
+      var minLabel = this.getLabelFormat(minValue);
+      var maxLabel = this.getLabelFormat(maxValue, {
+        isMaxValueSameAsMin: isDefaultMaxSameAsMin
+      });
+      return {
+        min: minValue,
+        max: maxValue,
+        minLabel: minLabel,
+        maxLabel: maxLabel,
+        size: helpers_util.calcTextSize(maxLabel, helpers_util.getLabelStyle(this.labelStyle), (_this$labelStyle = this.labelStyle) === null || _this$labelStyle === void 0 ? void 0 : _this$labelStyle.padding)
+      };
     }
   }]);
 
@@ -47230,7 +47499,7 @@ var plugins_legend_modules = {
     var useLegendSeries = [];
 
     if (groups) {
-      useLegendSeries = groups.slice().reverse().filter(function (sId) {
+      useLegendSeries = groups.filter(function (sId) {
         return _this3.seriesList[sId].showLegend;
       }).map(function (sId) {
         return [sId, _this3.seriesList[sId]];
@@ -47281,9 +47550,8 @@ var plugins_legend_modules = {
   },
 
   /**
-   * 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`.
+   * Adds legends for each group in `groups` array, iterating through each series within the group.
+   * 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.
@@ -47294,7 +47562,7 @@ var plugins_legend_modules = {
     var _this5 = this;
 
     groups.forEach(function (group) {
-      group.slice().reverse().forEach(function (sId) {
+      group.forEach(function (sId) {
         var series = seriesList[sId];
 
         if (series && series.showLegend) {
@@ -53312,7 +53580,6 @@ var plugins_pie_modules = {
 
 
 
-
 var element_tip_modules = {
   /**
    * Draw TextTip with tip's locationInfo
@@ -53346,8 +53613,7 @@ var element_tip_modules = {
     }
 
     if (labelTipOpt.use && labelTipOpt.showTip) {
-      var isHeatMap = opt.type === 'heatMap';
-      isExistSelectedLabel = isHeatMap ? this.drawLabelTipForHeatMap() : this.drawLabelTip();
+      isExistSelectedLabel = opt.type === 'heatMap' ? this.drawLabelTipForHeatMap() : this.drawTipForSelectedLabel();
     }
 
     var executeDrawIndicator = function executeDrawIndicator(tipOpt) {
@@ -53633,9 +53899,10 @@ var element_tip_modules = {
 
   /**
    * Draw Selected Label Tip
+   * none Text
    * @returns {boolean} Whether drew at least one tip
    */
-  drawLabelTip: function drawLabelTip() {
+  drawTipForSelectedLabel: function drawTipForSelectedLabel() {
     var _this2 = this;
 
     var opt = this.options;
@@ -53661,7 +53928,7 @@ var element_tip_modules = {
       };
       var labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
       var valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
-      var valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
+      var valueAxesSteps = isHorizontal ? this.axesSteps.x[0] : this.axesSteps.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;
@@ -53679,8 +53946,8 @@ var element_tip_modules = {
         return _this2.seriesList[sId].isExistGrp && !_this2.seriesList[sId].isOverlapping;
       });
       var groups = (_this$data$groups$ = (_this$data$groups = this.data.groups) === null || _this$data$groups === void 0 ? void 0 : _this$data$groups[0]) !== null && _this$data$groups$ !== void 0 ? _this$data$groups$ : [];
-      var gp;
-      var dp;
+      var labelPos;
+      var dataPos;
       var value;
       var labelStartPoint;
       var labelEndPoint;
@@ -53728,31 +53995,39 @@ var element_tip_modules = {
       }
 
       data.forEach(function (selectedData, i) {
-        if (labelTipOpt.fixedPosTop) {
-          value = valueAxesRange.max;
-        } else if (isExistGrp) {
-          var sumValue = visibleSeries.reduce(function (ac, sId) {
-            var _selectedData$sId$val, _selectedData$sId;
-
-            return groups.includes(sId) ? ac + ((_selectedData$sId$val = (_selectedData$sId = selectedData[sId]) === null || _selectedData$sId === void 0 ? void 0 : _selectedData$sId.value) !== null && _selectedData$sId$val !== void 0 ? _selectedData$sId$val : selectedData[sId]) : ac;
-          }, 0);
-          var nonGroupValues = visibleSeries.filter(function (sId) {
-            return !groups.includes(sId);
-          }).map(function (sId) {
-            var _selectedData$sId$val2, _selectedData$sId2;
-
-            return (_selectedData$sId$val2 = (_selectedData$sId2 = selectedData[sId]) === null || _selectedData$sId2 === void 0 ? void 0 : _selectedData$sId2.value) !== null && _selectedData$sId$val2 !== void 0 ? _selectedData$sId$val2 : selectedData[sId];
-          });
-          value = Math.max.apply(Math, _toConsumableArray(nonGroupValues).concat([sumValue]));
-        } else if (visibleSeries.length) {
-          var visibleValue = visibleSeries.map(function (sId) {
-            var _selectedData$sId$val3, _selectedData$sId3;
-
-            return (_selectedData$sId$val3 = (_selectedData$sId3 = selectedData[sId]) === null || _selectedData$sId3 === void 0 ? void 0 : _selectedData$sId3.value) !== null && _selectedData$sId$val3 !== void 0 ? _selectedData$sId$val3 : selectedData[sId];
-          });
-          value = Math.max.apply(Math, _toConsumableArray(visibleValue));
-        } else {
-          value = valueAxesRange.max;
+        value = valueAxesSteps.graphMax;
+
+        if (!labelTipOpt.fixedPosTop) {
+          if (isExistGrp) {
+            var _visibleSeries$filter, _visibleSeries$filter2;
+
+            var positiveSum = visibleSeries === null || visibleSeries === void 0 ? void 0 : visibleSeries.reduce(function (ac, sId) {
+              var _selectedData$sId$val, _selectedData$sId, _selectedData$sId$val2, _selectedData$sId2;
+
+              return groups.includes(sId) && ((_selectedData$sId$val = (_selectedData$sId = selectedData[sId]) === null || _selectedData$sId === void 0 ? void 0 : _selectedData$sId.value) !== null && _selectedData$sId$val !== void 0 ? _selectedData$sId$val : selectedData[sId]) > 0 ? ac + ((_selectedData$sId$val2 = (_selectedData$sId2 = selectedData[sId]) === null || _selectedData$sId2 === void 0 ? void 0 : _selectedData$sId2.value) !== null && _selectedData$sId$val2 !== void 0 ? _selectedData$sId$val2 : selectedData[sId]) : ac;
+            }, 0);
+            var nonGroupValues = (_visibleSeries$filter = visibleSeries === null || visibleSeries === void 0 ? void 0 : (_visibleSeries$filter2 = visibleSeries.filter(function (sId) {
+              return !groups.includes(sId);
+            })) === null || _visibleSeries$filter2 === void 0 ? void 0 : _visibleSeries$filter2.map(function (sId) {
+              var _selectedData$sId$val3, _selectedData$sId3;
+
+              return (_selectedData$sId$val3 = (_selectedData$sId3 = selectedData[sId]) === null || _selectedData$sId3 === void 0 ? void 0 : _selectedData$sId3.value) !== null && _selectedData$sId$val3 !== void 0 ? _selectedData$sId$val3 : selectedData[sId];
+            })) !== null && _visibleSeries$filter !== void 0 ? _visibleSeries$filter : [];
+            var maxNonGroupValue = (nonGroupValues === null || nonGroupValues === void 0 ? void 0 : nonGroupValues.length) > 0 ? nonGroupValues.reduce(function (max, val) {
+              return Math.max(max, val !== null && val !== void 0 ? val : -Infinity);
+            }, -Infinity) : -Infinity;
+            value = positiveSum > 0 ? Math.max(maxNonGroupValue, positiveSum) : Math.max(maxNonGroupValue, 0);
+          } else if (visibleSeries.length) {
+            var visibleValue = visibleSeries.map(function (sId) {
+              var _selectedData$sId$val4, _selectedData$sId4;
+
+              return (_selectedData$sId$val4 = (_selectedData$sId4 = selectedData[sId]) === null || _selectedData$sId4 === void 0 ? void 0 : _selectedData$sId4.value) !== null && _selectedData$sId$val4 !== void 0 ? _selectedData$sId$val4 : selectedData[sId];
+            });
+            var maxValue = visibleValue.length > 0 ? visibleValue.reduce(function (max, val) {
+              return Math.max(max, val !== null && val !== void 0 ? val : -Infinity);
+            }, -Infinity) : -Infinity;
+            value = maxValue > 0 || _this2.options.type !== 'bar' ? maxValue : 0;
+          }
         }
 
         if (labelAxes.labels) {
@@ -53762,18 +54037,17 @@ var element_tip_modules = {
 
           var labelIndex = dataIndex[i] - startIndex;
           var labelCenter = Math.round(labelStartPoint + labelGap * labelIndex);
-          dp = labelCenter + labelGap / 2;
+          labelPos = labelCenter + labelGap / 2;
         } else {
-          dp = labelPositionCalcFunction(label[i], graphX.graphMin, graphX.graphMax, chartWidth - sizeObj.comboOffset, aPos.x1 + sizeObj.comboOffset / 2);
+          labelPos = labelPositionCalcFunction(label[i], graphX.graphMin, graphX.graphMax, chartWidth - sizeObj.comboOffset, aPos.x1 + sizeObj.comboOffset / 2);
         }
 
-        gp = valuePositionCalcFunction(value, valueAxesRange.min, valueAxesRange.max, valueSpace, valueStartPoint);
-        gp += offset;
+        dataPos = valuePositionCalcFunction(value, valueAxesSteps.graphMin, valueAxesSteps.graphMax, valueSpace, valueStartPoint) + offset;
 
         _this2.showTip({
           context: _this2.bufferCtx,
-          x: isHorizontal ? gp : dp,
-          y: isHorizontal ? dp : gp,
+          x: isHorizontal ? dataPos : labelPos,
+          y: isHorizontal ? labelPos : dataPos,
           opt: labelTipOpt,
           isSamePos: false
         });
@@ -53885,10 +54159,11 @@ var element_tip_modules = {
       }
     } else if (isHorizontal) {
       gp = helpers_canvas.calculateX(value, graphX.graphMin, graphX.graphMax, xArea, xsp);
-      gp += offset;
+      gp = value < 0 ? gp - offset : gp + offset;
     } else {
-      gp = helpers_canvas.calculateY(value, graphY.graphMin, graphY.graphMax, yArea, ysp);
-      gp -= offset;
+      var adjustedValue = type === 'bar' && value < 0 ? 0 : value;
+      gp = helpers_canvas.calculateY(adjustedValue, graphY.graphMin, graphY.graphMax, yArea, ysp);
+      gp = adjustedValue < 0 ? gp + offset : gp - offset;
     }
 
     var maxTipType = 'center';
@@ -53920,7 +54195,8 @@ var element_tip_modules = {
         arrowSize: arrowSize,
         borderRadius: borderRadius,
         text: text,
-        textStyle: textStyle
+        textStyle: textStyle,
+        isNegative: value < 0
       });
     }
 
@@ -53954,12 +54230,21 @@ var element_tip_modules = {
         borderRadius = param.borderRadius,
         text = param.text,
         opt = param.opt,
-        textStyle = param.textStyle;
+        textStyle = param.textStyle,
+        isNegative = param.isNegative;
     var ctx = param.context;
     var sx = x - width / 2;
     var ex = x + width / 2;
     var sy = y - height;
     var ey = y;
+
+    if (isNegative) {
+      if (isHorizontal) {
+        sx = x - width / 2 - width;
+        ex = x - width / 2;
+      }
+    }
+
     ctx.save();
     ctx.font = textStyle;
     ctx.fillStyle = (_opt$tipBackground = opt.tipBackground) !== null && _opt$tipBackground !== void 0 ? _opt$tipBackground : opt.tipStyle.background;
@@ -53967,44 +54252,73 @@ var element_tip_modules = {
     ctx.beginPath();
     ctx.moveTo(sx + borderRadius, sy);
     ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);
-
-    if (isHorizontal) {
-      ctx.lineTo(sx, sy + borderRadius + arrowSize / 2);
-      ctx.lineTo(sx - arrowSize, ey - height / 2);
-      ctx.lineTo(sx, ey - borderRadius - arrowSize / 2);
-    }
-
     ctx.lineTo(sx, ey - borderRadius);
     ctx.quadraticCurveTo(sx, ey, sx + borderRadius, ey);
-
-    if (!isHorizontal) {
-      if (type === 'left') {
-        ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
-        ctx.lineTo(sx + borderRadius + arrowSize * 2, ey);
-      } else if (type === 'right') {
-        ctx.lineTo(ex - arrowSize * 2 - borderRadius, ey);
-        ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
-      } else {
-        ctx.lineTo(x - arrowSize, ey);
-        ctx.lineTo(x, ey + arrowSize);
-        ctx.lineTo(x + arrowSize, ey);
-      }
-    }
-
     ctx.lineTo(ex - borderRadius, ey);
     ctx.quadraticCurveTo(ex, ey, ex, ey - borderRadius);
     ctx.lineTo(ex, sy + borderRadius);
     ctx.quadraticCurveTo(ex, sy, ex - borderRadius, sy);
     ctx.lineTo(sx + borderRadius, sy);
     ctx.closePath();
-    ctx.fill();
+    ctx.fill(); // draw arrow
+
+    ctx.beginPath();
+
+    if (isHorizontal) {
+      if (isNegative) {
+        ctx.moveTo(ex, ey);
+        ctx.lineTo(ex, sy + borderRadius + arrowSize / 2);
+        ctx.lineTo(ex + arrowSize, ey - height / 2);
+        ctx.lineTo(ex, ey - borderRadius - arrowSize / 2);
+      } else {
+        ctx.moveTo(sx, sy);
+        ctx.lineTo(sx, sy + borderRadius + arrowSize / 2);
+        ctx.lineTo(sx - arrowSize, ey - height / 2);
+        ctx.lineTo(sx, ey - borderRadius - arrowSize / 2);
+      }
+
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      if (isNegative) {
+        if (type === 'left') {
+          ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
+          ctx.lineTo(sx + borderRadius + arrowSize * 2, ey);
+        } else if (type === 'right') {
+          ctx.lineTo(ex - arrowSize * 2 - borderRadius, ey);
+          ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
+        } else {
+          ctx.lineTo(x - arrowSize, ey);
+          ctx.lineTo(x, ey + arrowSize);
+          ctx.lineTo(x + arrowSize, ey);
+        }
+      } else if (!isNegative) {
+        if (type === 'left') {
+          ctx.moveTo(sx, sy);
+          ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
+          ctx.lineTo(sx + borderRadius + arrowSize * 2, ey);
+        } else if (type === 'right') {
+          ctx.moveTo(ex, sy);
+          ctx.lineTo(ex - arrowSize * 2 - borderRadius, ey);
+          ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
+        } else {
+          ctx.lineTo(x - arrowSize, ey);
+          ctx.lineTo(x, ey + arrowSize);
+          ctx.lineTo(x + arrowSize, ey);
+        }
+      }
+
+      ctx.closePath();
+      ctx.fill();
+    }
+
     ctx.restore();
     ctx.save();
     ctx.font = textStyle;
     ctx.fillStyle = (_opt$tipTextColor = opt.tipTextColor) !== null && _opt$tipTextColor !== void 0 ? _opt$tipTextColor : opt.tipStyle.textColor;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'center';
-    ctx.fillText("".concat(text), x, sy + height / 2);
+    ctx.fillText("".concat(text), sx + width / 2, sy + height / 2);
     ctx.restore();
   },