Fix Overflow Issue with Bars and DataLabels at Chart Edges

apps/react-test/src/chart/chart1.tsx

@@ -62,7 +62,7 @@ const Chart1 = () => {
               const age = fullChartData.find(
                 (item) => item.year === Number(value)
               )?.age;
-              if (age) return [`(${age}세)`, value];
+              if (age) return [`(${age})`, value];
               else return [value, ""];
             },
           },
@@ -87,7 +87,7 @@ const Chart1 = () => {
       series={[
         {
           type: "bar",
-          name: "예상 월 연금수령액",
+          name: "Expected Monthly Pension",
           color: "#FB596C",
           data: fullChartData.map((item) => ({
             x: item.year,
@@ -249,41 +249,25 @@ const fullChartData = [
   },
 ];
 
-const formatPrice = (
-  price: number | undefined | null,
-  isMaxUnderHundredMillion?: boolean
-) => {
+const formatPrice = (price: number | undefined | null) => {
   if (price === undefined || price === null) return "";
-  if (price === 0) return "0원";
+  if (price === 0) return "$0";
 
-  const absPrice = Math.abs(price); //음수인 경우 절대값 계산
+  const absPrice = Math.abs(price); // 음수인 경우 절대값 계산
+  const sign = price < 0 ? "-" : "";
 
-  if (isMaxUnderHundredMillion) {
-    const billionUnit = 100000000;
-    const priceInHundredMillion = absPrice / billionUnit;
-    const formattedPrice = priceInHundredMillion.toLocaleString(undefined, {
+  if (absPrice >= 1_000_000) {
+    return `${sign}${(absPrice / 1_000_000).toLocaleString(undefined, {
       minimumFractionDigits: 1,
       maximumFractionDigits: 1,
-    });
-
-    return `${price < 0 ? "-" : ""}${formattedPrice}억 원`;
+    })}M`;
   }
 
-  const hundredMillion = Math.floor(absPrice / 100000000);
-  const tenThousand = Math.floor((absPrice % 100000000) / 10000);
-  const rest = absPrice % 10000;
+  if (absPrice >= 1_000) {
+    return `${sign}${(absPrice / 1_000).toLocaleString(undefined, {
+      maximumFractionDigits: 0,
+    })}K`;
+  }
 
-  const tokens = [
-    hundredMillion ? `${hundredMillion.toLocaleString()}억` : "",
-    tenThousand ? `${tenThousand.toLocaleString()}만` : "",
-    //rest ? `${rest.toFixed(0)}` : '',
-  ].filter(Boolean);
-  const result = `${
-    tokens.length === 0
-      ? rest
-        ? `${rest.toLocaleString()}`
-        : "0"
-      : tokens.join(" ")
-  }원`;
-  return `${price < 0 ? "-" : ""}${result}`;
+  return `${sign}$${absPrice.toLocaleString()}`;
 };

packages/apexcharts/src/charts/common/bar/DataLabels.js

@@ -56,6 +56,20 @@ export default class BarDataLabels {
       bcy = y + parseFloat(barHeight * visibleSeries)
     }
 
+    const xAxisScale = w.globals.xAxisScale
+    const seriesX = w.globals.seriesX[realIndex]
+    const seriesY =
+      w.config.chart.stackType === '100%'
+        ? series[realIndex]
+        : w.globals.series[realIndex]
+
+    const valY = this.barCtx.isRangeBar
+      ? [y1, y2]
+      : w.config.chart.stackType === '100%'
+      ? series[realIndex][j]
+      : w.globals.series[realIndex][j]
+    const valX = seriesX[seriesY.indexOf(valY)]
+
     let dataLabels = null
     let totalDataLabels = null
     let dataLabelsX = x
@@ -86,11 +100,9 @@ export default class BarDataLabels {
       height: 0,
     }
     if (w.config.dataLabels.enabled) {
-      const yLabel = w.globals.series[i][j]
-
       textRects = graphics.getTextRects(
         w.config.dataLabels.formatter
-          ? w.config.dataLabels.formatter(yLabel, {
+          ? w.config.dataLabels.formatter(valY, {
               ...w,
               seriesIndex: i,
               dataPointIndex: j,
@@ -139,20 +151,24 @@ export default class BarDataLabels {
       barWidth,
     })
 
+    const isHidden = !(
+      (w.globals.isXNumeric &&
+        valX >= xAxisScale.niceMin &&
+        valX <= xAxisScale.niceMax) ||
+      (!w.globals.isXNumeric && xAxisScale.result.includes(valX))
+    )
+
     dataLabels = this.drawCalculatedDataLabels({
       x: dataLabelsPos.dataLabelsX,
       y: dataLabelsPos.dataLabelsY,
-      val: this.barCtx.isRangeBar
-        ? [y1, y2]
-        : w.config.chart.stackType === '100%'
-        ? series[realIndex][j]
-        : w.globals.series[realIndex][j],
+      val: valY,
       i: realIndex,
       j,
       barWidth,
       barHeight,
       textRects,
       dataLabelsConfig,
+      isHidden,
     })
 
     if (w.config.chart.stacked && barTotalDataLabelsConfig.enabled) {
@@ -554,6 +570,7 @@ export default class BarDataLabels {
     barHeight,
     barWidth,
     dataLabelsConfig,
+    isHidden,
   }) {
     const w = this.w
     let rotate = 'rotate(0)'
@@ -576,7 +593,7 @@ export default class BarDataLabels {
       })
 
       let text = ''
-      if (typeof val !== 'undefined') {
+      if (typeof val !== 'undefined' && !isHidden) {
         text = formatter(val, {
           ...w,
           seriesIndex: i,

packages/apexcharts/src/modules/axes/Grid.js

@@ -71,10 +71,6 @@ class Grid {
     const gl = w.globals
     const graphics = new Graphics(this.ctx)
 
-    const strokeSize = Array.isArray(w.config.stroke.width)
-      ? Math.max(...w.config.stroke.width)
-      : w.config.stroke.width
-
     const createClipPath = (id) => {
       const clipPath = document.createElementNS(gl.SVGNS, 'clipPath')
       clipPath.setAttribute('id', id)
@@ -87,38 +83,44 @@ class Grid {
     gl.dom.elForecastMask = createClipPath(`forecastMask${gl.cuid}`)
     gl.dom.elNonForecastMask = createClipPath(`nonForecastMask${gl.cuid}`)
 
+    const strokeSize = Array.isArray(w.config.stroke.width)
+      ? Math.max(...w.config.stroke.width)
+      : w.config.stroke.width
+
+    gl.dom.elGridRect = graphics.drawRect(
+      0,
+      -strokeSize / 2,
+      gl.gridWidth,
+      gl.gridHeight + strokeSize,
+      0,
+      '#fff'
+    )
+
     const hasBar =
       ['bar', 'rangeBar', 'candlestick', 'boxPlot'].includes(
         w.config.chart.type
       ) || w.globals.comboBarCount > 0
 
-    let barWidthLeft = 0
-    let barWidthRight = 0
+    let elGridRectBarSide = 0
     if (hasBar && w.globals.isXNumeric && !w.globals.isBarHorizontal) {
-      barWidthLeft = Math.max(
-        w.config.grid.padding.left,
-        gl.barPadForNumericAxis
-      )
-      barWidthRight = Math.max(
-        w.config.grid.padding.right,
-        gl.barPadForNumericAxis
-      )
-    }
+      let barWidth = 0
 
-    gl.dom.elGridRect = graphics.drawRect(
-      -strokeSize / 2 - 2,
-      -strokeSize / 2 - 2,
-      gl.gridWidth + strokeSize + 4,
-      gl.gridHeight + strokeSize + 4,
-      0,
-      '#fff'
-    )
+      if (typeof w.config.plotOptions.bar.columnWidth === 'number') {
+        barWidth = w.config.plotOptions.bar.columnWidth
+      } else {
+        const { width: xAxisWidth } = gl.dom.elGridRect.node.getBBox()
+        const xTickAmount = gl.xAxisScale.result.length
+        barWidth = (xAxisWidth / xTickAmount) * 0.7
+      }
+
+      elGridRectBarSide = barWidth / 2
+    }
 
     gl.dom.elGridRectBar = graphics.drawRect(
-      -strokeSize / 2 - barWidthLeft - 2,
-      -strokeSize / 2 - 2,
-      gl.gridWidth + strokeSize + barWidthRight + barWidthLeft + 4,
-      gl.gridHeight + strokeSize + 4,
+      0 - elGridRectBarSide,
+      0,
+      gl.gridWidth + elGridRectBarSide * 2,
+      gl.gridHeight,
       0,
       '#fff'
     )