pace-chart-lib 1.0.16 → 1.0.18

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

@@ -11882,14 +11882,14 @@
     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) => {
@@ -15126,13 +15126,7 @@
         )
       );
       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);
@@ -15429,11 +15423,18 @@
     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;
@@ -15470,17 +15471,16 @@
                         ${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>`;
@@ -15517,7 +15517,10 @@
         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);
@@ -15584,19 +15587,17 @@
         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) {
@@ -16120,7 +16121,7 @@
   };
   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;
     }
@@ -16520,10 +16521,7 @@
         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)`
         );
@@ -16554,7 +16552,7 @@
           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);
@@ -16589,7 +16587,7 @@
             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);
@@ -18008,10 +18006,7 @@
         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)`
         );
@@ -18069,13 +18064,14 @@
             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();
       });
@@ -19233,10 +19229,7 @@
       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) => {
@@ -19290,14 +19283,14 @@
         );
         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);
       });
@@ -20819,7 +20812,7 @@
       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(
@@ -20840,16 +20833,16 @@
         ).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);
         });
       });
@@ -21328,13 +21321,10 @@
       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(
@@ -21351,9 +21341,7 @@
         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);
@@ -21825,10 +21813,7 @@
       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(
@@ -21845,20 +21830,12 @@
         {
           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();
@@ -22366,10 +22343,7 @@
         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) => {
@@ -22396,7 +22370,7 @@
           }
         });
         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);
@@ -22427,7 +22401,7 @@
             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);
@@ -22829,10 +22803,7 @@
       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) => {
@@ -22878,13 +22849,13 @@
           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();
@@ -23506,10 +23477,7 @@
       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) => {
@@ -23552,11 +23520,11 @@
           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");
@@ -23978,10 +23946,7 @@
         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)})`
         );
@@ -24038,11 +24003,11 @@
             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();
@@ -25168,10 +25133,10 @@
       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));
         }
@@ -25200,7 +25165,7 @@
         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");
@@ -25707,10 +25672,7 @@
       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));
         }
@@ -25737,13 +25699,13 @@
         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();
@@ -26242,10 +26204,7 @@
       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));
@@ -26273,13 +26232,13 @@
         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();
@@ -26656,7 +26615,7 @@
       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) {
@@ -26729,7 +26688,7 @@
             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(
@@ -26754,7 +26713,7 @@
             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(
@@ -26835,7 +26794,7 @@
             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(
@@ -26996,7 +26955,7 @@
         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,
@@ -27017,7 +26976,7 @@
         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) {
@@ -27101,7 +27060,7 @@
             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(
@@ -27126,7 +27085,7 @@
             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(
@@ -27207,7 +27166,7 @@
             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);
@@ -27381,6 +27340,23 @@
         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})`);
@@ -27395,19 +27371,11 @@
                   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);