pace-chart-lib 1.0.57 → 1.0.59

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

@@ -188,12 +188,13 @@ export type TAnnotationObject = {
         valueFontStyle: string[];
         isVisible: boolean;
     };
-    dx: 0;
-    dy: 0;
+    dx: number;
+    dy: number;
     connector: {
         end: string;
         curve: d3.CurveFactory;
     };
+    disable?: string[];
     subject: {
         height: number;
         width: number;

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

@@ -10868,11 +10868,6 @@ const AnnotationTypeMap = {
   4: d3CalloutElbow,
   5: d3CalloutCurve
 };
-const ConnectedStyle = {
-  "solid": "unset",
-  "Dotted": "2",
-  "Dashed": "7"
-};
 var staticLegendPosition = /* @__PURE__ */ ((staticLegendPosition2) => {
   staticLegendPosition2["left"] = "Left";
   staticLegendPosition2["right"] = "Right";
@@ -13125,10 +13120,20 @@ function getCurveType(formatOptions) {
 }
 function getSlicedLegendForTornado(legend) {
   const index2 = legend.indexOf(" - ");
-  if (index2 == -1) return legend;
+  if (index2 == -1) return tornadoEntryName.default;
   return legend.slice(index2 + 3);
 }
 const getHoverText = (d, isAATornado) => isAATornado ? d?.legend?.split(" - ")[0] : d?.properties?.alias || d?.properties?.name || "Legend";
+function getCurvePoints(dx, dy) {
+  return [
+    [0, 0],
+    // start (anchor)
+    [dx / 2, dy / 2],
+    // control (curve bend)
+    [dx, dy]
+    // end (label)
+  ];
+}
 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;
@@ -13136,6 +13141,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
     let annotationType = formatOptions.annotation.annotationType ?? "1";
     let annotationPosition = formatOptions.annotation.annotationPosition.toString() != "4" ? formatOptions.annotation.annotationPosition : null;
     let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
+    const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
     if (formatOptions.annotation.annotationVisibility) {
       let Disable = [annotationType == "1" ? "connector" : ""];
       let labelData = [];
@@ -13366,7 +13372,8 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -13424,12 +13431,10 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-            if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-              newAnnotation.connector["points"] = [
-                [0, 0],
-                [0, 0]
-              ];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
             }
           }
         }
@@ -13492,7 +13497,7 @@ function commonAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin, d
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -13582,6 +13587,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
       let stackData = [];
       let getChartType = [];
       let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+      const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
       let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
       oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartTypes.CustomColumnChart);
       let annotationsList = [];
@@ -13913,7 +13919,8 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -13935,6 +13942,9 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           !labelExcludeList.includes(d["key"]) && (d.data.axis == axisTypes.primary ? yScaleLeft(d[1]) <= innerHeight2 && yScaleLeft(d[1]) >= 0 : yScaleRight(d[1]) <= innerHeight2 && yScaleRight(d[1]) >= 0) ? annotationsList.push(singleAnnotation) : null
         );
       });
+      if (formatOptions.annotation.annotationHideZeroValues) {
+        annotationsList = annotationsList.filter((d) => d.data.y !== 0);
+      }
       if (oldAnnotationList.length === 0) {
         oldAnnotationList = annotationsList;
         oldMap = new Map(
@@ -13969,7 +13979,11 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+            }
             if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
               newAnnotation.connector["points"] = [
                 [0, 0],
@@ -14023,7 +14037,7 @@ function commonAnnotationsForCustomChart(chartData, xScale, yScaleLeft, yScaleRi
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -15265,6 +15279,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
       let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
       let fontStyle = formatOptions.annotation.annotationFontStyle;
       let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+      const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
       let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
       oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartType);
       let annotationsList = [];
@@ -15369,7 +15384,8 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
           dy: 0,
           connector: {
             end: connectorType,
-            curve: connecterCurve[formatOptions.annotation.connectorCurve]
+            curve: connecterCurve[formatOptions.annotation.connectorCurve],
+            points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: {
@@ -15419,12 +15435,10 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
             newAnnotation.dx = old.dx;
             newAnnotation.dy = old.dy;
             newAnnotation.data.isVisible = old.isVisible ?? true;
-            newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-            if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-              newAnnotation.connector["points"] = [
-                [0, 0],
-                [0, 0]
-              ];
+            if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+              newAnnotation.connector.points = old.connectorPoints;
+            } else {
+              newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
             }
           }
         }
@@ -15460,7 +15474,7 @@ function stacklineAnnotations(chartData, xScale, yScaleLeft, yScaleRight, margin
           if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
             d.dx = annotation2._dx * width / d.width;
             d.dy = annotation2._dy * height / d.height;
-            d.connectorPoints = annotation2.connector.points;
+            d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
           }
         });
         if (onDataLabelCoordinatesChange) {
@@ -21380,6 +21394,7 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
     const AnnotationType = formatOptions.plotArea.annotationType ?? "1";
     const Disable = [AnnotationType === "1" ? "connector" : ""];
     const ConnectorType = formatOptions.plotArea.connectorType?.toLowerCase() ?? "none";
+    const isCurve = AnnotationType === "5";
     const rotationAngle = formatOptions.plotArea.rotation ?? 0;
     const multiplicationFactor = chartType === chartTypes.PieChart ? 1.06 : 1.1;
     const connecterCurve2 = {
@@ -21387,6 +21402,11 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
       "2": curveLinear$1,
       "3": step
     };
+    const getCurvePoints2 = (dx, dy) => [
+      [0, 0],
+      [dx / 2, dy / 2],
+      [dx, dy]
+    ];
     const connectedStyle2 = {
       solid: "unset",
       dotted: "2,2",
@@ -21442,12 +21462,13 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
         dy: 0,
         connector: {
           end: ConnectorType,
-          curve: connecterCurve2[formatOptions.plotArea.connectorCurve]
+          curve: connecterCurve2[formatOptions.plotArea.connectorCurve],
+          points: isCurve ? getCurvePoints2(0, 0) : [[0, 0], [0, 0]]
         },
         disable: Disable,
         subject: { radius: 3 },
         type: annotationTypeforCharts(d3Annotation2, AnnotationType),
-        color: formatOptions.plotArea.dataLabelNameColor ?? "#000",
+        color: formatOptions.plotArea.connectorColor ?? "#ccc",
         width,
         height,
         index: index2
@@ -21477,7 +21498,11 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
           newAnnotation.dy = old.dy * scaleFactor;
         }
         newAnnotation.data.isVisible = old.data?.isVisible ?? true;
-        newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+        if (old.connectorPoints?.length >= (isCurve ? 3 : 2)) {
+          newAnnotation.connector.points = old.connectorPoints;
+        } else {
+          newAnnotation.connector.points = isCurve ? getCurvePoints2(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+        }
       }
       finalAnnotationList.push(newAnnotation);
     });
