evui 3.4.123 → 3.4.201

package/package.json

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

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

@@ -76,8 +76,14 @@ class Bar {
 
     const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
     const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
-    const xsp = chartRect.x1 + labelOffset.left;
-    const ysp = chartRect.y2 - labelOffset.bottom;
+
+    const xAxisPosition = chartRect.x1 + labelOffset.left;
+    const yAxisPosition = chartRect.y2 - labelOffset.bottom;
+    const xZeroPosition = Canvas.calculateX(0, minmaxX.graphMin, minmaxX.graphMax, xArea);
+    const yZeroPosition = Canvas.calculateY(0, minmaxY.graphMin, minmaxY.graphMax, yArea);
+
+    const xsp = isHorizontal ? xAxisPosition + xZeroPosition : xAxisPosition;
+    const ysp = isHorizontal ? yAxisPosition : yAxisPosition + yZeroPosition;
 
     const dArea = isHorizontal ? yArea : xArea;
     const cArea = dArea / (totalCount || 1);
@@ -135,7 +141,6 @@ class Bar {
       const item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
       if (item) {
         // 스크롤 offset(minIndex)만큼 보정해서 그리기
-
         let categoryPoint;
         if (isHorizontal) {
           categoryPoint = ysp - (cArea * (screenIndex)) - cPad;
@@ -143,6 +148,7 @@ class Bar {
           categoryPoint = xsp + (cArea * (screenIndex)) + cPad;
         }
 
+        // 기본 위치 설정
         if (isHorizontal) {
           x = xsp;
           y = Math.round(categoryPoint - ((bArea * barSeriesX) - (h + bPad)));
@@ -151,22 +157,40 @@ class Bar {
           y = ysp;
         }
 
+        // 너비 / 높이 계산, 스택의 경우 위치 값 재계산
         if (isHorizontal) {
+          const barValue = item.b ? item.o : item.x;
+
+          w = Canvas.calculateX(
+            barValue, minmaxX.graphMin, minmaxX.graphMax, xArea, -xZeroPosition,
+          );
+
           if (item.b) {
-            w = Canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
-            x = Canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-          } else {
-            w = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+            x = Canvas.calculateX(
+              item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp - xZeroPosition,
+            );
           }
-        } else if (item.b) { // vertical stack bar chart
-          h = Canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
-          y = Canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-        } else { // vertical bar chart
-          h = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
+
+          const minimumBarWidth = barValue > 0 ? -1 : 1;
+          w = barValue && Math.abs(w) === 0 ? minimumBarWidth : w;
+        } else {
+          const barValue = item.b ? item.o : item.y;
+
+          h = Canvas.calculateY(
+            barValue, minmaxY.graphMin, minmaxY.graphMax, yArea, -yZeroPosition,
+          );
+
+          if (item.b) {
+            y = Canvas.calculateY(
+              item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp - yZeroPosition,
+            );
+          }
+
+          const minimumBarHeight = barValue > 0 ? -1 : 1;
+          h = barValue && Math.abs(h) === 0 ? minimumBarHeight : h;
         }
 
         const barColor = item.dataColor || this.color;
-
         const legendHitInfo = param?.legendHitInfo;
         const selectLabelOption = param?.selectLabel?.option;
         const selectItemOption = param?.selectItem?.option;
@@ -408,7 +432,7 @@ class Bar {
   drawValueLabels({ context, data, positions, isHighlight, textColor, index }) {
     const isHorizontal = this.isHorizontal;
     const { fontSize, textColor: seriesTextColor, align, formatter, decimalPoint } = this.showValue;
-    const { x, y, w, h } = positions;
+    const { x: barX, y: barY, w: barWidth, h: barHeight } = positions;
     const ctx = context;
 
     ctx.save();
@@ -440,36 +464,40 @@ class Bar {
       formattedTxt = Util.labelSignFormat(value, decimalPoint) ?? '';
     }
 
+    const isNegativeValue = value < 0;
     const textWidth = Math.round(ctx.measureText(formattedTxt).width);
-    const textHeight = fontSize + 4;
-    const minXPos = x + 10;
-    const minYPos = y - 10;
-    const widthFreeSpaceToDraw = w - 10;
-    const heightFreeSpaceToDraw = Math.abs(h + 10);
-    const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
-    const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
-    const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);
+    const textHeight = fontSize; // fontSize와 textHeight는 같을 수 없지만, 정확히 구할 필요 없음
+
+    const GAP = 10;
+    const minXPos = isNegativeValue ? barX - GAP : barX + GAP;
+    const minYPos = isNegativeValue ? barY + GAP : barY - GAP;
+
+    const centerXOnBar = barX + (barWidth / 2);
+    const centerYOnBar = isHighlight ? barY + (barHeight / 2) : barY - (barHeight / 2);
+
+    const drawableBarWidth = Math.abs(barWidth) - GAP;
+    const 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) {
+          const xPos = isNegativeValue ? minXPos - textWidth : minXPos;
+          ctx.fillText(formattedTxt, xPos, centerYOnBar);
+        } else if (!isHorizontal && textHeight < drawableBarHeight) {
+          const yPos = isNegativeValue
+            ? barY + GAP
+            : barY - GAP;
+          ctx.fillText(formattedTxt, centerXOnBar, yPos);
         }
 
         break;
       }
 
       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;
@@ -482,9 +510,25 @@ class Bar {
         }
 
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
+          const minXOnChart = this.chartRect.x1 + this.labelOffset.left;
+          const maxXOnChart = this.chartRect.x2 - this.labelOffset.right;
+
+          if (isNegativeValue) {
+            const xPos = barX - GAP + barWidth - textWidth;
+            if (xPos > minXOnChart) {
+              ctx.fillText(formattedTxt, xPos, centerYOnBar);
+            }
+          } else {
+            const xPos = barX + GAP + barWidth;
+            if (xPos + textWidth < maxXOnChart) {
+              ctx.fillText(formattedTxt, xPos, centerYOnBar);
+            }
+          }
         } else {
-          ctx.fillText(formattedTxt, centerX, y + h - (textHeight / 2));
+          const yPos = isNegativeValue
+            ? barY + barHeight + GAP
+            : barY + barHeight - GAP;
+          ctx.fillText(formattedTxt, centerXOnBar, yPos);
         }
 
         break;
@@ -492,14 +536,21 @@ class Bar {
 
       default:
       case 'end': {
-        if (isHorizontal) {
-          if (textWidth < widthFreeSpaceToDraw) {
-            const xPos = x + w - (textWidth * 2);
-            ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+        if (isHorizontal && textWidth < drawableBarWidth) {
+          const xPos = isNegativeValue
+            ? barX + barWidth + GAP
+            : barX + barWidth - textWidth - GAP;
+          ctx.fillText(formattedTxt, xPos, centerYOnBar);
+        } else if (!isHorizontal) {
+          if (isNegativeValue) {
+            const yPos = barY + barHeight - GAP;
+            if (yPos > minYPos) {
+              ctx.fillText(formattedTxt, centerXOnBar, yPos);
+            }
+          } else if (textHeight < drawableBarHeight) {
+            const yPos = barY + barHeight + GAP;
+            ctx.fillText(formattedTxt, centerXOnBar, yPos);
           }
-        } else if (textHeight < heightFreeSpaceToDraw) {
-          const yPos = y + h + textHeight;
-          ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
         }
 
         break;
@@ -556,29 +607,48 @@ class Bar {
 
     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;
+      const 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;
+      const 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();

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

@@ -104,8 +104,6 @@ class Line {
       ctx.setLineDash(this.segments);
     }
 
-    const endPoint = chartRect.y2 - labelOffset.bottom;
-
     const isLinearInterpolation = this.useLinearInterpolation();
 
     let barAreaByCombo = 0;
@@ -127,6 +125,8 @@ class Line {
 
     const getXPos = val => Canvas.calculateX(val, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
     const getYPos = val => Canvas.calculateY(val, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
+    const includeNegativeValue = this.data.some(data => data.o < 0);
+    const endPoint = includeNegativeValue ? getYPos(0) : chartRect.y2 - labelOffset.bottom;
 
     // draw line
     let prevValid;
@@ -183,9 +183,10 @@ class Line {
           }
         });
         const gradient = ctx.createLinearGradient(0, chartRect.y2, 0, maxValueYPos);
-        gradient.addColorStop(0, fillColor);
+        const 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 {
@@ -242,7 +243,7 @@ class Line {
             for (let jx = endIndex; jx >= startIndex; jx--) {
               const nextData = this.data[jx];
               const xp = getXPos(nextData.x);
-              const bp = getYPos(nextData.b) ?? endPoint;
+              const bp = getYPos(nextData.b) ?? getYPos(0);
               ctx.lineTo(xp, bp);
             }
 

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

@@ -27,8 +27,9 @@ const modules = {
     }
 
     if (labelTipOpt.use && labelTipOpt.showTip) {
-      const isHeatMap = opt.type === 'heatMap';
-      isExistSelectedLabel = isHeatMap ? this.drawLabelTipForHeatMap() : this.drawLabelTip();
+      isExistSelectedLabel = opt.type === 'heatMap'
+      ? this.drawLabelTipForHeatMap()
+      : this.drawTipForSelectedLabel();
     }
 
     const executeDrawIndicator = (tipOpt) => {
@@ -283,9 +284,10 @@ const modules = {
 
   /**
    * Draw Selected Label Tip
+   * none Text
    * @returns {boolean} Whether drew at least one tip
    */
-  drawLabelTip() {
+  drawTipForSelectedLabel() {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
@@ -305,7 +307,7 @@ const modules = {
       };
       const labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
       const valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
-      const valueAxesRange = isHorizontal ? this.axesRange.x[0] : this.axesRange.y[0];
+      const valueAxesSteps = isHorizontal ? this.axesSteps.x[0] : this.axesSteps.y[0];
       const valuePositionCalcFunction = isHorizontal ? Canvas.calculateX : Canvas.calculateY;
       const labelPositionCalcFunction = isHorizontal ? Canvas.calculateY : Canvas.calculateX;
       const scrollbarOpt = isHorizontal ? this.scrollbar.y : this.scrollbar.x;
@@ -323,8 +325,8 @@ const modules = {
           .some(sId => this.seriesList[sId].isExistGrp && !this.seriesList[sId].isOverlapping);
       const groups = this.data.groups?.[0] ?? [];
 
-      let gp;
-      let dp;
+      let labelPos;
+      let dataPos;
       let value;
       let labelStartPoint;
       let labelEndPoint;
@@ -357,21 +359,38 @@ const modules = {
       }
 
       data.forEach((selectedData, i) => {
-        if (labelTipOpt.fixedPosTop) {
-          value = valueAxesRange.max;
-        } else if (isExistGrp) {
-          const sumValue = visibleSeries.reduce((ac, sId) => (
-            groups.includes(sId) ? ac + (selectedData[sId]?.value ?? selectedData[sId]) : ac), 0);
-          const nonGroupValues = visibleSeries
-            .filter(sId => !groups.includes(sId))
-            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
-          value = Math.max(...nonGroupValues, sumValue);
-        } else if (visibleSeries.length) {
-          const visibleValue = visibleSeries
-            .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
-          value = Math.max(...visibleValue);
-        } else {
-          value = valueAxesRange.max;
+        value = valueAxesSteps.graphMax;
+
+        if (!labelTipOpt.fixedPosTop) {
+          if (isExistGrp) {
+            const positiveSum = visibleSeries?.reduce((ac, sId) => (
+              groups.includes(sId) && (selectedData[sId]?.value ?? selectedData[sId]) > 0
+                ? ac + (selectedData[sId]?.value ?? selectedData[sId])
+                : ac), 0);
+
+            const nonGroupValues = visibleSeries
+              ?.filter(sId => !groups.includes(sId))
+              ?.map(sId => selectedData[sId]?.value ?? selectedData[sId]) ?? [];
+
+            const maxNonGroupValue = nonGroupValues?.length > 0
+              ? nonGroupValues.reduce((max, val) => Math.max(max, val ?? -Infinity), -Infinity)
+              : -Infinity;
+
+            value = positiveSum > 0
+              ? Math.max(maxNonGroupValue, positiveSum)
+              : Math.max(maxNonGroupValue, 0);
+          } else if (visibleSeries.length) {
+            const visibleValue = visibleSeries
+              .map(sId => selectedData[sId]?.value ?? selectedData[sId]);
+
+            const maxValue = visibleValue.length > 0
+              ? visibleValue.reduce((max, val) => Math.max(max, val ?? -Infinity), -Infinity)
+              : -Infinity;
+
+            value = maxValue > 0 || this.options.type !== 'bar'
+              ? maxValue
+              : 0;
+          }
         }
 
         if (labelAxes.labels) {
@@ -381,9 +400,9 @@ const modules = {
 
           const labelIndex = dataIndex[i] - startIndex;
           const labelCenter = Math.round(labelStartPoint + (labelGap * labelIndex));
-          dp = labelCenter + (labelGap / 2);
+          labelPos = labelCenter + (labelGap / 2);
         } else {
-          dp = labelPositionCalcFunction(
+          labelPos = labelPositionCalcFunction(
             label[i],
             graphX.graphMin,
             graphX.graphMax,
@@ -391,18 +410,19 @@ const modules = {
             aPos.x1 + (sizeObj.comboOffset / 2),
           );
         }
-        gp = valuePositionCalcFunction(
+
+        dataPos = valuePositionCalcFunction(
           value,
-          valueAxesRange.min,
-          valueAxesRange.max,
+          valueAxesSteps.graphMin,
+          valueAxesSteps.graphMax,
           valueSpace,
-          valueStartPoint);
-        gp += offset;
+          valueStartPoint,
+        ) + offset;
 
         this.showTip({
           context: this.bufferCtx,
-          x: isHorizontal ? gp : dp,
-          y: isHorizontal ? dp : gp,
+          x: isHorizontal ? dataPos : labelPos,
+          y: isHorizontal ? labelPos : dataPos,
           opt: labelTipOpt,
           isSamePos: false,
         });
@@ -504,10 +524,11 @@ const modules = {
       }
     } else if (isHorizontal) {
       gp = Canvas.calculateX(value, graphX.graphMin, graphX.graphMax, xArea, xsp);
-      gp += offset;
+      gp = value < 0 ? gp - offset : gp + offset;
     } else {
-      gp = Canvas.calculateY(value, graphY.graphMin, graphY.graphMax, yArea, ysp);
-      gp -= offset;
+      const adjustedValue = type === 'bar' && value < 0 ? 0 : value;
+      gp = Canvas.calculateY(adjustedValue, graphY.graphMin, graphY.graphMax, yArea, ysp);
+      gp = adjustedValue < 0 ? gp + offset : gp - offset;
     }
 
     let maxTipType = 'center';
@@ -541,6 +562,7 @@ const modules = {
         borderRadius,
         text,
         textStyle,
+        isNegative: value < 0,
       });
     }
 
@@ -563,15 +585,24 @@ const modules = {
    */
   showTextTip(param) {
     const isHorizontal = !!this.options.horizontal;
-    const { type, width, height, x, y, arrowSize, borderRadius, text, opt, textStyle } = param;
+    const {
+      type, width, height, x, y, arrowSize, borderRadius, text, opt, textStyle, isNegative,
+    } = param;
 
     const ctx = param.context;
 
-    const sx = x - (width / 2);
-    const ex = x + (width / 2);
+    let sx = x - (width / 2);
+    let ex = x + (width / 2);
     const sy = y - height;
     const ey = y;
 
+    if (isNegative) {
+      if (isHorizontal) {
+        sx = x - (width / 2) - width;
+        ex = x - (width / 2);
+      }
+    }
+
     ctx.save();
     ctx.font = textStyle;
 
@@ -581,30 +612,8 @@ const 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);
@@ -612,13 +621,64 @@ const modules = {
     ctx.lineTo(sx + borderRadius, sy);
     ctx.closePath();
     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.tipStyle.textColor;
     ctx.textBaseline = 'middle';
     ctx.textAlign = 'center';
-    ctx.fillText(`${text}`, x, sy + (height / 2));
+    ctx.fillText(`${text}`, sx + (width / 2), sy + (height / 2));
     ctx.restore();
   },
 
@@ -640,7 +700,7 @@ const modules = {
     ctx.beginPath();
     ctx.moveTo(x, cy);
     if (isHorizontal) {
-      ctx.lineTo(x + 6, cy - 6);
+        ctx.lineTo(x + 6, cy - 6);
       ctx.lineTo(x + 6, cy + 6);
     } else {
       ctx.lineTo(x + 6, cy - 6);

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

@@ -160,25 +160,29 @@ export default {
       return value;
     }
 
+    const isNegative = value < 0;
+    const absValue = Math.abs(value);
+
     const assignLabelWith = (v, target, lb) => {
-      if (v % target === 0) {
-        return `${(v / target).toFixed(decimalPoint)}${lb}`;
-      }
-      return `${(v / target).toFixed(1)}${lb}`;
+      const result = v % target === 0
+        ? `${(v / target).toFixed(decimalPoint)}${lb}`
+        : `${(v / target).toFixed(1)}${lb}`;
+
+      return isNegative ? `-${result}` : result;
     };
 
-    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');
+    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 ? `-${absValue.toFixed(decimalPoint)}` : value.toFixed(decimalPoint);
     }
 
     return label;