pace-chart-lib 1.0.16 → 1.0.18

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

@@ -11879,14 +11879,14 @@ function initSvg$1(svg, width, height, formatOptions) {
   svg.attr("viewBox", "0 0 " + width + " " + height);
   const { chartAreaColor, chartAreaBorder } = formatOptions.chartArea;
   svg.style("background-color", chartAreaColor);
-  const isBorderEnable = chartAreaBorder;
-  if (isBorderEnable) {
-    let borderColor = formatOptions.chartArea.chartAreaBorderColor;
-    let borderWidth = formatOptions.chartArea.chartAreaBorderThickness + "px";
-    let borderStyle = formatOptions.chartArea.chartAreaBorderStyle;
-    let border = borderStyle == "1" ? "solid" : borderStyle == "2" ? "dashed" : "dotted";
-    svg.style("outline", `${borderWidth} ${border} ${borderColor}`);
-    svg.style("outlineOffset", `-${borderWidth}`);
+  if (chartAreaBorder) {
+    const borderColor = formatOptions.chartArea.chartAreaBorderColor;
+    const borderWidth = formatOptions.chartArea.chartAreaBorderThickness;
+    const borderStyle = formatOptions.chartArea.chartAreaBorderStyle;
+    const border = borderStyle === "1" ? "solid" : borderStyle === "2" ? "dashed" : "dotted";
+    svg.style("outline", `${borderWidth}px ${border} ${borderColor}`).style("outline-offset", `-${borderWidth}px`);
+  } else {
+    svg.style("outline", "none").style("outline-offset", null);
   }
 }
 const firstFunctionBeforeRender$1 = (svgRef, chartformatOptions) => {
@@ -15123,13 +15123,7 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
       )
     );
     let markerGroups = lines.selectAll(".lineGroup").data(chartData, (d) => d.legend);