@@ -21523,6 +21548,26 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
       }
     }).annotations(finalAnnotationList);
     const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
+    const fontStyleName = formatOptions.plotArea.dataLabelNameFontStyle ?? [];
+    annotations.selectAll(".annotation-note-title").style("font-family", formatOptions.plotArea.dataLabelNameFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelNameFontSize}px`).style("font-style", fontStyleName.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleName.includes("Underline") ? "underline" : "").style("font-weight", fontStyleName.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelNameColor ?? "#000");
+    const fontStyleValue = formatOptions.plotArea.dataLabelValueFontStyle ?? [];
+    annotations.selectAll(".annotation-note-label").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("font-style", fontStyleValue.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleValue.includes("Underline") ? "underline" : "").style("font-weight", fontStyleValue.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000");
+    if (formatOptions.plotArea.plotAreaAbsoluteValue) {
+      annotations.selectAll(".annotation-note-label").each(function(d) {
+        const labelEl = select$2(this);
+        const absText = format(".2s")(Math.abs(d.data.y.value));
+        labelEl.append("tspan").attr("x", labelEl.attr("x") ?? "0").attr("dy", "1.2em").attr("fill-opacity", 0.5).attr("font-weight", "300").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000").text(absText);
+      });
+    }
+    if (ConnectorType === "diamond") {
+      const connectorColor2 = formatOptions.plotArea.connectorColor ?? "#ccc";
+      const size = 5;
+      annotations.selectAll(".annotation-connector").each(function() {
+        if (!select$2(this).select("path.connector").empty()) {
+          select$2(this).append("polygon").attr("class", "connector-end connector-diamond").attr("points", `0,${-size} ${size},0 0,${size} ${-size},0`).style("fill", connectorColor2).style("stroke", connectorColor2);
+        }
+      });
+    }
     annotations.selectAll("rect,.annotation-subject").remove();
     if (formatOptions.animation?.animationEnabled) {
       const duration = formatOptions.animation.animationDuration;
@@ -21533,10 +21578,12 @@ function pieFamilyAnnotation(d3Annotation2, chartData, formatOptions, getPiePosi
         labels.transition().delay((d, i) => i * 30).duration(duration).ease(ease).style("opacity", 1);
       }, 50);
     }
-    annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
+    const connectorColor = formatOptions.plotArea.connectorColor ?? "#ccc";
+    annotations.selectAll(".connector").style("stroke", connectorColor).attr(
       "stroke-dasharray",
       connectedStyle2[formatOptions.plotArea.connectorStyle?.toLowerCase()]
     );
+    annotations.selectAll(".connector-end").style("fill", connectorColor).style("stroke", connectorColor);
     annotations.selectAll(".annotation-note-label").filter((d) => !d.data.isVisible).style("display", "none");
     annotations.selectAll(".annotation-note-label").filter((d) => formatOptions.plotArea.hideInsignificantValue && d.data.x1 - d.data.x0 < 0.09).style("visibility", "hidden");
   } catch (error) {
@@ -26000,8 +26047,8 @@ const LayeredHorizontalBarChart = ({
       onDataLabelCoordinatesChange,
       void 0,
       columnWidth,
-      false,
       isReportEditable,
+      false,
       barChart
     );
     getConnectors();
@@ -30166,7 +30213,8 @@ const fileName$4 = "PyramidChart.tsx";
 const PyramidChart = ({
   data,
   formatOptions,
-  chartId
+  chartId,
+  onDataLabelCoordinatesChange
 }) => {
   const svgRef = useRef();
   let seriesData = generalizedChartData(data.ChartData);
@@ -30329,14 +30377,11 @@ const PyramidChart = ({
   };
   const pyramidAnnotations = (oldAnnotationList) => {
     try {
-      const self = void 0;
-      let AnnotationType = chartFormatOptions.annotation.annotationType ?? "1";
       if (chartFormatOptions.annotation.annotationVisibility) {
-        let Disable = [AnnotationType == "1" ? "connector" : ""];
         let makeAnnotations = annotation();
         let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-        let AnnotationsList = annotationsList;
         let finalAnnotationList = annotationsList;
+        const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
         makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
           x: function() {
             return innerWidth2 * 0.5;
@@ -30346,13 +30391,29 @@ const PyramidChart = ({
           }
         }).on("dragend", function(annotation2) {
           try {
+            finalAnnotationList.forEach((d) => {
+              if (d.data.legend === annotation2.data.legend) {
+                d.dx = annotation2._dx;
+                d.dy = annotation2._dy;
+                d.width = width;
+                d.height = height;
+              }
+            });
+            if (onDataLabelCoordinatesChange) {
+              onDataLabelCoordinatesChange(
+                finalAnnotationList.map((d) => ({
+                  data: { legend: d.data.legend, isVisible: d.data.isVisible ?? true },
+                  dx: d.dx,
+                  dy: d.dy,
+                  width,
+                  height
+                }))
+              );
+            }
             annotations.selectAll(".connector").attr("hoverId", (d) => d.data.legend.replace(/\s+/g, "-")).style(
               "stroke",
               chartFormatOptions.annotation.connectorColor || "#ccc"
-            ).attr(
-              "stroke-dasharray",
-              ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-            );
+            ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
             annotations.selectAll(`.connector-${ConnectorType}`).attr(
               "fill",
               chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30363,10 +30424,7 @@ const PyramidChart = ({
             annotations.selectAll(".note-line").attr("hoverId", (d) => d.data.currentLegend.replace(/\s+/g, "-")).style(
               "stroke",
               chartFormatOptions.annotation.connectorColor || "#ccc"
-            ).attr(
-              "stroke-dasharray",
-              ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-            ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+            ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
             annotations.selectAll(".annotation-note-label").filter((d) => d.data && d.data.isVisible).style("display", "block");
             annotations.selectAll(".annotation-note-title").filter((d) => d.data && d.data.isVisible).style("display", "block");
           } catch (error) {
@@ -30379,10 +30437,7 @@ const PyramidChart = ({
         annotations.selectAll(".connector").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
-        ).attr(
-          "stroke-dasharray",
-          ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-        );
+        ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
         annotations.selectAll(`.connector-${ConnectorType}`).attr("fill", chartFormatOptions.annotation.connectorColor || "#ccc").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30390,10 +30445,7 @@ const PyramidChart = ({
         annotations.selectAll(".note-line").style(
           "stroke",
           chartFormatOptions.annotation.connectorColor || "#ccc"
-        ).attr(
-          "stroke-dasharray",
-          ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-        ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+        ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
         annotations.selectAll(".connector-end").filter((d) => d.connector.end == "dot" && d._dx == 0 && d._dy == 0).remove();
         annotations.selectAll(".annotation-note-label").filter((d) => d.data && !d.data.isVisible).style("display", "none");
         annotations.selectAll(".annotation-note-title").filter((d) => d.data && !d.data.isVisible).style("display", "none");
@@ -30439,7 +30491,12 @@ const PyramidChart = ({
   const prepareNewAnnotationsList = () => {
     try {
       let annotationType = chartFormatOptions.annotation.annotationType ?? "1";
+      let disable = [annotationType == "1" ? "connector" : ""];
       let connectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "none";
+      const savedList = JSON.parse(
+        JSON.stringify(chartFormatOptions.plotArea.dataLabelsCoordinates || [])
+      );
+      const oldMap = new Map(savedList.map((d) => [d.data?.legend, d]));
       annotationsList = [];
       seriesData.forEach((d, i) => {
         try {
@@ -30484,6 +30541,7 @@ const PyramidChart = ({
               end: connectorType,
               curve: ConnecterCurve[chartFormatOptions.annotation.connectorCurve]
             },
+            disable,
             subject: {
               height: 15,
               width: 15
@@ -30494,6 +30552,12 @@ const PyramidChart = ({
             width,
             index: i
           };
+          const old = oldMap.get(d.legend);
+          if (old) {
+            singleAnnotation.dx = old.dx * width / (old.width || width);
+            singleAnnotation.dy = old.dy * height / (old.height || height);
+            singleAnnotation.data.isVisible = old.data?.isVisible ?? true;
+          }
           annotationsList.push(singleAnnotation);
         } catch (error) {
           logError$2(fileName$4, "prepareNewAnnotationsList.forEach", error);
@@ -57660,11 +57724,11 @@ function getBorderDash(lineStyle) {
   return [];
 }
 function transformToChartJSData(chartData, chartType, formatOptions, colorBank = CJS_DEFAULT_COLORS) {
-  const { ChartData: seriesList, DimensionList } = chartData;
+  const { ChartData: seriesList, DimensionList, LegendList } = chartData;
   const labels = DimensionList?.length ? DimensionList : seriesList[0]?.data?.map((d) => d.dimension) ?? [];
   const fillOpacity = Number(formatOptions.plotArea?.fillOpacity ?? 0.8);
   if (chartType === "pie" || chartType === "doughnut" || chartType === "polarArea") {
-    return buildCircularData(seriesList, labels, fillOpacity, colorBank);
+    return buildCircularData(seriesList, labels, fillOpacity, colorBank, LegendList);
   }
   if (chartType === "scatter") {
     return buildScatterData(seriesList, colorBank);
@@ -57725,16 +57789,17 @@ function buildCartesianData(seriesList, labels, chartType, formatOptions, fillOp
   });
   return { labels, datasets };
 }
-function buildCircularData(seriesList, labels, fillOpacity, colorBank) {
+function buildCircularData(seriesList, labels, fillOpacity, colorBank, legendList) {
   const allSeries = seriesList.length ? seriesList : [];
   const datasets = allSeries.map((series) => {
     const values = labels.map((lbl) => {
       const pt = series.data?.find((d) => d.dimension === lbl);
       return pt?.value ?? 0;
     });
-    const backgroundColors = labels.map(
-      (_, i) => hexToRgba(colorBank[i % colorBank.length], fillOpacity)
-    );
+    const backgroundColors = labels.map((_, i) => {
+      const legendColor = legendList?.[i]?.color;
+      return hexToRgba(legendColor ?? colorBank[i % colorBank.length], fillOpacity);
+    });
     return {
       label: series.properties.alias,
       data: values,
@@ -57942,8 +58007,8 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
           style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle),
           weight: getFontWeight(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
         },
-        maxRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
-        minRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
+        maxRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
+        minRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
       },
       grid: {
         display: formatOptions.plotArea?.gridLinesVisibility !== false && formatOptions.plotArea?.gridLinesVertical !== false,
@@ -57996,7 +58061,7 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
     if (isHorizontal) {
       opts.scales = {
         x: { ...yScaleOptions, position: "bottom" },
-        y: { ...xScaleOptions, position: "left" }
+        y: { ...xScaleOptions, position: "left", reverse: true }
       };
       if (opts.scales.x.title) {
         opts.scales.x.title.text = formatOptions.yAxisTitle?.yAxisTitleText ?? "Measure";
@@ -58004,11 +58069,6 @@ function mapFormatOptionsToChartJS(formatOptions, chartType, hasSecondaryAxis =
       if (opts.scales.y.title) {
         opts.scales.y.title.text = formatOptions.xAxisTitle?.xAxisTitleText ?? "Dimension";
       }
-      const hRot = formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0;
-      if (opts.scales.x.ticks) {
-        opts.scales.x.ticks.maxRotation = hRot;
-        opts.scales.x.ticks.minRotation = hRot;
-      }
     } else {
       opts.scales = { x: xScaleOptions, y: yScaleOptions };
     }

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

@@ -10871,11 +10871,6 @@
     4: d3CalloutElbow,
     5: d3CalloutCurve
   };
-  const ConnectedStyle = {
-    "solid": "unset",
-    "Dotted": "2",
-    "Dashed": "7"
-  };
   var staticLegendPosition = /* @__PURE__ */ ((staticLegendPosition2) => {
     staticLegendPosition2["left"] = "Left";
     staticLegendPosition2["right"] = "Right";
@@ -13128,10 +13123,20 @@
   }
   function getSlicedLegendForTornado(legend) {
     const index2 = legend.indexOf(" - ");
-    if (index2 == -1) return legend;
+    if (index2 == -1) return tornadoEntryName.default;
     return legend.slice(index2 + 3);
   }
   const getHoverText = (d, isAATornado) => isAATornado ? d?.legend?.split(" - ")[0] : d?.properties?.alias || d?.properties?.name || "Legend";
+  function getCurvePoints(dx, dy) {
+    return [
+      [0, 0],
+      // start (anchor)
+      [dx / 2, dy / 2],
+      // control (curve bend)
+      [dx, dy]
+      // end (label)
+    ];
+  }
   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;
@@ -13139,6 +13144,7 @@
       let annotationType = formatOptions.annotation.annotationType ?? "1";
       let annotationPosition = formatOptions.annotation.annotationPosition.toString() != "4" ? formatOptions.annotation.annotationPosition : null;
       let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
+      const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
       if (formatOptions.annotation.annotationVisibility) {
         let Disable = [annotationType == "1" ? "connector" : ""];
         let labelData = [];
@@ -13369,7 +13375,8 @@
             dy: 0,
             connector: {
               end: connectorType,
-              curve: connecterCurve[formatOptions.annotation.connectorCurve]
+              curve: connecterCurve[formatOptions.annotation.connectorCurve],
+              points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
             },
             disable: Disable,
             subject: {
@@ -13427,12 +13434,10 @@
               newAnnotation.dx = old.dx;
               newAnnotation.dy = old.dy;
               newAnnotation.data.isVisible = old.isVisible ?? true;
-              newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-              if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-                newAnnotation.connector["points"] = [
-                  [0, 0],
-                  [0, 0]
-                ];
+              if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+                newAnnotation.connector.points = old.connectorPoints;
+              } else {
+                newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
               }
             }
           }
@@ -13495,7 +13500,7 @@
             if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
               d.dx = annotation2._dx * width / d.width;
               d.dy = annotation2._dy * height / d.height;
-              d.connectorPoints = annotation2.connector.points;
+              d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
             }
           });
           if (onDataLabelCoordinatesChange) {
@@ -13585,6 +13590,7 @@
         let stackData = [];
         let getChartType = [];
         let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+        const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
         let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
         oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartTypes.CustomColumnChart);
         let annotationsList = [];
@@ -13916,7 +13922,8 @@
             dy: 0,
             connector: {
               end: connectorType,
-              curve: connecterCurve[formatOptions.annotation.connectorCurve]
+              curve: connecterCurve[formatOptions.annotation.connectorCurve],
+              points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
             },
             disable: Disable,
             subject: {
@@ -13938,6 +13945,9 @@
             !labelExcludeList.includes(d["key"]) && (d.data.axis == axisTypes.primary ? yScaleLeft(d[1]) <= innerHeight2 && yScaleLeft(d[1]) >= 0 : yScaleRight(d[1]) <= innerHeight2 && yScaleRight(d[1]) >= 0) ? annotationsList.push(singleAnnotation) : null
           );
         });
+        if (formatOptions.annotation.annotationHideZeroValues) {
+          annotationsList = annotationsList.filter((d) => d.data.y !== 0);
+        }
         if (oldAnnotationList.length === 0) {
           oldAnnotationList = annotationsList;
           oldMap = new Map(
@@ -13972,7 +13982,11 @@
               newAnnotation.dx = old.dx;
               newAnnotation.dy = old.dy;
               newAnnotation.data.isVisible = old.isVisible ?? true;
-              newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+              if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+                newAnnotation.connector.points = old.connectorPoints;
+              } else {
+                newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+              }
               if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
                 newAnnotation.connector["points"] = [
                   [0, 0],
@@ -14026,7 +14040,7 @@
             if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
               d.dx = annotation2._dx * width / d.width;
               d.dy = annotation2._dy * height / d.height;
-              d.connectorPoints = annotation2.connector.points;
+              d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
             }
           });
           if (onDataLabelCoordinatesChange) {
@@ -15268,6 +15282,7 @@
         let dataLabelColor = formatOptions?.annotation?.annotationSetLabelColor == "2" ? "color" : "labelColor";
         let fontStyle = formatOptions.annotation.annotationFontStyle;
         let connectorType = formatOptions.annotation.connectorType ? formatOptions.annotation.connectorType.toLowerCase() : "None";
+        const isCurve = formatOptions.annotation.connectorType?.toLowerCase() === "curve";
         let oldAnnotationList = JSON.parse(JSON.stringify(formatOptions.plotArea.dataLabelsCoordinates));
         oldAnnotationList = conditionallyResetOldAnnotations(oldAnnotationList, formatOptions, chartType);
         let annotationsList = [];
@@ -15372,7 +15387,8 @@
             dy: 0,
             connector: {
               end: connectorType,
-              curve: connecterCurve[formatOptions.annotation.connectorCurve]
+              curve: connecterCurve[formatOptions.annotation.connectorCurve],
+              points: isCurve ? getCurvePoints(0, 0) : [[0, 0], [0, 0]]
             },
             disable: Disable,
             subject: {
@@ -15422,12 +15438,10 @@
               newAnnotation.dx = old.dx;
               newAnnotation.dy = old.dy;
               newAnnotation.data.isVisible = old.isVisible ?? true;
-              newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
-              if (formatOptions.annotation.annotationType == "5" && newAnnotation.dx == 0 && newAnnotation.dy == 0) {
-                newAnnotation.connector["points"] = [
-                  [0, 0],
-                  [0, 0]
-                ];
+              if (old?.connectorPoints && old.connectorPoints.length >= (isCurve ? 3 : 2)) {
+                newAnnotation.connector.points = old.connectorPoints;
+              } else {
+                newAnnotation.connector.points = isCurve ? getCurvePoints(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
               }
             }
           }
@@ -15463,7 +15477,7 @@
             if (d.data?.legendUniqueId == annotation2.data.legendUniqueId || d.legendUniqueId == annotation2.data.legendUniqueId) {
               d.dx = annotation2._dx * width / d.width;
               d.dy = annotation2._dy * height / d.height;
-              d.connectorPoints = annotation2.connector.points;
+              d.connectorPoints = annotation2.connector?.points?.map((p) => [...p]) || [];
             }
           });
           if (onDataLabelCoordinatesChange) {
@@ -21383,6 +21397,7 @@
       const AnnotationType = formatOptions.plotArea.annotationType ?? "1";
       const Disable = [AnnotationType === "1" ? "connector" : ""];
       const ConnectorType = formatOptions.plotArea.connectorType?.toLowerCase() ?? "none";
+      const isCurve = AnnotationType === "5";
       const rotationAngle = formatOptions.plotArea.rotation ?? 0;
       const multiplicationFactor = chartType === chartTypes.PieChart ? 1.06 : 1.1;
       const connecterCurve2 = {
@@ -21390,6 +21405,11 @@
         "2": curveLinear$1,
         "3": step
       };
+      const getCurvePoints2 = (dx, dy) => [
+        [0, 0],
+        [dx / 2, dy / 2],
+        [dx, dy]
+      ];
       const connectedStyle2 = {
         solid: "unset",
         dotted: "2,2",
@@ -21445,12 +21465,13 @@
           dy: 0,
           connector: {
             end: ConnectorType,
-            curve: connecterCurve2[formatOptions.plotArea.connectorCurve]
+            curve: connecterCurve2[formatOptions.plotArea.connectorCurve],
+            points: isCurve ? getCurvePoints2(0, 0) : [[0, 0], [0, 0]]
           },
           disable: Disable,
           subject: { radius: 3 },
           type: annotationTypeforCharts(d3Annotation2, AnnotationType),
-          color: formatOptions.plotArea.dataLabelNameColor ?? "#000",
+          color: formatOptions.plotArea.connectorColor ?? "#ccc",
           width,
           height,
           index: index2
@@ -21480,7 +21501,11 @@
             newAnnotation.dy = old.dy * scaleFactor;
           }
           newAnnotation.data.isVisible = old.data?.isVisible ?? true;
-          newAnnotation.connector.points = old.connectorPoints?.length ? old.connectorPoints : [[0, 0], [0, 0]];
+          if (old.connectorPoints?.length >= (isCurve ? 3 : 2)) {
+            newAnnotation.connector.points = old.connectorPoints;
+          } else {
+            newAnnotation.connector.points = isCurve ? getCurvePoints2(newAnnotation.dx, newAnnotation.dy) : [[0, 0], [0, 0]];
+          }
         }
         finalAnnotationList.push(newAnnotation);
       });
@@ -21526,6 +21551,26 @@
         }
       }).annotations(finalAnnotationList);
       const annotations = svg.append("g").attr("class", "annotation-group parentGroup").attr("transform", getPiePosition).call(makeAnnotations);
+      const fontStyleName = formatOptions.plotArea.dataLabelNameFontStyle ?? [];
+      annotations.selectAll(".annotation-note-title").style("font-family", formatOptions.plotArea.dataLabelNameFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelNameFontSize}px`).style("font-style", fontStyleName.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleName.includes("Underline") ? "underline" : "").style("font-weight", fontStyleName.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelNameColor ?? "#000");
+      const fontStyleValue = formatOptions.plotArea.dataLabelValueFontStyle ?? [];
+      annotations.selectAll(".annotation-note-label").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("font-style", fontStyleValue.includes("Italic") ? "italic" : "").style("text-decoration", fontStyleValue.includes("Underline") ? "underline" : "").style("font-weight", fontStyleValue.includes("Bold") ? "bold" : "").style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000");
+      if (formatOptions.plotArea.plotAreaAbsoluteValue) {
+        annotations.selectAll(".annotation-note-label").each(function(d) {
+          const labelEl = select$2(this);
+          const absText = format(".2s")(Math.abs(d.data.y.value));
+          labelEl.append("tspan").attr("x", labelEl.attr("x") ?? "0").attr("dy", "1.2em").attr("fill-opacity", 0.5).attr("font-weight", "300").style("font-family", formatOptions.plotArea.dataLabelValueFontFamily).style("font-size", `${formatOptions.plotArea.dataLabelValueFontSize}px`).style("fill", formatOptions.plotArea.dataLabelValueColor ?? "#000").text(absText);
+        });
+      }
+      if (ConnectorType === "diamond") {
+        const connectorColor2 = formatOptions.plotArea.connectorColor ?? "#ccc";
+        const size = 5;
+        annotations.selectAll(".annotation-connector").each(function() {
+          if (!select$2(this).select("path.connector").empty()) {
+            select$2(this).append("polygon").attr("class", "connector-end connector-diamond").attr("points", `0,${-size} ${size},0 0,${size} ${-size},0`).style("fill", connectorColor2).style("stroke", connectorColor2);
+          }
+        });
+      }
       annotations.selectAll("rect,.annotation-subject").remove();
       if (formatOptions.animation?.animationEnabled) {
         const duration = formatOptions.animation.animationDuration;
@@ -21536,10 +21581,12 @@
           labels.transition().delay((d, i) => i * 30).duration(duration).ease(ease).style("opacity", 1);
         }, 50);
       }
