pace-chart-lib 1.0.28 → 1.0.30

package/dist/Components/Charts/Core/DefaultProperties.types.d.ts

@@ -566,6 +566,7 @@ export declare const defaultChartFormatOptions: {
         dataTableDecimalPrecision: string;
         dataTableDisplayUnits: string;
         dataTableLabelColor: commonColors;
+        dataTableAxisLabel: boolean;
     };
     dataTableOuterBorder: {
         borderButtonVisibility: boolean;

package/dist/pace-chart-lib.es.js

@@ -11443,7 +11443,8 @@ const defaultChartFormatOptions = {
     dataTableNumberFormat: ",",
     dataTableDecimalPrecision: "2",
     dataTableDisplayUnits: "None",
-    dataTableLabelColor: commonColors.black
+    dataTableLabelColor: commonColors.black,
+    dataTableAxisLabel: true
   },
   dataTableOuterBorder: {
     borderButtonVisibility: true,
@@ -11784,7 +11785,7 @@ function calculateVerticalMargins(windowWidth, windowHeight, maxNumberForPrimary
         bottom2 = xAxisRelatedMargin + 5 + scrollHeightConstant;
         break;
       case staticLegendPosition.bottom:
-        bottom2 = 40 + xAxisRelatedMargin + scrollHeightConstant;
+        bottom2 = 30 + xAxisRelatedMargin + scrollHeightConstant;
         top2 = metrics.chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
         break;
       case staticLegendPosition.left:
@@ -13744,7 +13745,7 @@ const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dime
     let dataTableHeight = 20;
     if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
       formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-      let exactAvailableWidth = yLabel + yTitle - 36;
+      let exactAvailableWidth = yLabel + yTitle;
       seriesData.forEach((data, i) => {
         let tempObj = {
           "data": data.data.filter((data2) => dimensionList.includes(data2.dimension)),
@@ -13836,14 +13837,14 @@ function addDataTable(isFitChart, svg, currentTag, dataTable, colWidth, yAxis, x
     selectAll("#dataTableG" + chartId).remove();
     let tag = currentTag.append("g").attr("id", "dataTableG" + chartId);
     dataTable.forEach((data, i) => {
-      yCordinate = yCordinate + cellHeight;
+      yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
       cellHeight = data.properties.height;
       getLegendsAppended(tag, i, data, cellHeight);
       let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
         "transform",
         (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
       );
-      if (i == 0) {
+      if (i == 0 && formatOptions.dataTableProperties.dataTableAxisLabel) {
         parentTag.append("foreignObject").attr("class", "dataTableColHeaders").attr("x", 0).attr("y", tableStartY).attr("id", (d, index2) => index2).attr("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).attr("height", "20px").append("xhtml:div").style("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).style("height", `${20}px`).style("border-width", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "width", "colHeaders")).style("border-style", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "style", "colHeaders")).style("border-color", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "color", "colHeaders")).style("text-align", "center").style("white-space", "nowrap").style("text-overflow", "ellipsis").style("overflow", "hidden").style("padding-left", "3px").style("font-size", formatOptions.dataTableProperties.dataTableFontSize + "px").style("font-family", formatOptions.dataTableProperties.dataTableFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
@@ -15434,7 +15435,7 @@ function drawLegends(height, svg, maxLegendDimensions, chartTitleHeight, width,
             svg,
             seriesData,
             7,
-            height - 25,
+            height - 35,
             width - 10,
             30,
             position,
@@ -16911,10 +16912,10 @@ const ColumnChart = ({
         return yScale(0);
       }).attr("height", 0).attr("fill", data2.properties.color).attr(
         "stroke-dasharray",
-        (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17125,6 +17126,7 @@ const CustomColumnChart = ({
   let yAxisLeft;
   let xAxis;
   let yAxisRight;
+  let totalValueMap = /* @__PURE__ */ new Map();
   let filteredDimension;
   let filteredData = [];
   let requiredData = [];
@@ -17621,9 +17623,9 @@ const CustomColumnChart = ({
     }).attr("height", (d) => {
       const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
       return Math.abs(yScale(d.value) - yScale(0));
-    }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+    }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
       "stroke",
-      (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+      (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
     ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
       "visibility",
       (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17686,7 +17688,7 @@ const CustomColumnChart = ({
     ).append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).select("path").attr("d", (d) => lineGenerator(d.data)).attr(
       "stroke",
-      (d) => d.properties !== commonColors.white ? d.properties.color : "none"
+      (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
     ).attr("stroke-dasharray", (d) => {
       switch (d.properties.lineStyle) {
         case staticLineStyle.dotted:
@@ -17885,12 +17887,12 @@ const CustomColumnChart = ({
         (sdata) => sdata.legend === d.key
       );
       const props = seriesData[seriesIndex]?.properties;
-      return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+      return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr("stroke-dasharray", (d, i, nodes) => {
       const seriesIndex = Array.from(seriesData).findIndex(
         (sdata) => sdata.legend === d.key
       );
-      return seriesData[seriesIndex]?.properties.stackBorderStyle === 2 ? "5,3" : "0";
+      return seriesData[seriesIndex]?.properties.stackBorderStyle == 2 ? "5,3" : "0";
     }).attr("stroke-width", (d, i, nodes) => {
       const seriesIndex = Array.from(seriesData).findIndex(
         (sdata) => sdata.legend === d.key
@@ -17932,6 +17934,7 @@ const CustomColumnChart = ({
     filteredData = fData;
     filteredDimension = fDimension;
     visibleBars = fVisibleBars;
+    createTotalMeasureValueMapForCustomColumChart(data, totalValueMap, filteredDimension);
     checkAndupdateInputData(
       primaryStackAreaAxisData,
       primaryStackColumnAxisData,
@@ -17955,6 +17958,28 @@ const CustomColumnChart = ({
     });
     drawCustomChart();
   };
+  function createTotalMeasureValueMapForCustomColumChart(data2, totalValueMap2, filteredDimension2) {
+    totalValueMap2.clear();
+    if (filteredDimension2 && filteredDimension2.length > 0) {
+      filteredDimension2.forEach((dimension) => {
+        let totalMeasureValue = 0;
+        totalValueMap2.set(dimension, totalMeasureValue);
+      });
+    }
+    if (data2.ChartData && data2.ChartData.length > 0) {
+      data2.ChartData.forEach((series) => {
+        if (series.properties.type.includes("Stack")) {
+          series.data.forEach((dataPoint, index2) => {
+            if (totalValueMap2.has(dataPoint.dimension)) {
+              let existingTotal = totalValueMap2.get(dataPoint.dimension) || 0;
+              existingTotal += dataPoint.value || 0;
+              totalValueMap2.set(dataPoint.dimension, existingTotal);
+            }
+          });
+        }
+      });
+    }
+  }
   const drawCustomChart = () => {
     getXScale();
     getXAxis();
@@ -18003,6 +18028,20 @@ const CustomColumnChart = ({
       xScaleForLegends,
       isReportEditable
     );
+    addTotalValue(
+      totalValueMap,
+      xScale,
+      yScaleLeft,
+      margin,
+      d3Annotation,
+      [],
+      formatOptions,
+      chartType,
+      height,
+      width,
+      svg,
+      isReportEditable
+    );
   };
   const createStackData = (requiredStackChatData) => {
     let legendList = requiredStackChatData.data.map((d) => d.legend);
@@ -18457,10 +18496,10 @@ const LayeredColumnChart = ({
         return Math.abs(yScale(d.value) - yScale(0));
       }).attr("fill", data2.properties.color).attr(
         "stroke-dasharray",
-        (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-      ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+        (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+      ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -18940,16 +18979,16 @@ const StackColumnChart = ({
       return props?.color || "gray";
     }).attr("stroke", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+      return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr("stroke-dasharray", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return props?.stackBorderStyle === 2 ? "5,3" : "0";
+      return props?.stackBorderStyle == 2 ? "5,3" : "0";
     }).attr("stroke-width", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
       return (props?.stackBorderWidth || 0) + "px";
     }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
+      return d.data[d.key] == 0 && props?.hideZeroValues ? "hidden" : "visible";
     }).on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [

package/dist/pace-chart-lib.umd.js

@@ -11446,7 +11446,8 @@
       dataTableNumberFormat: ",",
       dataTableDecimalPrecision: "2",
       dataTableDisplayUnits: "None",
-      dataTableLabelColor: commonColors.black
+      dataTableLabelColor: commonColors.black,
+      dataTableAxisLabel: true
     },
     dataTableOuterBorder: {
       borderButtonVisibility: true,
@@ -11787,7 +11788,7 @@
           bottom2 = xAxisRelatedMargin + 5 + scrollHeightConstant;
           break;
         case staticLegendPosition.bottom:
-          bottom2 = 40 + xAxisRelatedMargin + scrollHeightConstant;
+          bottom2 = 30 + xAxisRelatedMargin + scrollHeightConstant;
           top2 = metrics.chartTitleHeight + 5 + (isNormalizedChart ? 12 : 0);
           break;
         case staticLegendPosition.left:
@@ -13747,7 +13748,7 @@
       let dataTableHeight = 20;
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
         formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-        let exactAvailableWidth = yLabel + yTitle - 36;
+        let exactAvailableWidth = yLabel + yTitle;
         seriesData.forEach((data, i) => {
           let tempObj = {
             "data": data.data.filter((data2) => dimensionList.includes(data2.dimension)),
@@ -13839,14 +13840,14 @@
       selectAll("#dataTableG" + chartId).remove();
       let tag = currentTag.append("g").attr("id", "dataTableG" + chartId);
       dataTable.forEach((data, i) => {
-        yCordinate = yCordinate + cellHeight;
+        yCordinate = yCordinate + (!formatOptions.dataTableProperties.dataTableAxisLabel && i === 0 ? 0 : cellHeight);
         cellHeight = data.properties.height;
         getLegendsAppended(tag, i, data, cellHeight);
         let parentTag = tag.append("g").attr("class", "dataTableBorder").selectAll("#scaling-svg" + chartId + " .foreignObject").data((d, pos) => data["data"]).enter().filter((d) => xAxis(d.dimension)).append("g").attr("fill", commonColors.transparent).attr(
           "transform",
           (d, index2) => `translate(${index2 === 0 ? 0 : xAxis(d.dimension) - cellWidth / 2},0)`
         );
-        if (i == 0) {
+        if (i == 0 && formatOptions.dataTableProperties.dataTableAxisLabel) {
           parentTag.append("foreignObject").attr("class", "dataTableColHeaders").attr("x", 0).attr("y", tableStartY).attr("id", (d, index2) => index2).attr("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).attr("height", "20px").append("xhtml:div").style("width", (d, index2) => index2 === 0 ? cellWidth + outerPadding + calWidthForSeriesNames / 2 : index2 === dimensionCount - 1 ? cellWidth + outerPadding - calWidthForSeriesNames / 2 : cellWidth).style("height", `${20}px`).style("border-width", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "width", "colHeaders")).style("border-style", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "style", "colHeaders")).style("border-color", (d, index2) => getBorderStyle(formatOptions, index2, void 0, dimensionCount, legendsCount, "color", "colHeaders")).style("text-align", "center").style("white-space", "nowrap").style("text-overflow", "ellipsis").style("overflow", "hidden").style("padding-left", "3px").style("font-size", formatOptions.dataTableProperties.dataTableFontSize + "px").style("font-family", formatOptions.dataTableProperties.dataTableFontFamily).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
             "text-decoration",
             fontStyle.includes("Underline") ? "Underline" : ""
@@ -15437,7 +15438,7 @@
               svg,
               seriesData,
               7,
-              height - 25,
+              height - 35,
               width - 10,
               30,
               position,
@@ -16914,10 +16915,10 @@
           return yScale(0);
         }).attr("height", 0).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+          (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+        ).attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
           "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+          (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17128,6 +17129,7 @@
     let yAxisLeft;
     let xAxis;
     let yAxisRight;
+    let totalValueMap = /* @__PURE__ */ new Map();
     let filteredDimension;
     let filteredData = [];
     let requiredData = [];
@@ -17624,9 +17626,9 @@
       }).attr("height", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return Math.abs(yScale(d.value) - yScale(0));
-      }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+      }).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
         "stroke",
-        (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+        (d) => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -17689,7 +17691,7 @@
       ).append("path").attr("class", "line").attr("fill", "none");
       lineGroupsEnter.merge(lineGroups).select("path").attr("d", (d) => lineGenerator(d.data)).attr(
         "stroke",
-        (d) => d.properties !== commonColors.white ? d.properties.color : "none"
+        (d) => d.properties.color !== commonColors.white ? d.properties.color : "none"
       ).attr("stroke-dasharray", (d) => {
         switch (d.properties.lineStyle) {
           case staticLineStyle.dotted:
@@ -17888,12 +17890,12 @@
           (sdata) => sdata.legend === d.key
         );
         const props = seriesData[seriesIndex]?.properties;
-        return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+        return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr("stroke-dasharray", (d, i, nodes) => {
         const seriesIndex = Array.from(seriesData).findIndex(
           (sdata) => sdata.legend === d.key
         );
-        return seriesData[seriesIndex]?.properties.stackBorderStyle === 2 ? "5,3" : "0";
+        return seriesData[seriesIndex]?.properties.stackBorderStyle == 2 ? "5,3" : "0";
       }).attr("stroke-width", (d, i, nodes) => {
         const seriesIndex = Array.from(seriesData).findIndex(
           (sdata) => sdata.legend === d.key
@@ -17935,6 +17937,7 @@
       filteredData = fData;
       filteredDimension = fDimension;
       visibleBars = fVisibleBars;
+      createTotalMeasureValueMapForCustomColumChart(data, totalValueMap, filteredDimension);
       checkAndupdateInputData(
         primaryStackAreaAxisData,
         primaryStackColumnAxisData,
@@ -17958,6 +17961,28 @@
       });
       drawCustomChart();
     };
+    function createTotalMeasureValueMapForCustomColumChart(data2, totalValueMap2, filteredDimension2) {
+      totalValueMap2.clear();
+      if (filteredDimension2 && filteredDimension2.length > 0) {
+        filteredDimension2.forEach((dimension) => {
+          let totalMeasureValue = 0;
+          totalValueMap2.set(dimension, totalMeasureValue);
+        });
+      }
+      if (data2.ChartData && data2.ChartData.length > 0) {
+        data2.ChartData.forEach((series) => {
+          if (series.properties.type.includes("Stack")) {
+            series.data.forEach((dataPoint, index2) => {
+              if (totalValueMap2.has(dataPoint.dimension)) {
+                let existingTotal = totalValueMap2.get(dataPoint.dimension) || 0;
+                existingTotal += dataPoint.value || 0;
+                totalValueMap2.set(dataPoint.dimension, existingTotal);
+              }
+            });
+          }
+        });
+      }
+    }
     const drawCustomChart = () => {
       getXScale();
       getXAxis();
@@ -18006,6 +18031,20 @@
         xScaleForLegends,
         isReportEditable
       );
+      addTotalValue(
+        totalValueMap,
+        xScale,
+        yScaleLeft,
+        margin,
+        d3Annotation,
+        [],
+        formatOptions,
+        chartType,
+        height,
+        width,
+        svg,
+        isReportEditable
+      );
     };
     const createStackData = (requiredStackChatData) => {
       let legendList = requiredStackChatData.data.map((d) => d.legend);
@@ -18460,10 +18499,10 @@
           return Math.abs(yScale(d.value) - yScale(0));
         }).attr("fill", data2.properties.color).attr(
           "stroke-dasharray",
-          (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
-        ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
+          (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
+        ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
           "stroke",
-          (d) => data2.properties.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderStyle : "none"
+          () => data2.properties.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? data2.properties.stackBorderColor : "none"
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
@@ -18943,16 +18982,16 @@
         return props?.color || "gray";
       }).attr("stroke", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
+        return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
       }).attr("stroke-dasharray", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return props?.stackBorderStyle === 2 ? "5,3" : "0";
+        return props?.stackBorderStyle == 2 ? "5,3" : "0";
       }).attr("stroke-width", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
         return (props?.stackBorderWidth || 0) + "px";
       }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
-        return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
+        return d.data[d.key] == 0 && props?.hideZeroValues ? "hidden" : "visible";
       }).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pace-chart-lib",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS.",
   "license": "MIT",
   "type": "module",