-    let markerGroupsEnter = markerGroups.enter().append("g").attr("class", "parentGroup").attr("hoverId", (d) => {
-      if (Array.isArray(d.legend) && d.legend.length > 0) {
-        return d.legend.includes("~$~") ? d.legend.split("~$~")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
-      } else {
-        return d.legend.replace(/ /g, "-");
-      }
-    });
+    let markerGroupsEnter = markerGroups.enter().append("g").attr("class", "parentGroup").attr("hoverId", (d) => (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-"));
     let mergedMarkerGroups = markerGroupsEnter.merge(markerGroups);
     mergedMarkerGroups.each(function(groupData) {
       const group = select$2(this);
@@ -15426,11 +15420,18 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
   try {
     const markerColor = prop?.markerColor ?? "blue";
     const markerShape = prop?.markerShape.toLowerCase() ?? "circle";
+    const isLightTheme = chartFormatOptions.toolTip.toolTipTheme === "Light";
+    const bgColor = isLightTheme ? "rgba(255, 255, 255)" : "#272729ff";
+    const textColor = isLightTheme ? "black" : "#ffffff";
+    const subTextColor = isLightTheme ? "gray" : "#d1d5db";
     selectAll(".chartTooltip").style("visibility", "hidden");
     const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
       "class",
-      chartFormatOptions.toolTip.toolTipTheme === "Light" ? "tooltipParentLight chartTooltip" : "tooltipParentDark chartTooltip"
-    ).style("color", "black").style("background", "rgba(255, 255, 255)").style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("position", "absolute").style("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease").style("position", "absolute");
+      isLightTheme ? "tooltipParentLight chartTooltip" : "tooltipParentDark chartTooltip"
+    ).style("color", textColor).style("background", bgColor).style("border", "0px solid #d4d4d4").style("border-radius", "4px").style("padding", "8px 12px").style("position", "absolute").style(
+      "box-shadow",
+      isLightTheme ? "0px 4px 10px #240808ff" : "0px 4px 12px rgba(0,0,0,0.6)"
+    ).style("transition", "transform 0.1s ease, opacity 0.2s ease");
     const e = event2 || window.event;
     const mouseX = e.pageX;
     const mouseY = e.pageY;
@@ -15467,17 +15468,16 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
                         ${shapeStyle}
                     "></span>
                     <span style="
-                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-                        font-size: 11px; 
-                        color: gray;
-                        text-align:left;
+                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
+                        font-size:11px;
+                        color:${subTextColor};
                         flex:1;
                     ">${c2.key || ""}</span>
                     <span style="
-                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-                        font-size: 11px; 
-                        color: black;
-                        font-weight: bold;
+                        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
+                        font-size:11px;
+                        color:${textColor};
+                        font-weight:bold;
                         margin-left:6px;
                     ">${c2.value || ""}</span>
                 </div>`;
@@ -15514,7 +15514,10 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
       top2 = mouseY - tooltipHeight + 10;
       arrow = "right-bottom";
     }
-    tooltip.style("left", `${left2}px`).style("top", `${top2}px`).style("visibility", chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden").style("transform", "scale(1)").style("opacity", "1");
+    tooltip.style("left", `${left2}px`).style("top", `${top2}px`).style(
+      "visibility",
+      chartFormatOptions.toolTip.toolTipVisibility ? "visible" : "hidden"
+    ).style("transform", "scale(1)").style("opacity", "1");
     tooltip.select(".arrow-placeholder").attr("class", `arrow-${arrow}`);
   } catch (error) {
     logError$2(fileName$b, "showTooltipOnMouseMove", error);
@@ -15581,19 +15584,17 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
       if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
         div.style("flex-direction", "row");
       seriesData.forEach((d, i) => {
-        let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("width", "fit-content").style("margin", "3px 0px").style("flex-wrap", "nowrap").style("white-space", "nowrap").on("mousemove", function(d2) {
+        let innerdiv = div.append("div").style("display", "inline-flex").style("justify-content", "flex-start").style("align-items", "center").style("width", "fit-content").style("margin", "3px 0px").style("flex-wrap", "nowrap").style("white-space", "nowrap").on("mousemove", function() {
           if (chartFormatOptions.legends.onHoverEffect) {
-            selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-            selectAll(
-              '[hoverId="' + ((this.textContent.match(/\(([^)]+)\)/) || [])[1] || this.textContent).replace(/ /g, "-") + '"]'
-            ).classed("highlight", true).classed("unhighlight", false);
+            const hoverId = this.textContent.replace(/\s+/g, "-");
+            svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
+            svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", true).classed("unhighlight", false);
           }
-        }).on("mouseout", function(d2) {
+        }).on("mouseout", function() {
           if (chartFormatOptions.legends.onHoverEffect) {
-            selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-            selectAll(
-              '[hoverId="' + ((this.textContent.match(/\(([^)]+)\)/) || [])[1] || this.textContent).replace(/ /g, "-") + '"]'
-            ).classed("highlight", false).classed("unhighlight", false);
+            const hoverId = this.textContent.replace(/\s+/g, "-");
+            svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
+            svg.selectAll(`[hoverId="${hoverId}"]`).classed("highlight", false).classed("unhighlight", false);
           }
         });
         if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
@@ -16117,7 +16118,7 @@ const connectorNumberFormat = (numerator, denominator, decimalValues, numberForm
 };
 const getHoverId = (inputText) => {
   try {
-    return inputText.includes("~$~") ? inputText.split("~$~")[1].replace(/ /g, "-") : inputText.replace(/ /g, "-");
+    return inputText.includes("~$~") ? inputText.split("~$~")[1].replace(/ /g, "-") : inputText.replace(/\s+/g, "-");
   } catch (error) {
     return inputText;
   }
@@ -16517,10 +16518,7 @@ const ColumnChart = ({
       let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
       column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
       let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
-        "hoverId",
-        (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
-      ).attr(
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
         "transform",
         (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
       );
@@ -16551,7 +16549,7 @@ const ColumnChart = ({
         return Math.abs(yScale(d.value) - yScale(0));
       });
       columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "visible");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
@@ -16586,7 +16584,7 @@ const ColumnChart = ({
           data2.properties
         );
       }).on("mouseout", (event2, d) => {
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "hidden");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
@@ -18005,10 +18003,7 @@ const LayeredColumnChart = ({
       let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
       column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
       let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
-        "hoverId",
-        (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
-      ).attr(
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
         "transform",
         (d) => index2 === 0 ? `translate(${xScale(d.dimension) - columnWidth / 2}, 0)` : `translate(${xScale(d.dimension) - columnWidth / (2 + index2 * 2)}, 0)`
       );
@@ -18066,13 +18061,14 @@ const LayeredColumnChart = ({
           event2,
           d.properties
         );
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
       }).on("mouseout", (e, d) => {
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
+        hideTooltipOnMouseOut();
       });
       columnGroups.exit().remove();
     });
@@ -19230,10 +19226,7 @@ const NormalizedStackColumnChart = ({
     let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
     columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
     let columnGroups = columns.selectAll(".column-group").data((d) => d);
-    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    );
+    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
     columnGroups = columnGroupsEnter.merge(columnGroups);
     let rects = columnGroups.selectAll("rect").data((d) => d);
     const getPropsForRect = (nodes, i) => {
@@ -19287,14 +19280,14 @@ const NormalizedStackColumnChart = ({
       );
       const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
       gTag.select(`#dim-background-${dim}`).attr("visibility", "visible");
-      const legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      const legend = (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
       hideTooltipOnMouseOut();
       const dim = Array.isArray(d.data.dimension) && d.data.dimension.length ? d.data.dimension[0] : d.data.dimension;
       gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-      const legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      const legend = (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
     });
@@ -20816,7 +20809,7 @@ const LineChart = ({
     lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
     let lineGroups = lines.selectAll(".line-group").data((d) => d);
     let lineGroupsEnter = lineGroups.enter().append("g").attr("class", "line-group");
-    lineGroupsEnter.attr("hoverId", (d) => d.legend.replace(/ /g, "-")).append("path").attr("class", "visibleLine").attr("fill", "none");
+    lineGroupsEnter.append("path").attr("class", "visibleLine").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d) {
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", (d2) => lineGenerator(d2.data)).attr(
@@ -20837,16 +20830,16 @@ const LineChart = ({
       ).attr(
         "stroke-width",
         (d2) => d2.properties.lineStyle !== "None" ? 2.5 : 0
-      ).attr("d", (d2) => lineGenerator(d2.data));
+      ).attr("hoverId", (d.properties.alias || lineGroups.properties.name || "Legend").replace(/\s+/g, "-")).attr("d", (d2) => lineGenerator(d2.data));
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => lineGenerator(d2.data)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
-          '[hoverId="' + getJQuerySelector(d2.legend.replace(/ /g, "-")) + '"]'
+          '[hoverId="' + getJQuerySelector(d2.properties.alias || d2.properties.name || "Legend").replace(/\s+/g, "-") + '"]'
         ).classed("highlight", true).classed("unhighlight", false);
       }).on("mouseleave", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         svg.selectAll(
-          '[hoverId="' + getJQuerySelector(d2.legend.replace(/ /g, "-")) + '"]'
+          '[hoverId="' + getJQuerySelector(d2.properties?.alias || d2.properties?.name || "Legend").replace(/\s+/g, "-") + '"]'
         ).classed("highlight", false).classed("unhighlight", false);
       });
     });
