pace-chart-lib 1.0.60 → 1.0.61

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import "./Components/Charts/Core/ChartStyles.scss";
+export { default as ColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnChart";
+export { default as CustomColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/CustomColumnChart";
+export { default as LayeredColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/LayeredColumnChart";
+export { default as StackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart";
+export { default as NormalizedStackColumnChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/NormalizedStackColumnChart";
+export { default as ColumnHistogramChart } from "./Components/Charts/ChartsWithAxis/ColumnFamily/ColumnHistogramChart";
+export { default as LineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/LineChart";
+export { default as StackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/StackLineChart";
+export { default as NormalizedStackLineChart } from "./Components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart";
+export { default as HorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalBarChart";
+export { default as StackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/StackHorizontalBarChart";
+export { default as NormalizedStackHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart";
+export { default as LayeredHorizontalBarChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/LayeredHorizontalBarChart";
+export { default as HorizontalHistogramChart } from "./Components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalHistogramChart";
+export { default as AreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/AreaChart";
+export { default as StackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart";
+export { default as NormalizedStackAreaChart } from "./Components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart";
+export { default as PieChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieChart";
+export { default as DonutChart } from "./Components/Charts/ChartsWithoutAxis/PieFamily/DonutChart";
+export { default as Treemap } from "./Components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart";
+export { default as PieofPie } from "./Components/Charts/ChartsWithoutAxis/PieFamily/PieofPieChart";
+export { default as PyramidChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/PyramidChart";
+export { default as ProgressChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart";
+export { default as Speedometer } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/Speedometer";
+export { default as RadialBarChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart";
+export { default as WordCloud } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/WordCloud";
+export { default as VennChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/VennChart";
+export { default as SankeyChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/SankeyChart";
+export { default as Maps } from "./Components/Charts/ChartsWithoutAxis/Maps/Maps";
+export { default as OrganizationChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/OrganizationChart";
+export { default as BubbleChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/BubbleChart";
+export { default as ScatterChart } from "./Components/Charts/ChartsWithoutAxis/OtherCharts/ScatterChart";
+export { default as WaterfallChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart";
+export { default as TornadoChart } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/TornadoChart";
+export { default as DotPlot } from "./Components/Charts/ChartsWithAxis/MiscellaneousChartFamily/DotPlot";
+export { CJSColumnChart, CJSStackColumnChart, CJSHorizontalBarChart, CJSStackHorizontalBarChart, CJSLineChart, CJSStackLineChart, CJSAreaChart, CJSStackAreaChart, CJSPieChart, CJSDonutChart, CJSScatterChart, CJSBubbleChart, CJSRadarChart, CJSPolarAreaChart, CJSNormalizedStackColumnChart, CJSNormalizedStackHorizontalBarChart, CJSNormalizedStackLineChart, CJSNormalizedStackAreaChart, ChartJSWrapper, transformToChartJSData, transformToNormalizedChartJSData, mapFormatOptionsToChartJS, hexToRgba, CJS_DEFAULT_COLORS, } from "./Components/Charts/ChartJS/index";

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,
@@ -13147,9 +13153,9 @@ function applyAnnotationRangeFilter(annotationsList, formatOptions, getMeasure)
     const measure = getMeasure(item);
     switch (condition) {
       case "lt":
-        return measure < maxVal;
+        return measure <= maxVal;
       case "gt":
-        return measure > minVal;
+        return measure >= minVal;
       case "in":
         return measure >= minVal && measure <= maxVal;
       case "not-in":
@@ -20935,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;
@@ -28905,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",
@@ -28942,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",
@@ -29010,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",
@@ -29032,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;
@@ -29340,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",
@@ -29377,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",
@@ -29451,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",
@@ -29473,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;
@@ -29773,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(
@@ -30082,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(
@@ -30106,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(
@@ -30152,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(
@@ -30176,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(
@@ -30425,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() {
@@ -30847,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
@@ -31651,7 +31720,11 @@ const RadialBarChart = ({
         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(

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,
@@ -13150,9 +13156,9 @@
       const measure = getMeasure(item);
       switch (condition) {
         case "lt":
-          return measure < maxVal;
+          return measure <= maxVal;
         case "gt":
-          return measure > minVal;
+          return measure >= minVal;
         case "in":
           return measure >= minVal && measure <= maxVal;
         case "not-in":
@@ -20938,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;
@@ -28908,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",
@@ -28945,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",
@@ -29013,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",
@@ -29035,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;
@@ -29343,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",
@@ -29380,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",
@@ -29454,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",
@@ -29476,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;
@@ -29776,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(
@@ -30085,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(
@@ -30109,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(
@@ -30155,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(
@@ -30179,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(
@@ -30428,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() {
@@ -30850,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
@@ -31654,7 +31723,11 @@
           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(

package/package.json

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