pace-chart-lib 1.0.59 → 1.0.61

package/dist/Components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.d.ts

@@ -417,6 +417,16 @@ export declare function setChartTitle(svg: any, formatOptions: TDefaultChartForm
  * @returns The appropriate D3 curve function based on the interpolation and smoothing settings.
  */
 export declare function getCurveType(formatOptions: TDefaultChartFormatOptionsType): d3.CurveFactory;
+/**
+ * Filters an annotation list based on the user-configured range condition in the right pane
+ * (formatOptions.annotation.annotationRangeFilter).
+ *
+ * @param annotationsList - The array of built annotation objects to filter.
+ * @param formatOptions   - Chart format options containing the range filter config.
+ * @param getMeasure      - Callback that extracts the numeric measure from one annotation item.
+ * @returns The filtered array (same reference when the filter is disabled).
+ */
+export declare function applyAnnotationRangeFilter<T>(annotationsList: T[], formatOptions: TDefaultChartFormatOptionsType, getMeasure: (item: T) => number): T[];
 export declare function commonAnnotations(chartData: TSeries[], xScale: any, yScaleLeft: any, yScaleRight: any, margin: TMargin, d3Annotation: any, labelExcludeList: string[], individualLabelColor: any[], formatOptions: TDefaultChartFormatOptionsType, chartType: string, height: number, width: number, innerWidth: number, dimensionList: string[], innerHeight: number, widgetId: string, svg: any, onDataLabelCoordinatesChange: (coordinates: any[]) => void, xScaleForLegends?: any, columnWidth?: number, isReportEditable?: boolean, isSensitivityChart?: boolean, barChart?: boolean, isAATornado?: boolean): void;
 /**
  * @param {Array} chartData - The main data used to render the chart.

package/dist/Components/Charts/ChartsWithoutAxis/ChartsWithoutAxisFunctions.d.ts

@@ -1,5 +1,6 @@
 import * as d3 from "d3";
 import { TChartMargins, TDefaultChartFormatOptionsType } from "../Core/Common.types";
+export declare function applyPlotAreaRangeFilter<T>(labelsList: T[], formatOptions: TDefaultChartFormatOptionsType, getMeasure: (item: T) => number): T[];
 /**
  * Calculates margins for Bubble and Scatter charts based on various parameters.
  * @param width // Width of the chart container.

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

@@ -267,6 +267,12 @@ export declare const defaultChartFormatOptions: {
         hideInsignificantValue: boolean;
         sortBy: string;
         chartDirection: string;
+        plotAreaRangeFilter: {
+            enabled: boolean;
+            condition: string;
+            minVal: number;
+            maxVal: number;
+        };
     };
     heatMap: {
         showHeatMap: boolean;
@@ -300,6 +306,12 @@ export declare const defaultChartFormatOptions: {
         annotationHideZeroValues: boolean;
         annotationShowHiddenValues: boolean;
         annotationSetLabelColor: string;
+        annotationRangeFilter: {
+            enabled: boolean;
+            condition: string;
+            minVal: number;
+            maxVal: number;
+        };
     };
     total: {
         totalVisibility: boolean;

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

@@ -11261,7 +11261,13 @@ const defaultChartFormatOptions = {
     dataLabelsCoordinates: [],
     hideInsignificantValue: false,
     sortBy: "default",
-    chartDirection: "top"
+    chartDirection: "top",
+    plotAreaRangeFilter: {
+      enabled: false,
+      condition: "lt",
+      minVal: 0,
+      maxVal: 100
+    }
   },
   heatMap: {
     showHeatMap: false,
@@ -11294,7 +11300,13 @@ const defaultChartFormatOptions = {
     annotationBoxVisibility: [],
     annotationHideZeroValues: true,
     annotationShowHiddenValues: true,
-    annotationSetLabelColor: "1"
+    annotationSetLabelColor: "1",
+    annotationRangeFilter: {
+      enabled: false,
+      condition: "lt",
+      minVal: 0,
+      maxVal: 100
+    }
   },
   total: {
     totalVisibility: false,
@@ -13134,6 +13146,25 @@ function getCurvePoints(dx, dy) {
     // end (label)
   ];
 }
+function applyAnnotationRangeFilter(annotationsList, formatOptions, getMeasure) {
+  if (!formatOptions.annotation.annotationRangeFilter?.enabled) return annotationsList;
+  const { condition, minVal, maxVal } = formatOptions.annotation.annotationRangeFilter;
+  return annotationsList.filter((item) => {
+    const measure = getMeasure(item);
+    switch (condition) {
+      case "lt":
+        return measure <= maxVal;
+      case "gt":
+        return measure >= minVal;
+      case "in":
+        return measure >= minVal && measure <= maxVal;
+      case "not-in":
+        return measure < minVal || measure > maxVal;
+      default:
+        return true;
+    }
+  });
+}
 function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d3Annotation2, labelExcludeList, individualLabelColor, formatOptions, chartType, height, width, innerWidth2, dimensionList, innerHeight2, widgetId, svg, onDataLabelCoordinatesChange, xScaleForLegends, columnWidth, isReportEditable, isSensitivityChart, barChart, isAATornado) {
   try {
     const isTornadoChart = chartType === chartTypes.TornadoChart;
@@ -13397,6 +13428,11 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           (d) => barChart ? d.data.x.measure !== 0 : d.data.y.measure !== 0
         );
       }
+      annotationsList = applyAnnotationRangeFilter(
+        annotationsList,
+        formatOptions,
+        (d) => barChart ? d.data.x.measure : d.data.y.measure
+      );
       if (oldAnnotationList.length === 0) {
         oldAnnotationList = annotationsList;
         oldMap = new Map(
@@ -13945,6 +13981,11 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       if (formatOptions.annotation.annotationHideZeroValues) {
         annotationsList = annotationsList.filter((d) => d.data.y !== 0);
       }
+      annotationsList = applyAnnotationRangeFilter(
+        annotationsList,
+        formatOptions,
+        (d) => d.data.y
+      );
       if (oldAnnotationList.length === 0) {
         oldAnnotationList = annotationsList;
         oldMap = new Map(
@@ -15401,6 +15442,11 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
         // ? 
         annotationsList.push(singleAnnotation);
       });
+      annotationsList = applyAnnotationRangeFilter(
+        annotationsList,
+        formatOptions,
+        (d) => barChart ? d.data.x : d.data.y
+      );
       if (oldAnnotationList.length === 0) {
         oldAnnotationList = annotationsList;
         oldMap = new Map(
@@ -20895,6 +20941,25 @@ const NormalizedStackColumnChart = ({
   ) });
 };
 const fileName$a = "ChartsWithoutAxisFunctions.ts";
+function applyPlotAreaRangeFilter(labelsList, formatOptions, getMeasure) {
+  if (!formatOptions?.plotArea?.plotAreaRangeFilter?.enabled) return labelsList;
+  const { condition, minVal, maxVal } = formatOptions.plotArea.plotAreaRangeFilter;
+  return labelsList.filter((item) => {
+    const measure = getMeasure(item);
+    switch (condition) {
+      case "lt":
+        return measure <= maxVal;
+      case "gt":
+        return measure >= minVal;
+      case "in":
+        return measure >= minVal && measure <= maxVal;
+      case "not-in":
+        return measure < minVal || measure > maxVal;
+      default:
+        return true;
+    }
+  });
+}
 function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOptions, maxDimension, maxLegendDimensions) {
   try {
     formatOptions.xAxisLabel.xAxisDateFormat = formatOptions.xAxisLabel.xAxisDateFormat == "DD-MM-YYYY" ? "," : formatOptions.xAxisLabel.xAxisDateFormat;
@@ -21477,6 +21542,11 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
     let AnnotationsList = chartData.filter((d) => d.x1 - d.x0 > 1e-4).map(createAnnotation);
     const visibleFilter = (d) => (d.data.y?.value ?? 0) !== 0;
     AnnotationsList = AnnotationsList.filter(visibleFilter);
+    AnnotationsList = applyAnnotationRangeFilter(
+      AnnotationsList,
+      formatOptions,
+      (d) => d.data.y.value
+    );
     let oldMap = new Map(
       oldAnnotationList.map((d) => [
         d.data?.x?.legend,
@@ -28860,8 +28930,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -28897,8 +28969,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           return "";
         });
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -28965,8 +29039,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
         chartAreaTagG.selectAll("polyline").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("polyline").attr("transform", getPiePosition()).style(
           "stroke",
@@ -28987,8 +29063,10 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
         chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
           let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29295,8 +29373,10 @@ const DonutChart = ({
       if (chartFormatOptions.plotArea.dataLabels) {
         const isSingleDataLabel = pieChartData && pieChartData.length === 1;
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -29332,8 +29412,10 @@ const DonutChart = ({
           return "";
         });
         chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "1"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).enter().append("text").attr(
           "hoverId",
@@ -29406,8 +29488,10 @@ const DonutChart = ({
         let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
         let innerRadius2 = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
         chartAreaTagG.selectAll("polyline").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("polyline").attr("transform", getPiePosition()).style(
           "stroke",
@@ -29428,8 +29512,10 @@ const DonutChart = ({
           return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
         });
         chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-          pieChartData.filter(
-            (d) => d.data.properties.dataLabelPosition == "2"
+          applyAnnotationRangeFilter(
+            pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+            chartFormatOptions,
+            (d) => d.data.data[0].value
           )
         ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
           let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29728,7 +29814,23 @@ const Treemap = ({ data, formatOptions, chartId }) => {
       }
       leaf.append("clipPath").attr("id", (d, i) => `clip-${i}-${chartId}`).append("rect").attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
       if (chartFormatOptions.plotArea.dataLabels) {
-        leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
+        const rf = chartFormatOptions.annotation.annotationRangeFilter;
+        leaf.filter((d) => {
+          if (!rf?.enabled) return true;
+          const val = d.data.data[0].value;
+          switch (rf.condition) {
+            case "lt":
+              return val < rf.maxVal;
+            case "gt":
+              return val > rf.minVal;
+            case "in":
+              return val >= rf.minVal && val <= rf.maxVal;
+            case "not-in":
+              return val < rf.minVal || val > rf.maxVal;
+            default:
+              return true;
+          }
+        }).append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
           "font-style",
           (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).style(
@@ -30037,7 +30139,7 @@ const PieofPie = ({
   const drawParentPieDataLabels = () => {
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
-        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.labelFontColor ?? commonColors.black
         ).attr(
@@ -30061,7 +30163,7 @@ const PieofPie = ({
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.valueFontColor ?? commonColors.black
         ).attr(
@@ -30107,7 +30209,7 @@ const PieofPie = ({
   const drawChildPieDataLabels = (childData) => {
     try {
       if (chartFormatOptions.plotArea.dataLabels) {
-        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.labelFontColor ?? commonColors.black
         ).attr(
@@ -30131,7 +30233,7 @@ const PieofPie = ({
           }
           return "";
         });
-        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+        chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
           "fill",
           (d) => d.data.properties?.valueFontColor ?? commonColors.black
         ).attr(
@@ -30380,7 +30482,11 @@ const PyramidChart = ({
       if (chartFormatOptions.annotation.annotationVisibility) {
         let makeAnnotations = annotation();
         let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-        let finalAnnotationList = annotationsList;
+        let finalAnnotationList = applyAnnotationRangeFilter(
+          annotationsList,
+          chartFormatOptions,
+          (item) => item.data.measure
+        );
         const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
         makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
           x: function() {
@@ -30802,7 +30908,15 @@ const ProgressChart = ({
       });
       chartAreaTagG.append("text").attr("transform", getTransformString()).attr("dy", "0.35em").attr("text-anchor", "middle").attr(
         "visibility",
-        chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
+        () => {
+          if (!chartFormatOptions.plotArea.dataLabels) return "hidden";
+          const passed = applyPlotAreaRangeFilter(
+            [{ value: progressValue }],
+            chartFormatOptions,
+            (d) => d?.value ?? 0
+          );
+          return passed.length > 0 ? "visible" : "hidden";
+        }
       ).attr(
         "fill",
         chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : chartFormatOptions.toolTip.toolTipDisplayUnits
@@ -31462,17 +31576,8 @@ const RadialBarChart = ({
     try {
       let arcTween = function(d, i) {
         try {
-          let interpolate2 = interpolate$4(
-            { endAngle: 0 },
-            { endAngle: scale2(Math.abs(d.data[0].value)) }
-          );
-          return (t) => arc2(
-            {
-              ...d,
-              endAngle: interpolate2(t)
-            },
-            i
-          );
+          const interpolate2 = interpolate$4(0, scale2(Math.abs(d.data[0].value)));
+          return (t) => animArc({ ...d, endAngle: interpolate2(t) }, i);
         } catch (error) {
           logError("RadialBarChart.tsx", "arcTween", error);
         }
@@ -31535,7 +31640,7 @@ const RadialBarChart = ({
       );
       const numArcs = keys.length;
       const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs;
-      let arc2 = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => scale2(Math.abs(d.data[0].value)));
+      let animArc = arc$1().innerRadius((_d, i) => getInnerRadius(i)).outerRadius((_d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => d.endAngle);
       let dummyArc = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle(degToRad(360));
       let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(ChartData).enter().append("g");
       if (chartFormatOptions.plotArea.axialGrid) {
@@ -31585,7 +31690,7 @@ const RadialBarChart = ({
         "visibility",
         chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
       );
-      let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+      let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).attr("fill", (d) => d.properties.color).attr("d", (d, i) => animArc({ ...d, endAngle: 0 }, i)).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -31609,9 +31714,17 @@ const RadialBarChart = ({
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
-      arcs.transition().duration(chartFormatOptions.animation.animationEnabled ? chartFormatOptions.animation.animationDuration : 0).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", arcTween);
+      if (chartFormatOptions.animation.animationEnabled) {
+        arcs.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", arcTween);
+      } else {
+        arcs.attr("d", (d, i) => animArc({ ...d, endAngle: scale2(Math.abs(d.data[0].value)) }, i));
+      }
       if (chartFormatOptions.plotArea.dataLabels) {
-        const labelsData = getModifiedDataForLabels(ChartData);
+        const labelsData = applyPlotAreaRangeFilter(
+          getModifiedDataForLabels(ChartData),
+          chartFormatOptions,
+          (d) => d?.data?.[0]?.value ?? 0
+        );
         svg2.selectAll(".arc-label-" + chartId).data(labelsData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(d.index ?? i) - getInnerRadius(d.index ?? i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${d.index ?? i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
           (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
@@ -31656,7 +31769,7 @@ const RadialBarChart = ({
           hideTooltipOnMouseOut();
         });
         arcs.each((d, i) => {
-          svg2.append("path").attr("id", `arc-path-${i}-` + chartId).attr("d", dummyArc(d, i)).style("fill", "none").style("stroke", "none");
+          svg2.append("path").attr("id", `arc-path-${i}-` + chartId).attr("d", dummyArc(d, i)).attr("fill", "none").attr("stroke", "none");
         });
       }
     } catch (error) {
@@ -73511,7 +73624,7 @@ const CJSPieChart = ({
   formatOptions,
   clientWidth,
   clientHeight,
-  colorBank = CJS_DEFAULT_COLORS
+  colorBank
 }) => {
   const chartData = useMemo(
     () => transformToChartJSData(data, "pie", formatOptions, colorBank),

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

@@ -11264,7 +11264,13 @@
       dataLabelsCoordinates: [],
       hideInsignificantValue: false,
       sortBy: "default",
-      chartDirection: "top"
+      chartDirection: "top",
+      plotAreaRangeFilter: {
+        enabled: false,
+        condition: "lt",
+        minVal: 0,
+        maxVal: 100
+      }
     },
     heatMap: {
       showHeatMap: false,
@@ -11297,7 +11303,13 @@
       annotationBoxVisibility: [],
       annotationHideZeroValues: true,
       annotationShowHiddenValues: true,
-      annotationSetLabelColor: "1"
+      annotationSetLabelColor: "1",
+      annotationRangeFilter: {
+        enabled: false,
+        condition: "lt",
+        minVal: 0,
+        maxVal: 100
+      }
     },
     total: {
       totalVisibility: false,
@@ -13137,6 +13149,25 @@
       // end (label)
     ];
   }
+  function applyAnnotationRangeFilter(annotationsList, formatOptions, getMeasure) {
+    if (!formatOptions.annotation.annotationRangeFilter?.enabled) return annotationsList;
+    const { condition, minVal, maxVal } = formatOptions.annotation.annotationRangeFilter;
+    return annotationsList.filter((item) => {
+      const measure = getMeasure(item);
+      switch (condition) {
+        case "lt":
+          return measure <= maxVal;
+        case "gt":
+          return measure >= minVal;
+        case "in":
+          return measure >= minVal && measure <= maxVal;
+        case "not-in":
+          return measure < minVal || measure > maxVal;
+        default:
+          return true;
+      }
+    });
+  }
   function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d3Annotation2, labelExcludeList, individualLabelColor, formatOptions, chartType, height, width, innerWidth2, dimensionList, innerHeight2, widgetId, svg, onDataLabelCoordinatesChange, xScaleForLegends, columnWidth, isReportEditable, isSensitivityChart, barChart, isAATornado) {
     try {
       const isTornadoChart = chartType === chartTypes.TornadoChart;
@@ -13400,6 +13431,11 @@
             (d) => barChart ? d.data.x.measure !== 0 : d.data.y.measure !== 0
           );
         }
+        annotationsList = applyAnnotationRangeFilter(
+          annotationsList,
+          formatOptions,
+          (d) => barChart ? d.data.x.measure : d.data.y.measure
+        );
         if (oldAnnotationList.length === 0) {
           oldAnnotationList = annotationsList;
           oldMap = new Map(
@@ -13948,6 +13984,11 @@
         if (formatOptions.annotation.annotationHideZeroValues) {
           annotationsList = annotationsList.filter((d) => d.data.y !== 0);
         }
+        annotationsList = applyAnnotationRangeFilter(
+          annotationsList,
+          formatOptions,
+          (d) => d.data.y
+        );
         if (oldAnnotationList.length === 0) {
           oldAnnotationList = annotationsList;
           oldMap = new Map(
@@ -15404,6 +15445,11 @@
           // ? 
           annotationsList.push(singleAnnotation);
         });
+        annotationsList = applyAnnotationRangeFilter(
+          annotationsList,
+          formatOptions,
+          (d) => barChart ? d.data.x : d.data.y
+        );
         if (oldAnnotationList.length === 0) {
           oldAnnotationList = annotationsList;
           oldMap = new Map(
@@ -20898,6 +20944,25 @@
     ) });
   };
   const fileName$a = "ChartsWithoutAxisFunctions.ts";
+  function applyPlotAreaRangeFilter(labelsList, formatOptions, getMeasure) {
+    if (!formatOptions?.plotArea?.plotAreaRangeFilter?.enabled) return labelsList;
+    const { condition, minVal, maxVal } = formatOptions.plotArea.plotAreaRangeFilter;
+    return labelsList.filter((item) => {
+      const measure = getMeasure(item);
+      switch (condition) {
+        case "lt":
+          return measure <= maxVal;
+        case "gt":
+          return measure >= minVal;
+        case "in":
+          return measure >= minVal && measure <= maxVal;
+        case "not-in":
+          return measure < minVal || measure > maxVal;
+        default:
+          return true;
+      }
+    });
+  }
   function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOptions, maxDimension, maxLegendDimensions) {
     try {
       formatOptions.xAxisLabel.xAxisDateFormat = formatOptions.xAxisLabel.xAxisDateFormat == "DD-MM-YYYY" ? "," : formatOptions.xAxisLabel.xAxisDateFormat;
@@ -21480,6 +21545,11 @@
       let AnnotationsList = chartData.filter((d) => d.x1 - d.x0 > 1e-4).map(createAnnotation);
       const visibleFilter = (d) => (d.data.y?.value ?? 0) !== 0;
       AnnotationsList = AnnotationsList.filter(visibleFilter);
+      AnnotationsList = applyAnnotationRangeFilter(
+        AnnotationsList,
+        formatOptions,
+        (d) => d.data.y.value
+      );
       let oldMap = new Map(
         oldAnnotationList.map((d) => [
           d.data?.x?.legend,
@@ -28863,8 +28933,10 @@
         if (chartFormatOptions.plotArea.dataLabels) {
           const isSingleDataLabel = pieChartData && pieChartData.length === 1;
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "1"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).enter().append("text").attr(
             "hoverId",
@@ -28900,8 +28972,10 @@
             return "";
           });
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "1"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).enter().append("text").attr(
             "hoverId",
@@ -28968,8 +29042,10 @@
           let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
           let innerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
           chartAreaTagG.selectAll("polyline").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "2"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).join("polyline").attr("transform", getPiePosition()).style(
             "stroke",
@@ -28990,8 +29066,10 @@
             return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
           });
           chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "2"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
             let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29298,8 +29376,10 @@
         if (chartFormatOptions.plotArea.dataLabels) {
           const isSingleDataLabel = pieChartData && pieChartData.length === 1;
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "1"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).enter().append("text").attr(
             "hoverId",
@@ -29335,8 +29415,10 @@
             return "";
           });
           chartAreaTagG.append("g").attr("class", "parentGroup").attr("transform", `${getPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "1"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "1"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).enter().append("text").attr(
             "hoverId",
@@ -29409,8 +29491,10 @@
           let outerRadius = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0).outerRadius((d) => d.depth > 1 ? d.y1 - 1 + radius / 7 : 0);
           let innerRadius2 = arc$1().startAngle((d) => d.x0).endAngle((d) => d.x1).innerRadius((d) => d.depth > 2 ? d.y0 : 0).outerRadius((d) => d.y1 + radius / 1.5);
           chartAreaTagG.selectAll("polyline").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "2"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).join("polyline").attr("transform", getPiePosition()).style(
             "stroke",
@@ -29431,8 +29515,10 @@
             return [posA, posB, [xC, yC]].map((point2) => point2.join(",")).join(" ");
           });
           chartAreaTagG.append("g").attr("transform", getPiePosition()).selectAll("foreignObject").data(
-            pieChartData.filter(
-              (d) => d.data.properties.dataLabelPosition == "2"
+            applyAnnotationRangeFilter(
+              pieChartData.filter((d) => d.data.properties.dataLabelPosition == "2"),
+              chartFormatOptions,
+              (d) => d.data.data[0].value
             )
           ).join("foreignObject").attr("width", 80).attr("height", 60).attr("x", (d) => {
             let midangle = d.x0 + (d.x1 - d.x0) / 2;
@@ -29731,7 +29817,23 @@
         }
         leaf.append("clipPath").attr("id", (d, i) => `clip-${i}-${chartId}`).append("rect").attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
         if (chartFormatOptions.plotArea.dataLabels) {
-          leaf.append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
+          const rf = chartFormatOptions.annotation.annotationRangeFilter;
+          leaf.filter((d) => {
+            if (!rf?.enabled) return true;
+            const val = d.data.data[0].value;
+            switch (rf.condition) {
+              case "lt":
+                return val < rf.maxVal;
+              case "gt":
+                return val > rf.minVal;
+              case "in":
+                return val >= rf.minVal && val <= rf.maxVal;
+              case "not-in":
+                return val < rf.minVal || val > rf.maxVal;
+              default:
+                return true;
+            }
+          }).append("text").style("fill", (d) => d.data.properties.labelFontColor).style("font-family", (d) => d.data.properties.fontFamily).style("font-size", (d) => d.data.properties.fontSize).style(
             "font-style",
             (d) => d.data.properties.fontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
           ).style(
@@ -30040,7 +30142,7 @@
     const drawParentPieDataLabels = () => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
-          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
             "fill",
             (d) => d.data.properties?.labelFontColor ?? commonColors.black
           ).attr(
@@ -30064,7 +30166,7 @@
             }
             return "";
           });
-          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(pieOfPieData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+          chartAreaTagG.append("g").attr("class", "parentLabels parentGroup").attr("transform", `${getParentPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(pieOfPieData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
             "fill",
             (d) => d.data.properties?.valueFontColor ?? commonColors.black
           ).attr(
@@ -30110,7 +30212,7 @@
     const drawChildPieDataLabels = (childData) => {
       try {
         if (chartFormatOptions.plotArea.dataLabels) {
-          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
+          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr(
             "fill",
             (d) => d.data.properties?.labelFontColor ?? commonColors.black
           ).attr(
@@ -30134,7 +30236,7 @@
             }
             return "";
           });
-          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(childData).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
+          chartAreaTagG.append("g").attr("class", "childLabels parentGroup").attr("transform", `${getChildPiePosition()}`).attr("pointer-events", "none").attr("text-anchor", "middle").selectAll("text").data(applyAnnotationRangeFilter(childData, chartFormatOptions, (d) => d.data.data[0].value)).enter().append("text").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr(
             "fill",
             (d) => d.data.properties?.valueFontColor ?? commonColors.black
           ).attr(
@@ -30383,7 +30485,11 @@
         if (chartFormatOptions.annotation.annotationVisibility) {
           let makeAnnotations = annotation();
           let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-          let finalAnnotationList = annotationsList;
+          let finalAnnotationList = applyAnnotationRangeFilter(
+            annotationsList,
+            chartFormatOptions,
+            (item) => item.data.measure
+          );
           const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
           makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
             x: function() {
@@ -30805,7 +30911,15 @@
         });
         chartAreaTagG.append("text").attr("transform", getTransformString()).attr("dy", "0.35em").attr("text-anchor", "middle").attr(
           "visibility",
-          chartFormatOptions.plotArea.dataLabels ? "visible" : "hidden"
+          () => {
+            if (!chartFormatOptions.plotArea.dataLabels) return "hidden";
+            const passed = applyPlotAreaRangeFilter(
+              [{ value: progressValue }],
+              chartFormatOptions,
+              (d) => d?.value ?? 0
+            );
+            return passed.length > 0 ? "visible" : "hidden";
+          }
         ).attr(
           "fill",
           chartFormatOptions.plotArea.dataLabelValueColor !== commonColors.white ? chartFormatOptions.plotArea.dataLabelValueColor : chartFormatOptions.toolTip.toolTipDisplayUnits
@@ -31465,17 +31579,8 @@
       try {
         let arcTween = function(d, i) {
           try {
-            let interpolate2 = interpolate$4(
-              { endAngle: 0 },
-              { endAngle: scale2(Math.abs(d.data[0].value)) }
-            );
-            return (t) => arc2(
-              {
-                ...d,
-                endAngle: interpolate2(t)
-              },
-              i
-            );
+            const interpolate2 = interpolate$4(0, scale2(Math.abs(d.data[0].value)));
+            return (t) => animArc({ ...d, endAngle: interpolate2(t) }, i);
           } catch (error) {
             logError("RadialBarChart.tsx", "arcTween", error);
           }
@@ -31538,7 +31643,7 @@
         );
         const numArcs = keys.length;
         const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs;
-        let arc2 = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => scale2(Math.abs(d.data[0].value)));
+        let animArc = arc$1().innerRadius((_d, i) => getInnerRadius(i)).outerRadius((_d, i) => getOuterRadius(i)).startAngle(0).endAngle((d) => d.endAngle);
         let dummyArc = arc$1().innerRadius((d, i) => getInnerRadius(i)).outerRadius((d, i) => getOuterRadius(i)).startAngle(0).endAngle(degToRad(360));
         let radialAxis = svg2.append("g").attr("class", "r axis").selectAll("g").data(ChartData).enter().append("g");
         if (chartFormatOptions.plotArea.axialGrid) {
@@ -31588,7 +31693,7 @@
           "visibility",
           chartFormatOptions.plotArea.axialAxis ? "visible" : "hidden"
         );
-        let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).style("fill", (d, i) => d.properties.color).on("mousemove", (event2, d) => {
+        let arcs = svg2.attr("class", "data").selectAll("path").data(ChartData).enter().append("path").attr("class", "parentGroup").attr("hoverId", (d) => d.data[0].legend.replaceAll(" ", "-")).attr("fill", (d) => d.properties.color).attr("d", (d, i) => animArc({ ...d, endAngle: 0 }, i)).on("mousemove", (event2, d) => {
           showTooltipOnMouseMove(
             [
               {
@@ -31612,9 +31717,17 @@
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();
         });
-        arcs.transition().duration(chartFormatOptions.animation.animationEnabled ? chartFormatOptions.animation.animationDuration : 0).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", arcTween);
+        if (chartFormatOptions.animation.animationEnabled) {
+          arcs.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attrTween("d", arcTween);
+        } else {
+          arcs.attr("d", (d, i) => animArc({ ...d, endAngle: scale2(Math.abs(d.data[0].value)) }, i));
+        }
         if (chartFormatOptions.plotArea.dataLabels) {
-          const labelsData = getModifiedDataForLabels(ChartData);
+          const labelsData = applyPlotAreaRangeFilter(
+            getModifiedDataForLabels(ChartData),
+            chartFormatOptions,
+            (d) => d?.data?.[0]?.value ?? 0
+          );
           svg2.selectAll(".arc-label-" + chartId).data(labelsData).enter().append("text").attr("class", "arc-label-" + chartId).attr("class", "parentGroup").attr("text-anchor", "start").attr("dy", (d, i) => (getOuterRadius(d.index ?? i) - getInnerRadius(d.index ?? i)) / 1.75).append("textPath").attr("xlink:href", (d, i) => `#arc-path-${d.index ?? i}-` + chartId).style("startOffset", "50%").attr("hoverId", (d) => d.legend.replaceAll(" ", "-")).text(
             (d) => `  ${d.properties.alias} 
            ${chartFormatOptions.plotArea.dataLabelValue ? getNumberWithFormatFunction(
@@ -31659,7 +31772,7 @@
             hideTooltipOnMouseOut();
           });
           arcs.each((d, i) => {
-            svg2.append("path").attr("id", `arc-path-${i}-` + chartId).attr("d", dummyArc(d, i)).style("fill", "none").style("stroke", "none");
+            svg2.append("path").attr("id", `arc-path-${i}-` + chartId).attr("d", dummyArc(d, i)).attr("fill", "none").attr("stroke", "none");
           });
         }
       } catch (error) {
@@ -73514,7 +73627,7 @@ ${formattedValue}` : formattedValue;
     formatOptions,
     clientWidth,
     clientHeight,
-    colorBank = CJS_DEFAULT_COLORS
+    colorBank
   }) => {
     const chartData = require$$0$1.useMemo(
       () => transformToChartJSData(data, "pie", formatOptions, colorBank),

package/package.json

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