@@ -21325,13 +21318,10 @@ const StackLineChart = ({
     lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
     let lineGroups = lines.selectAll(".line-group").data((d) => d);
     const lineGroupsEnter = lineGroups.enter().append("g").attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
-    lineGroupsEnter.attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    ).append("path").attr("class", "line").attr("fill", "none");
+    lineGroupsEnter.append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d, i) {
       const g = select$2(this);
-      const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== "#ffffff" ? d.color : "none").attr(
+      const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("hoverId", (d2) => (seriesData[i]?.properties?.alias || seriesData[i]?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("d", lineGenerator(d)).attr("stroke", d.color !== "#ffffff" ? d.color : "none").attr(
         "stroke-dasharray",
         seriesData[i].properties.lineStyle === "dotted" ? "0,3" : seriesData[i].properties.lineStyle === "dashed" ? "20,10,5,5,5,10" : ""
       ).attr(
@@ -21348,9 +21338,7 @@ const StackLineChart = ({
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
-          `[hoverId="${getJQuerySelector(
-            d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-          )}"]`
+          '[hoverId="' + getJQuerySelector(seriesData[i].properties.alias || seriesData[i].properties.name || "Legend").replace(/\s+/g, "-") + '"]'
         ).classed("highlight", true).classed("unhighlight", false);
       }).on("mouseleave", function() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
@@ -21822,10 +21810,7 @@ const NormalisedStackLineChart = ({
     lines = lines.enter().append("g").attr("class", "lines parentGroup").merge(lines);
     let lineGroups = lines.selectAll(".line-group").data((d) => d);
     let lineGroupsEnter = lineGroups.enter().append("g").attr("class", (d) => "line-group " + d.key.replace(/ /g, "-"));
-    lineGroupsEnter.attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    ).append("path").attr("class", "line").attr("fill", "none");
+    lineGroupsEnter.attr("hoverId", (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")).append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d, i) {
       const g = select$2(this);
       const pathSel = g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine").attr("d", lineGenerator(d)).attr("stroke", d.color !== "#ffffff" ? d.color : "none").attr(
@@ -21842,20 +21827,12 @@ const NormalisedStackLineChart = ({
       {
         pathSel.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", 0);
       }
-      g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function() {
+      g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", lineGenerator(d)).attr("stroke", "transparent").attr("stroke-width", 20).attr("fill", "none").style("pointer-events", "stroke").on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        svg.selectAll(
-          `[hoverId="${getJQuerySelector(
-            d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-          )}"]`
-        ).classed("highlight", true).classed("unhighlight", false);
-      }).on("mouseleave", function() {
+        svg.selectAll('[hoverId="' + getJQuerySelector(lineData[d2.index]?.properties?.alias || lineData[d2.index]?.properties?.name || "Legend").replace(/\s+/g, "-") + '"]').classed("highlight", true).classed("unhighlight", false);
+      }).on("mouseleave", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-        svg.selectAll(
-          `[hoverId="${getJQuerySelector(
-            d.key.split("~$~")[1].replace(/ /g, "-")
-          )}"]`
-        ).classed("highlight", false).classed("unhighlight", false);
+        svg.selectAll('[hoverId="' + getJQuerySelector(lineData[d2.index]?.properties?.alias || d2[d2.index]?.properties?.name || "Legend").replace(/\s+/g, "-") + '"]').classed("highlight", false).classed("unhighlight", false);
       });
     });
     lineGroups.exit().remove();
@@ -22363,10 +22340,7 @@ const HorizontalBarChart = ({
       let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
       column = column.enter().append("g").attr("class", "column parentGroup").merge(column);
       let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
-        "hoverId",
-        (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
-      ).attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
       columnGroups.attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
       columnGroupsEnter.merge(columnGroups).attr("transform", (d) => `translate(0, ${yScale(d.dimension) - columnWidth / 2})`);
       const bars = columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legend)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
@@ -22393,7 +22367,7 @@ const HorizontalBarChart = ({
         }
       });
       columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
-        const legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "visible");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
@@ -22424,7 +22398,7 @@ const HorizontalBarChart = ({
           data2.properties
         );
       }).on("mouseout", (event2, d) => {
-        const legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         gTag.select(`#dim-background-${d.dimension}`).attr("visibility", "hidden");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
@@ -22826,10 +22800,7 @@ const StackHorizontalChart = ({
     let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
     columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
     let columnGroups = columns.selectAll(".column-group").data((d) => d);
-    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    );
+    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
     columnGroups = columnGroupsEnter.merge(columnGroups);
     let rects = columnGroups.selectAll("rect").data((d) => d);
     const getPropsForRect = (nodes, i) => {
@@ -22875,13 +22846,13 @@ const StackHorizontalChart = ({
         event2,
         d.properties
       );
-      let legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
       const dim = d.data.dimension;
       gTag.select(`#dim-background-${dim}`).attr("visibility", "hidden");
-      let legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       hideTooltipOnMouseOut();
@@ -23503,10 +23474,7 @@ const NormalizedStackHorizontalBarChart = ({
     let columns = gTag.selectAll(".parentGroup").data([stackChartData]);
     columns = columns.enter().append("g").attr("class", "columns parentGroup").merge(columns);
     let columnGroups = columns.selectAll(".column-group").data((d) => d);
-    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    );
+    let columnGroupsEnter = columnGroups.enter().append("g").attr("class", (d) => "column-group " + d.key.replace(/ /g, "-")).attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-"));
     columnGroups = columnGroupsEnter.merge(columnGroups);
     let rects = columnGroups.selectAll("rect").data((d) => d);
     const getPropsForRect = (nodes, i) => {
@@ -23549,11 +23517,11 @@ const NormalizedStackHorizontalBarChart = ({
         event2,
         d.properties
       );
-      const legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
     }).on("mouseout", (event2, d) => {
-      const legend = d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-");
+      let legend = (d.properties.alias || d.properties.name || "Legend").replace(/ /g, "-");
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       gTag.select(`#dim-background-${d.data.dimension}`).attr("visibility", "hidden");
@@ -23975,10 +23943,7 @@ const LayeredHorizontalBarChart = ({
       let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.legend);
       column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
       let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.legend + d.dimension);
-      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
-        "hoverId",
-        (d) => d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-")
-      ).attr(
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr("hoverId", (data2.properties.alias || data2.properties.name || "Legend").replace(/\s+/g, "-")).attr(
         "transform",
         (d) => index2 === 0 ? `translate(0,${yScale(d.dimension) - columnWidth / 2})` : `translate(0,${yScale(d.dimension) - columnWidth / (2 + index2 * 2)})`
       );
@@ -24035,11 +24000,11 @@ const LayeredHorizontalBarChart = ({
           event2,
           data2.properties
         );
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
       }).on("mouseout", (e, d) => {
-        let legend = d.legend.includes("-") ? d.legend.replace("-", "`").split("`")[1].replace(/ /g, "-") : d.legend.replace(/ /g, "-");
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
         hideTooltipOnMouseOut();
@@ -25165,10 +25130,10 @@ const AreaChart = ({
     areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
     let areaGroups = areas.selectAll(".area-group").data((d) => d);
     let areaGroupsEnter = areaGroups.enter().append("g").attr("class", "area-group");
-    areaGroupsEnter.append("path").attr("hoverId", (d) => d.legend.replace(/ /g, "-")).attr("class", "area parentGroup").attr(
+    areaGroupsEnter.append("path").attr("class", "area parentGroup").attr(
       "fill",
       (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none"
-    ).style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
+    ).style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("hoverId", (d) => (d.properties?.alias || d.properties?.name || "Legend").replace(/\s+/g, "-")).attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
       {
         select$2(this).attr("d", areaGenerator(d.data));
       }
@@ -25197,7 +25162,7 @@ const AreaChart = ({
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2.data)).attr("fill", "transparent").attr("stroke", "none").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true).attr("stroke-width", "2.5");
         svg.selectAll(
-          `[hoverId="${getJQuerySelector(d2.legend.replace(/ /g, "-"))}"]`
+          '[hoverId="' + getJQuerySelector(d2.properties?.alias || d2.properties?.name || "Legend").replace(/\s+/g, "-") + '"]'
         ).classed("highlight", true).classed("unhighlight", false).attr("stroke-width", "3.5");
       }).on("mouseleave", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false).attr("stroke-width", "2.5");
@@ -25704,10 +25669,7 @@ const StackAreaChart = ({
     areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
     let areaGroups = areas.selectAll(".area-group").data((d) => d);
     let areaGroupsEnter = areaGroups.enter().append("g").attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
-    areaGroupsEnter.append("path").attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
+    areaGroupsEnter.append("path").attr("hoverId", (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
       {
         select$2(this).attr("d", areaGenerator(d));
       }
@@ -25734,13 +25696,13 @@ const StackAreaChart = ({
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => areaGenerator(d2)).attr("fill", "transparent").attr("stroke", "none").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
-          '[hoverId="' + getJQuerySelector(d2.key.split("~$~")[1].replace(/ /g, "-")) + '"]'
+          '[hoverId="' + (seriesData[d2.index]?.properties?.alias || seriesData[d2.index]?.properties?.name || "Legend").replace(/ /g, "-") + '"]'
         ).classed("highlight", true).classed("unhighlight", false);
       }).on("mouseleave", function() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       });
       svg.selectAll(
-        '[hoverId="' + getJQuerySelector(d.key.split("~$~")[1].replace(/ /g, "-")) + '"]'
+        '[hoverId="' + (seriesData[d.index].properties.alias || seriesData[d.index].properties.name || "Legend").replace(/ /g, "-") + '"]'
       ).classed("highlight", false).classed("unhighlight", false);
     });
     areaGroups.exit().remove();
@@ -26239,10 +26201,7 @@ const NormalizedStackAreaChart = ({
     areas = areas.enter().append("g").attr("class", "areas lineGroup").merge(areas);
     let areaGroups = areas.selectAll(".area-group").data((d) => d);
     let areaGroupsEnter = areaGroups.enter().append("g").attr("class", (d) => "area-group " + d.key.replace(/ /g, "-"));
-    areaGroupsEnter.append("path").attr(
-      "hoverId",
-      (d) => d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
-    ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
+    areaGroupsEnter.append("path").attr("hoverId", (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("class", "area parentGroup").attr("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
       const path2 = select$2(this);
       {
         path2.attr("d", columnGenerator(d));
@@ -26270,13 +26229,13 @@ const NormalizedStackAreaChart = ({
       g.selectAll("path.hoverLine").data([d]).join("path").attr("class", "hoverLine").attr("d", (d2) => columnGenerator(d2)).attr("fill", "transparent").style("pointer-events", "all").raise().on("mouseenter", function(event2, d2) {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
-          '[hoverId="' + getJQuerySelector(d2.key.split("~$~")[1].replace(/ /g, "-")) + '"]'
+          '[hoverId="' + getJQuerySelector((lineData[d2.index]?.properties?.alias || lineData[d2.index]?.properties?.name || "Legend").replace(/ /g, "-")) + '"]'
         ).classed("highlight", true).classed("unhighlight", false);
       }).on("mouseleave", function() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       });
       svg.selectAll(
-        '[hoverId="' + getJQuerySelector(d.key.split("~$~")[1].replace(/ /g, "-")) + '"]'
+        '[hoverId="' + getJQuerySelector((lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/ /g, "-")) + '"]'
       ).classed("highlight", false).classed("unhighlight", false);
     });
     areaGroups.exit().remove();
@@ -26653,7 +26612,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
     try {
       const arc2 = arc$1().innerRadius(0).outerRadius(radius);
       const arcOver = arc$1().innerRadius(0).outerRadius(radius + 10);
-      chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
+      chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`).selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr(
         "fill",
         (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
       ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
@@ -26726,7 +26685,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           pieChartData.filter(
             (d) => d.data.properties.dataLabelPosition == "1"
           )
-        ).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 ?? "#000000").attr(
+        ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
           "font-style",
           (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).attr(
@@ -26751,7 +26710,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           pieChartData.filter(
             (d) => d.data.properties.dataLabelPosition == "1"
           )
-        ).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 ?? "#000000").attr(
+        ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.valueFontColor ?? "#000000").attr(
           "font-style",
           (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).attr(
@@ -26832,7 +26791,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
           const textWidth = 80;
           const xOffset = midangle < Math.PI ? 0 : -textWidth;
           return radius * 1.1 * (midangle < Math.PI ? 1 : -1) + xOffset;
-        }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
+        }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => (d.data.properties.alias || d.data.properties.name || "Legend").replace(/\s+/g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px").html((d) => {
           let value2 = d.data.data[0].value.toString();
           if (d.data.data[0].value !== void 0) {
             value2 = chartFormatOptions.plotArea.dataLabelNumberFormat === ",.0%" ? (Math.abs(d.data[0].value / pieTotalValue) * 100).toFixed(
@@ -26993,7 +26952,7 @@ const DonutChart = ({
       let rotationAngle = convertStringToNumber(
         chartFormatOptions.plotArea.rotation
       );
-      const pie$1 = pie().value((d) => d.data[0].value).startAngle((rotationAngle ?? 0) * (Math.PI / 180) % 360).endAngle(((rotationAngle ?? 0) + 360) * (Math.PI / 180) % 360);
+      const pie$1 = pie().sort(null).value((d) => d.data[0].value).startAngle((rotationAngle ?? 0) * (Math.PI / 180) % 360).endAngle(((rotationAngle ?? 0) + 360) * (Math.PI / 180) % 360);
       let pieData = pie$1(seriesData);
       pieChartData = pieData?.map((d, i) => ({
         ...d,
@@ -27014,7 +26973,7 @@ const DonutChart = ({
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
       const arcOver = arc$1().innerRadius(innerRadius).outerRadius(radius + 10);
       const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
-      const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).attr(
+      const paths = parentGroup.selectAll("path").data(pieChartData).enter().append("path").attr("class", (d) => "path " + d.data.legend).attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr(
         "fill",
         (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
       ).each(function(d) {
@@ -27098,7 +27057,7 @@ const DonutChart = ({
           pieChartData.filter(
             (d) => d.data.properties.dataLabelPosition == "1"
           )
-        ).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 ?? "#000000").attr(
+        ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.labelFontSize ?? 11).attr("fill", (d) => d.data.properties?.labelFontColor ?? "#000000").attr(
           "font-style",
           (d) => d.data.properties?.labelFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).attr(
@@ -27123,7 +27082,7 @@ const DonutChart = ({
           pieChartData.filter(
             (d) => d.data.properties.dataLabelPosition == "1"
           )
-        ).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?.lableFontColor ?? "#000000").attr(
+        ).enter().append("text").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).attr("font-size", (d) => d.data.properties?.valueFontSize ?? 11).attr("fill", (d) => d.data.properties?.lableFontColor ?? "#000000").attr(
           "font-style",
           (d) => d.data.properties?.valueFontStyle?.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""
         ).attr(
@@ -27204,7 +27163,7 @@ const DonutChart = ({
           const textWidth = 80;
           const xOffset = midangle < Math.PI ? 0 : -textWidth;
           return radius * 1.1 * (midangle < Math.PI ? 1 : -1) + xOffset;
-        }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => d.data.legend.replace(/ /g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px");
+        }).attr("y", (d) => outerRadius.centroid(d)[1] - 30).append("xhtml:div").attr("hoverId", (d) => (d.data?.properties?.alias || d.data?.properties?.name || "Legend").replace(/\s+/g, "-")).style("display", "flex").style("flex-direction", "column").style("justify-content", "center").style("align-items", "center").style("height", "60px");
       }
     } catch (error) {
       logError$2(fileName$7, "drawDonutDataLabels", error);
@@ -27378,6 +27337,23 @@ const Treemap = ({ data, formatOptions, chartId }) => {
       logError$2(fileName$6, "getColor", error);
     }
   };
+  const getMarkerColorForTooltip = (d) => {
+    try {
+      const props = d?.currentTarget?.__data__?.data?.properties;
+      if (!props) return;
+      switch (chartFormatOptions.colorScale.showColor) {
+        case colorThemeTypes.none:
+          return { ...props, markerColor: defaultColor };
+        case colorThemeTypes.colorTheme:
+          return { ...props, markerColor: props.themeColor };
+        case colorThemeTypes.discrete:
+        default:
+          return props;
+      }
+    } catch (error) {
+      logError$2(fileName$6, "getMarkerColorForTooltip", error);
+    }
+  };
   const initChartRect = () => {
     try {
       const leaf = chartAreaTagG.selectAll("g").data(chartData).enter().append("g").attr("transform", (d) => `translate(${d.x0},${d.y0})`);
@@ -27392,19 +27368,11 @@ const Treemap = ({ data, formatOptions, chartId }) => {
                 chartFormatOptions.toolTip.toolTipDecimalPrecision
               )(data2.data.data[0].value)
             },
-            { key: "Legend", value: data2.data.data[0].legend },
-            data2.data.data[1] ? {
-              key: data2.data.data[1].legend,
-              value: getNumberWithFormatFunction(
-                chartFormatOptions.toolTip.toolTipDisplayUnits,
-                chartFormatOptions.toolTip.toolTipNumberFormat,
-                chartFormatOptions.toolTip.toolTipDecimalPrecision
-              )(data2.data.data[1].value)
-            } : ""
+            { key: "Legend", value: data2.data.data[0].legend }
           ],
           chartFormatOptions,
           void 0,
-          d.currentTarget.__data__.data.properties
+          getMarkerColorForTooltip(d)
         );
       }).on("mouseout", () => hideTooltipOnMouseOut());
       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);