-      annotations.selectAll(".connector").style("stroke", formatOptions.plotArea.connectorColor ?? "#ccc").attr(
+      const connectorColor = formatOptions.plotArea.connectorColor ?? "#ccc";
+      annotations.selectAll(".connector").style("stroke", connectorColor).attr(
         "stroke-dasharray",
         connectedStyle2[formatOptions.plotArea.connectorStyle?.toLowerCase()]
       );
+      annotations.selectAll(".connector-end").style("fill", connectorColor).style("stroke", connectorColor);
       annotations.selectAll(".annotation-note-label").filter((d) => !d.data.isVisible).style("display", "none");
       annotations.selectAll(".annotation-note-label").filter((d) => formatOptions.plotArea.hideInsignificantValue && d.data.x1 - d.data.x0 < 0.09).style("visibility", "hidden");
     } catch (error) {
@@ -26003,8 +26050,8 @@
         onDataLabelCoordinatesChange,
         void 0,
         columnWidth,
-        false,
         isReportEditable,
+        false,
         barChart
       );
       getConnectors();
@@ -30169,7 +30216,8 @@
   const PyramidChart = ({
     data,
     formatOptions,
-    chartId
+    chartId,
+    onDataLabelCoordinatesChange
   }) => {
     const svgRef = require$$0$1.useRef();
     let seriesData = generalizedChartData(data.ChartData);
@@ -30332,14 +30380,11 @@
     };
     const pyramidAnnotations = (oldAnnotationList) => {
       try {
-        const self2 = void 0;
-        let AnnotationType = chartFormatOptions.annotation.annotationType ?? "1";
         if (chartFormatOptions.annotation.annotationVisibility) {
-          let Disable = [AnnotationType == "1" ? "connector" : ""];
           let makeAnnotations = annotation();
           let ConnectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "None";
-          let AnnotationsList = annotationsList;
           let finalAnnotationList = annotationsList;
+          const connectorStyleKey = chartFormatOptions.annotation.connectorStyle?.toLowerCase();
           makeAnnotations.editMode(chartFormatOptions.annotation.annotationDraggable).accessors({
             x: function() {
               return innerWidth2 * 0.5;
@@ -30349,13 +30394,29 @@
             }
           }).on("dragend", function(annotation2) {
             try {
+              finalAnnotationList.forEach((d) => {
+                if (d.data.legend === annotation2.data.legend) {
+                  d.dx = annotation2._dx;
+                  d.dy = annotation2._dy;
+                  d.width = width;
+                  d.height = height;
+                }
+              });
+              if (onDataLabelCoordinatesChange) {
+                onDataLabelCoordinatesChange(
+                  finalAnnotationList.map((d) => ({
+                    data: { legend: d.data.legend, isVisible: d.data.isVisible ?? true },
+                    dx: d.dx,
+                    dy: d.dy,
+                    width,
+                    height
+                  }))
+                );
+              }
               annotations.selectAll(".connector").attr("hoverId", (d) => d.data.legend.replace(/\s+/g, "-")).style(
                 "stroke",
                 chartFormatOptions.annotation.connectorColor || "#ccc"
-              ).attr(
-                "stroke-dasharray",
-                ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-              );
+              ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
               annotations.selectAll(`.connector-${ConnectorType}`).attr(
                 "fill",
                 chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30366,10 +30427,7 @@
               annotations.selectAll(".note-line").attr("hoverId", (d) => d.data.currentLegend.replace(/\s+/g, "-")).style(
                 "stroke",
                 chartFormatOptions.annotation.connectorColor || "#ccc"
-              ).attr(
-                "stroke-dasharray",
-                ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-              ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+              ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
               annotations.selectAll(".annotation-note-label").filter((d) => d.data && d.data.isVisible).style("display", "block");
               annotations.selectAll(".annotation-note-title").filter((d) => d.data && d.data.isVisible).style("display", "block");
             } catch (error) {
@@ -30382,10 +30440,7 @@
           annotations.selectAll(".connector").style(
             "stroke",
             chartFormatOptions.annotation.connectorColor || "#ccc"
-          ).attr(
-            "stroke-dasharray",
-            ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-          );
+          ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]);
           annotations.selectAll(`.connector-${ConnectorType}`).attr("fill", chartFormatOptions.annotation.connectorColor || "#ccc").style(
             "stroke",
             chartFormatOptions.annotation.connectorColor || "#ccc"
@@ -30393,10 +30448,7 @@
           annotations.selectAll(".note-line").style(
             "stroke",
             chartFormatOptions.annotation.connectorColor || "#ccc"
-          ).attr(
-            "stroke-dasharray",
-            ConnectedStyle[chartFormatOptions.annotation.connectorStyle]
-          ).filter((d) => d._dx == 0 && d._dy == 0).remove();
+          ).attr("stroke-dasharray", connectedStyle[connectorStyleKey]).filter((d) => d._dx == 0 && d._dy == 0).remove();
           annotations.selectAll(".connector-end").filter((d) => d.connector.end == "dot" && d._dx == 0 && d._dy == 0).remove();
           annotations.selectAll(".annotation-note-label").filter((d) => d.data && !d.data.isVisible).style("display", "none");
           annotations.selectAll(".annotation-note-title").filter((d) => d.data && !d.data.isVisible).style("display", "none");
@@ -30442,7 +30494,12 @@
     const prepareNewAnnotationsList = () => {
       try {
         let annotationType = chartFormatOptions.annotation.annotationType ?? "1";
+        let disable = [annotationType == "1" ? "connector" : ""];
         let connectorType = chartFormatOptions.annotation.connectorType ? chartFormatOptions.annotation.connectorType.toLowerCase() : "none";
+        const savedList = JSON.parse(
+          JSON.stringify(chartFormatOptions.plotArea.dataLabelsCoordinates || [])
+        );
+        const oldMap = new Map(savedList.map((d) => [d.data?.legend, d]));
         annotationsList = [];
         seriesData.forEach((d, i) => {
           try {
@@ -30487,6 +30544,7 @@
                 end: connectorType,
                 curve: ConnecterCurve[chartFormatOptions.annotation.connectorCurve]
               },
+              disable,
               subject: {
                 height: 15,
                 width: 15
@@ -30497,6 +30555,12 @@
               width,
               index: i
             };
+            const old = oldMap.get(d.legend);
+            if (old) {
+              singleAnnotation.dx = old.dx * width / (old.width || width);
+              singleAnnotation.dy = old.dy * height / (old.height || height);
+              singleAnnotation.data.isVisible = old.data?.isVisible ?? true;
+            }
             annotationsList.push(singleAnnotation);
           } catch (error) {
             logError$2(fileName$4, "prepareNewAnnotationsList.forEach", error);
@@ -57663,11 +57727,11 @@
     return [];
   }
   function transformToChartJSData(chartData, chartType, formatOptions, colorBank = CJS_DEFAULT_COLORS) {
-    const { ChartData: seriesList, DimensionList } = chartData;
+    const { ChartData: seriesList, DimensionList, LegendList } = chartData;
     const labels = DimensionList?.length ? DimensionList : seriesList[0]?.data?.map((d) => d.dimension) ?? [];
     const fillOpacity = Number(formatOptions.plotArea?.fillOpacity ?? 0.8);
     if (chartType === "pie" || chartType === "doughnut" || chartType === "polarArea") {
-      return buildCircularData(seriesList, labels, fillOpacity, colorBank);
+      return buildCircularData(seriesList, labels, fillOpacity, colorBank, LegendList);
     }
     if (chartType === "scatter") {
       return buildScatterData(seriesList, colorBank);
@@ -57728,16 +57792,17 @@
     });
     return { labels, datasets };
   }
-  function buildCircularData(seriesList, labels, fillOpacity, colorBank) {
+  function buildCircularData(seriesList, labels, fillOpacity, colorBank, legendList) {
     const allSeries = seriesList.length ? seriesList : [];
     const datasets = allSeries.map((series) => {
       const values = labels.map((lbl) => {
         const pt = series.data?.find((d) => d.dimension === lbl);
         return pt?.value ?? 0;
       });
-      const backgroundColors = labels.map(
-        (_, i) => hexToRgba(colorBank[i % colorBank.length], fillOpacity)
-      );
+      const backgroundColors = labels.map((_, i) => {
+        const legendColor = legendList?.[i]?.color;
+        return hexToRgba(legendColor ?? colorBank[i % colorBank.length], fillOpacity);
+      });
       return {
         label: series.properties.alias,
         data: values,
@@ -57945,8 +58010,8 @@
             style: getFontStyle(formatOptions.xAxisLabel?.xAxisLabelFontStyle),
             weight: getFontWeight(formatOptions.xAxisLabel?.xAxisLabelFontStyle)
           },
-          maxRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
-          minRotation: isHorizontal ? 0 : formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
+          maxRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0,
+          minRotation: formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0
         },
         grid: {
           display: formatOptions.plotArea?.gridLinesVisibility !== false && formatOptions.plotArea?.gridLinesVertical !== false,
@@ -57999,7 +58064,7 @@
       if (isHorizontal) {
         opts.scales = {
           x: { ...yScaleOptions, position: "bottom" },
-          y: { ...xScaleOptions, position: "left" }
+          y: { ...xScaleOptions, position: "left", reverse: true }
         };
         if (opts.scales.x.title) {
           opts.scales.x.title.text = formatOptions.yAxisTitle?.yAxisTitleText ?? "Measure";
@@ -58007,11 +58072,6 @@
         if (opts.scales.y.title) {
           opts.scales.y.title.text = formatOptions.xAxisTitle?.xAxisTitleText ?? "Dimension";
         }
-        const hRot = formatOptions.xAxisLabel?.xAxisLabelRotation ?? 0;
-        if (opts.scales.x.ticks) {
-          opts.scales.x.ticks.maxRotation = hRot;
-          opts.scales.x.ticks.minRotation = hRot;
-        }
       } else {
         opts.scales = { x: xScaleOptions, y: yScaleOptions };
       }

package/package.json

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