pace-chart-lib 1.0.10 → 1.0.13

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

@@ -11605,7 +11605,7 @@
       "Helvetica"
     )[1] : 0;
     yTitle = yTitle > width * 0.1 ? width * 0.1 : yTitle;
-    let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility ? responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions, false, isNormalizedChart) : getYAxisLabel(formatOptions, max$2(legendList, (d) => d?.length || 0) || 0);
+    let yLabel = formatOptions.yAxisLabel.yAxisLabelVisibility ? responsiveYaxisMargin(maxNumberForPrimaryAxis, yMaxLeft, formatOptions, false, isNormalizedChart) + 10 : getYAxisLabel(formatOptions, max$2(legendList, (d) => d?.length || 0) || 0) + 10;
     yLabel += 8;
     let secondaryYLabel = formatOptions.secondaryYAxisLabel.secondaryYAxisLabelVisibility ? responsiveYaxisMargin(
       maxNumberForSecondaryAxis,
@@ -15404,10 +15404,10 @@
       logError$2(fileName$b, "getNumberWithFormatFunction", error);
     }
   }
-  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, markerProp) {
+  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
     try {
-      const markerColor = markerProp?.markerColor ?? "blue";
-      const markerShape = markerProp?.markerShape.toLowerCase() ?? "circle";
+      const markerColor = prop?.markerColor ?? "blue";
+      const markerShape = prop?.markerShape.toLowerCase() ?? "circle";
       selectAll(".chartTooltip").style("visibility", "hidden");
       const tooltip = select$2("#chartTooltipDiv").html("").append("div").attr(
         "class",
@@ -15517,11 +15517,11 @@
         chartFormatOptions.chartTitle.chartTitleVisibility ? "visible" : "hidden"
       ).attr("transform", `translate(2,2)`).attr("class", "chartTitle").attr("width", chartTitleWidth).attr("height", chartTitleHeight + "px");
       if (chartFormatOptions.chartTitle.dynamicTitleText.length !== 0) {
-        object2.append("xhtml:div").style("color", "rgba(119,119,119)").attr("title", chartFormatOptions.chartTitle.chartTitleText).style("white-space", "pre").style("text-overflow", "ellipsis").html(
+        object2.append("xhtml:div").style("color", "rgba(119,119,119)").attr("title", chartFormatOptions.chartTitle.chartTitleText).style("white-space", "pre").style("text-overflow", "ellipsis").style("overflow", "visible").style("line-height", "1.3em").html(
           chartFormatOptions.chartTitle.chartTitleHTML ? chartFormatOptions.chartTitle.chartTitleHTML : chartFormatOptions.chartTitle.chartTitleText
         );
       } else {
-        object2.append("xhtml:div").style("white-space", "pre").style("user-select", "none").style("text-overflow", "ellipsis").style("overflow", "hidden").attr("class", "chartTiltle").attr("id", "chartTitleId").style("text-anchor", "start").style("color", "rgba(119,119,119)").style("font-size", "16px").style(
+        object2.append("xhtml:div").style("white-space", "pre").style("user-select", "none").style("text-overflow", "ellipsis").style("overflow", "visible").style("line-height", "1.3em").attr("class", "chartTiltle").attr("id", "chartTitleId").style("text-anchor", "start").style("color", "rgba(119,119,119)").style("font-size", "16px").style(
           "font-family",
           chartFormatOptions.chartTitle.chartTitleFontFamily
         ).attr("title", chartFormatOptions.chartTitle.chartTitleText).html(chartFormatOptions.chartTitle.chartTitleText);
@@ -15567,14 +15567,14 @@
             if (chartFormatOptions.legends.onHoverEffect) {
               selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
               selectAll(
-                '[hoverId="' + this.textContent.replace(/ /g, "-") + '"]'
+                '[hoverId="' + ((this.textContent.match(/\(([^)]+)\)/) || [])[1] || this.textContent).replace(/ /g, "-") + '"]'
               ).classed("highlight", true).classed("unhighlight", false);
             }
           }).on("mouseout", function(d2) {
             if (chartFormatOptions.legends.onHoverEffect) {
               selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
               selectAll(
-                '[hoverId="' + this.textContent.replace(/ /g, "-") + '"]'
+                '[hoverId="' + ((this.textContent.match(/\(([^)]+)\)/) || [])[1] || this.textContent).replace(/ /g, "-") + '"]'
               ).classed("highlight", false).classed("unhighlight", false);
             }
           });
@@ -15595,7 +15595,7 @@
           {
             if ((legendShape || customLegendShape) == staticLegendShape.circle) {
               getCircleShape(d, innerdiv);
-            } else if ((legendShape || customLegendShape) == staticLegendShape.circle) {
+            } else if ((legendShape || customLegendShape) == staticLegendShape.hollowCircle) {
               getHollowCircleShape(d, innerdiv);
             } else if ((legendShape || customLegendShape) == staticLegendShape.line) {
               getLineShape(d, innerdiv, chartFormatOptions);
@@ -15641,7 +15641,7 @@
   }
   function getHollowCircleShape(d, innerDiv) {
     try {
-      innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color}`);
+      innerDiv.append("div").style("height", "12px").style("width", "12px").style("border-radius", "50%").style("border", `3px solid ${d.properties.Color ?? d.properties.color}`);
     } catch (error) {
       logError$2(fileName$b, "getHollowCircleShape", error);
     }
@@ -15827,7 +15827,7 @@
       logError$2(fileName$b, "marginCalculationsForChartsWithoutAxis", error);
     }
   };
-  const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, shouldAllowTotalValueMargin = true) => {
+  const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesData, width, height, legendListWidth, chartTitleHeight, chartId, margins, staticLegendShape2, shouldAllowTotalValueMargin = true) => {
     try {
       let position = chartFormatOptions.legends.legendPosition;
       let totalPosition = chartFormatOptions.total.totalPosition;
@@ -15848,7 +15848,7 @@
             height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.end ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
             position,
             verticalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15863,7 +15863,7 @@
             30,
             position,
             horizontalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15878,7 +15878,7 @@
             height - chartTitleHeight - 10 - (shouldTotalValueAdjustment ? totalPosition == staticTotalPosition.top && totalAlignment == staticTotalAlignment.start ? 10 : totalPosition == staticTotalPosition.bottom && totalAlignment == staticTotalAlignment.start ? 20 : 0 : 0),
             position,
             verticalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -15893,7 +15893,7 @@
             30,
             position,
             horizontalLegendAlignment,
-            staticLegendShape.circle,
+            staticLegendShape2,
             chartFormatOptions,
             chartId
           );
@@ -19908,7 +19908,7 @@
   function logError$1(fileName2, functionName, error) {
     console.error(`[${fileName2}] [${functionName}]`, error);
   }
-  const ColumnHistogramChart$1 = ({
+  const ColumnHistogramChart = ({
     isDateType,
     formatOptions,
     data
@@ -24320,7 +24320,7 @@
       }
     ) });
   };
-  const ColumnHistogramChart = ({
+  const HorizontalHistogramChart = ({
     isDateType,
     formatOptions,
     data
@@ -24393,12 +24393,12 @@
     };
     require$$0$1.useEffect(() => {
       try {
-        createColumnChart();
+        createHorizontalChart();
       } catch (error) {
-        logError$2("Columnchart", "createColumnChart", error);
+        logError$2("HorizontalHistogramChart", "createHorizontalChart", error);
       }
     }, [formatOptions]);
-    const createColumnChart = () => {
+    const createHorizontalChart = () => {
       ({ formatOptions, svg, width, height } = firstFunctionBeforeRender$1(
         svgRef,
         formatOptions
@@ -24447,25 +24447,28 @@
         seriesData,
         chartJSON.dimensionList
       ));
-      initSvg$1(
-        // for svg creation
-        svg,
-        width,
-        height,
-        formatOptions
-      );
+      initSvg$1(svg, width, height, formatOptions);
       gTag = initChartArea$1(svg, margin);
-      initPlotArea(
+      initPlotArea(gTag, formatOptions, dataTableHeight, innerWidth2, innerHeight2, chartType);
+      binsCalculation();
+      initScale();
+      initAxis();
+      initXaxis$1(
         gTag,
+        chartJSON,
+        xLabel,
         formatOptions,
         dataTableHeight,
+        yScaleLeft,
+        xAxis,
+        dimensionHeightWidthArray,
+        height,
+        columnWidth,
+        isDateType,
         innerWidth2,
         innerHeight2,
-        chartType
+        filteredDimension
       );
-      binsCalculation();
-      initScale();
-      initAxis();
       initYaxis$1(
         gTag,
         formatOptions,
@@ -24582,7 +24585,7 @@
     const binsCalculation = () => {
       switch (formatOptions.bins.binsCalculation) {
         case "Automatic":
-          thresholds = innerWidth2 / 50;
+          thresholds = innerHeight2 / 50;
           break;
         case "Number of Bins":
           calculatingPeriodsWithBins(false);
@@ -24592,11 +24595,7 @@
       }
     };
     const calculatingPeriodsWithBins = (isWithWidth) => {
-      filteredData.forEach(
-        (d) => d.data.sort(function(a2, b) {
-          return a2.value - b.value;
-        })
-      );
+      filteredData.forEach((d) => d.data.sort((a2, b) => a2.value - b.value));
       let range2 = chartJSON.xMax - chartJSON.xMin;
       let tempPeriod;
       if (isWithWidth) {
@@ -24622,9 +24621,9 @@
       }
     };
     const initScale = () => {
-      xScale = linear$1().domain([chartJSON.xMin, chartJSON.xMax]).range([0, innerWidth2]);
-      const numberOfBins = periods.length > 0 ? periods : xScale.ticks(thresholds);
-      let histogram = bin().value((d) => d).domain(xScale.domain()).thresholds(numberOfBins);
+      yScaleLeft = linear$1().domain([chartJSON.xMin, chartJSON.xMax]).range([innerHeight2, 0]);
+      const numberOfBins = periods.length > 0 ? periods : yScaleLeft.ticks(thresholds);
+      let histogram = bin().value((d) => d).domain(yScaleLeft.domain()).thresholds(numberOfBins);
       filteredData.forEach((d) => {
         let tempArray = histogram(d.data.map((val) => val.value));
         bins.push(tempArray);
@@ -24640,23 +24639,26 @@
       bins.forEach((d) => d.forEach((j) => cumulativeLength.push(j.length)));
       chartJSON.yMaxLeft = max$2(cumulativeLength);
       chartJSON.yMinLeft = min$2(cumulativeLength);
-      yScaleLeft = linear$1().range([innerHeight2, 0]).domain([customYaxisMinValue || customYaxisMinValue == 0 ? customYaxisMinValue : 0, customYaxisMaxValue || customYaxisMaxValue == 0 ? customYaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft]);
+      xScale = linear$1().domain([
+        customXaxisMinValue || customXaxisMinValue == 0 ? customXaxisMinValue : 0,
+        customXaxisMaxValue || customXaxisMaxValue == 0 ? customXaxisMaxValue : chartJSON.yMaxLeft + 0.2 * chartJSON.yMaxLeft
+      ]).range([0, innerWidth2]);
     };
     const initAxis = () => {
-      getXAxis();
+      getYAxis();
       {
-        let responsiveLablesObj = responsiveYaxisLabel$1(
+        let responsiveLabelsObj = responsiveYaxisLabel$1(
           chartJSON.yMaxLeft,
           chartJSON.yMinLeft,
-          innerHeight2,
+          innerWidth2,
           formatOptions,
           chartJSON,
           customYaxisMinValue,
           customYaxisMaxValue,
           false,
-          innerWidth2
+          innerHeight2
         );
-        yAxisLeft = axisLeft(yScaleLeft).tickFormat(
+        xAxis = axisBottom(xScale).tickFormat(
           (d) => getNumberWithFormat(
             d,
             formatOptions.yAxisLabel.yAxisDisplayUnits,
@@ -24664,15 +24666,14 @@
             formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
           )
         ).tickSize(
-          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
-        ).tickValues(responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+          formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 + 0 : 0 : 0
+        ).tickValues(responsiveLabelsObj.autoLabelFlag ? void 0 : responsiveLabelsObj.yAxisLabelArray).ticks(responsiveLabelsObj.customTickValue).tickPadding(8).tickSizeOuter(0);
       }
     };
-    const getXAxis = () => {
-      let xaxisLabelPosition = parseInt(formatOptions.xAxisLabel.xAxisPosition);
-      let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerWidth2, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerHeight2, false).xAxisLabelArray;
+    const getYAxis = () => {
+      let labelArray = responsiveXaxisLabelForNumericValue(chartJSON.xMax, chartJSON.xMin, innerHeight2, formatOptions, customXaxisMinValue, customXaxisMaxValue, innerWidth2, false).xAxisLabelArray;
       labelArray.shift();
-      xAxis = (xaxisLabelPosition == 1 ? axisTop(xScale) : axisBottom(xScale)).tickFormat(
+      yAxisLeft = axisLeft(yScaleLeft).tickFormat(
         (d) => getNumberWithFormat(
           d,
           formatOptions.xAxisLabel.xAxisDisplayUnits,
@@ -24681,32 +24682,29 @@
           false
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : parseFloat(formatOptions.plotArea.ticksHeight) * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) : 0 : 0
+        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerWidth2 : 0 : 0
       ).tickSizeOuter(0);
-      formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
+      formatOptions.bins.binsCalculation === "Automatic" ? yAxisLeft.ticks(thresholds) : yAxisLeft.tickValues(periods).ticks(innerHeight2 / 50);
     };
     const getChartType = (lineData) => {
-      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor).attr(
-        "stroke-width",
-        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness
-      ).attr(
-        "stroke-opacity",
-        formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity
-      ).attr("x", 1).attr("transform", function(d) {
-        return "translate(" + xScale(d.x0) + "," + (yScaleLeft(d.length) > 0 ? yScaleLeft(d.length) : 0) + ")";
-      }).attr("width", function(d) {
-        return xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth) < 0 ? 0 : xScale(d.x1) - xScale(d.x0) - parseFloat(formatOptions.bins.binsGapWidth);
-      }).attr("height", function(d) {
-        return innerHeight2 - yScaleLeft(d.length);
-      }).style("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
+      gTag.append("g").attr("class", "parentGroup").selectAll("#scaling-svg" + chartId + " .rect").data(bins).enter().append("g").selectAll("rect").data((d) => d).enter().append("rect").attr("class", "rect").attr("stroke", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderColor).attr("stroke-width", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderThickness).attr("stroke-opacity", formatOptions.bins.binsBorderVisibility && formatOptions.bins.binsBorderOpacity).attr("x", 0).attr("y", (d) => {
+        const y02 = yScaleLeft(d.x0);
+        const y12 = yScaleLeft(d.x1);
+        return Math.min(y02, y12);
+      }).attr("height", (d) => {
+        const y02 = yScaleLeft(d.x0);
+        const y12 = yScaleLeft(d.x1);
+        const gap = parseFloat(formatOptions.bins.binsGapWidth) || 0;
+        return Math.max(1, Math.abs(y12 - y02) - gap);
+      }).attr("width", (d) => xScale(d.length)).style("fill", (d) => d.color !== "#ffffff" ? d.color : "none").style("opacity", formatOptions.bins.binsFillOpacity).style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
-              key: formatOptions.xAxisTitle.xAxisTitleText.includes("~$~") ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1] : formatOptions.xAxisTitle.xAxisTitleText,
+              key: formatOptions.yAxisTitle.yAxisTitleText,
               value: `${d["x0"]}-${d["x1"]}`
             },
             {
-              key: formatOptions.yAxisTitle.yAxisTitleText,
+              key: formatOptions.xAxisTitle.xAxisTitleText,
               value: getNumberWithFormat(formatOptions.toolTip.toolTipNumberFormat == ",.0%" ? Math.abs(d.length / filteredData[0].data.length) : d.length, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, false)
             }
           ],
@@ -24756,7 +24754,7 @@
                 (d) => filteredDimension.includes(d.dimension)
               )
             );
-            getXAxis();
+            getYAxis();
             drawColumnChart();
           })
         );
@@ -24773,35 +24771,20 @@
               (d) => filteredDimension.includes(d.dimension)
             )
           );
-          getXAxis();
+          getYAxis();
           drawColumnChart();
         });
       }
       drawColumnChart();
     };
     const drawColumnChart = () => {
-      initXaxis$1(
-        gTag,
-        chartJSON,
-        xLabel,
-        formatOptions,
-        dataTableHeight,
-        yScaleLeft,
-        xAxis,
-        dimensionHeightWidthArray,
-        height,
-        columnWidth,
-        isDateType,
-        innerWidth2,
-        innerHeight2,
-        filteredDimension
-      );
+      initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight2);
       getChartType();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "svg",
       {
-        className: "chartSVG",
+        className: "className",
         ref: svgRef,
         id: chartId,
         style: { width: "100%", height: "100%" }
@@ -26592,7 +26575,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
       initPieChartData();
       drawPieChart();
@@ -26673,7 +26657,9 @@
               },
               { key: "Legend", value: d.currentTarget.__data__.data.legend }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }).on("mouseout.text", () => {
           hideTooltipOnMouseOut();
@@ -26951,6 +26937,7 @@
         chartTitleHeight,
         chartId,
         margins,
+        staticLegendShape.hollowCircle,
         false
       );
       initPieChartData();
@@ -26971,7 +26958,7 @@
     };
     const defineChartRadius = () => {
       try {
-        radius = Math.min(innerHeight2 * 0.5, innerWidth2 * 0.5);
+        radius = Math.min(innerHeight2 * 0.4, innerWidth2 * 0.4);
         outsideDataLabelFlag ? radius = radius * 0.9 : null;
         innerRadius = Math.min(
           convertStringToNumber(chartFormatOptions.plotArea.innerRadius) / 100 * radius,
@@ -27037,7 +27024,9 @@
               },
               { key: "Legend", value: d.currentTarget.__data__.data.legend }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
           if (enableTransition) ;
@@ -27114,7 +27103,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.legend.replace(/ /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(
@@ -27195,69 +27184,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) => {
-            try {
-              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.data[0].value / pieTotalValue) * 100).toFixed(
-                  convertStringToNumber(
-                    chartFormatOptions.plotArea.dataLabelDecimalPrecision
-                  )
-                ) + "%" : getNumberWithFormatFunction(
-                  chartFormatOptions.plotArea.plotAreaDisplayUnits,
-                  chartFormatOptions.plotArea.dataLabelNumberFormat,
-                  chartFormatOptions.plotArea.dataLabelDecimalPrecision
-                )(d.data.data[0].value);
-              }
-              let htmlString = "";
-              if (chartFormatOptions.plotArea.dataLabelName) {
-                htmlString += `<span style="
-          font-size: ${d.data.properties.labelFontSize}px;
-          color: ${d.data.properties.labelFontColor};
-          font-style: ${d.data.properties.labelFontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""};
-          text-decoration: ${d.data.properties.labelFontStyle.includes(
-                  fontStyleOptions.underline
-                ) ? fontStyleOptions.underline : ""};
-          font-weight: ${d.data.properties.labelFontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : ""};
-          font-family: ${d.data.properties.labelFont};
-          display: block; white-space: nowrap; width:80px; overflow:hidden; text-overflow:ellipsis; text-align: center;">
-          ${d.data.legend}
-        </span>`;
-              }
-              if (chartFormatOptions.plotArea.dataLabelValue && d.data.data[0].value !== void 0) {
-                htmlString += `<span style="
-          font-size: ${d.data.properties.valueFontSize}px;
-          color: ${d.data.properties.valueFontColor};
-          font-style: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""};
-          text-decoration: ${d.data.properties.valueFontStyle.includes(
-                  fontStyleOptions.underline
-                ) ? fontStyleOptions.underline : ""};
-          font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "300"};
-          font-family: ${d.data.properties.valueFont};
-          display: block;">
-          ${value2}
-        </span>`;
-              }
-              if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && d.data[0].value !== void 0) {
-                htmlString += `<span style="
-          font-size: ${d.data.properties.valueFontSize}px;
-          color: ${d.data.properties.valueFontColor};
-          font-style: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : ""};
-          text-decoration: ${d.data.properties.valueFontStyle.includes(
-                  fontStyleOptions.underline
-                ) ? fontStyleOptions.underline : ""};
-          font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "300"};
-          font-family: ${d.data.properties.valueFont};
-          display: block;">
-          ${format(".2s")(d.data[0].value)}
-        </span>`;
-              }
-              return htmlString;
-            } catch (error) {
-              logError$2(fileName$7, "drawDonutDataLabels", error);
-              return "";
-            }
-          });
+          }).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");
         }
       } catch (error) {
         logError$2(fileName$7, "drawDonutDataLabels", error);
@@ -27455,7 +27382,9 @@
                 )(data2.data.data[1].value)
               } : ""
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }).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);
@@ -27638,7 +27567,9 @@
               },
               { key: "Legend", value: d.currentTarget.__data__.data.legend }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }).on("mouseout.text", () => {
           hideTooltipOnMouseOut();
@@ -27704,7 +27635,9 @@
               },
               { key: "Legend", value: d.currentTarget.__data__.data.legend }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }).on("mouseout.text", () => {
           hideTooltipOnMouseOut();
@@ -27905,7 +27838,8 @@
           legendListWidth,
           chartTitleHeight,
           chartId,
-          margins
+          margins,
+          staticLegendShape.circle
         );
       } catch (error) {
         logError$2(fileName$5, "initLegendList", error);
@@ -27978,6 +27912,7 @@
         chartTitleHeight,
         chartId,
         margins,
+        staticLegendShape.rectangle,
         false
       );
       initPyramidData();
@@ -28040,13 +27975,13 @@
                 ${centerX + bottomWidth / 2},${yBottom}
                 ${centerX - bottomWidth / 2},${yBottom}
               `
-            ).attr("fill", d.properties.color || "#4cb2ff").on("mousemove", function() {
+            ).attr("fill", d.properties.color || "#4cb2ff").on("mousemove", function(d2) {
               try {
                 showTooltipOnMouseMove(
                   [
                     {
-                      key: d.legend,
-                      value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? d.data[0].value ? (Math.abs(d.data[0].value / pyramidTotalValue) * 100).toFixed(
+                      key: d2.legend,
+                      value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? d2.data[0].value ? (Math.abs(d2.data[0].value / pyramidTotalValue) * 100).toFixed(
                         convertStringToNumber(
                           chartFormatOptions.toolTip.toolTipDecimalPrecision
                         )
@@ -28054,10 +27989,12 @@
                         "None",
                         chartFormatOptions.toolTip.toolTipNumberFormat,
                         chartFormatOptions.toolTip.toolTipDecimalPrecision
-                      )(d.data[0].value)
+                      )(d2.data[0].value)
                     }
                   ],
-                  chartFormatOptions
+                  chartFormatOptions,
+                  void 0,
+                  d2.currentTarget.__data__.data.properties
                 );
                 select$2(this).style("opacity", 0.8).style("stroke", chartFormatOptions.chartArea.chartAreaColor).style("stroke-width", "3px");
               } catch (error) {
@@ -28331,7 +28268,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.hollowCircle
       );
       initProgressChartData();
       drawProgressChart();
@@ -28389,7 +28327,9 @@
                   )(maxValue)
                 }
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              d.currentTarget.__data__.data.properties
             );
           } catch (error) {
             logError$2(
@@ -28842,7 +28782,9 @@
                         )(data[index2].data[0].value)
                       }
                     ],
-                    chartFormatOptions
+                    chartFormatOptions,
+                    void 0,
+                    d.currentTarget.__data__.data.properties
                   );
                 }).on("mouseout", () => {
                   hideTooltipOnMouseOut();
@@ -29049,7 +28991,8 @@
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.hollowCircle
       );
       initRadialBarChart();
     };
@@ -29207,7 +29150,9 @@
               },
               { key: "Legend", value: d.properties.alias }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.properties
           );
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();
@@ -29768,7 +29713,9 @@
                       value: totalMeasureValue
                     }
                   ],
-                  chartFormatOptions
+                  chartFormatOptions,
+                  void 0,
+                  d.properties
                 );
               } catch (error) {
                 logError$2(fileName$2, "draw-mousemove", error);
@@ -33237,7 +33184,9 @@
                 )(d.size)
               }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.properties
           );
           let selection2 = select$2(this).transition("tooltip").duration(10);
           selection2.selectAll("path").style("stroke-dasharray", "5,5").style("stroke-opacity", 1).style("stroke", "black");
@@ -33978,7 +33927,7 @@
               showTooltipOnMouseMove(
                 [
                   {
-                    key: d.name,
+                    key: d.name.split("~$~")[1],
                     value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? layerWisePercentage.get(d.name) + "%" : getNumberWithFormatFunction(
                       "None",
                       chartFormatOptions.toolTip.toolTipNumberFormat,
@@ -33986,7 +33935,9 @@
                     )(d.value)
                   }
                 ],
-                chartFormatOptions
+                chartFormatOptions,
+                void 0,
+                { markerShape: "square", markerColor: d.color }
               );
             }
             chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", 0.1).style("stroke", "none");
@@ -34055,7 +34006,7 @@
               showTooltipOnMouseMove(
                 [
                   {
-                    key: d.source.name + "→" + d.target.name,
+                    key: d.source.name.split("~$~")[1] + "→" + d.target.name.split("~$~")[1],
                     value: getNumberWithFormatFunction(
                       "None",
                       chartFormatOptions.toolTip.toolTipNumberFormat,
@@ -34063,7 +34014,9 @@
                     )(d.value)
                   }
                 ],
-                chartFormatOptions
+                chartFormatOptions,
+                void 0,
+                { markerColor: d.source.color, markerShape: "circle" }
               );
             }
           } catch (error) {
@@ -49521,7 +49474,9 @@
                 },
                 ...keyValueObject
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              d.currentTarget.__data__.data.properties
             );
           }
         }).on("mouseout", (event2, d) => {
@@ -49631,7 +49586,9 @@
                   )(d.properties.data?.data[1]?.value)
                 }
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              d.currentTarget.__data__.data.properties
             );
             select$2(this).style(
               "r",
@@ -52550,7 +52507,8 @@
           maxLegendDimensions[0],
           chartTitleHeight,
           chartId,
-          margins
+          margins,
+          staticLegendShape.circle
         );
       } catch (e) {
         logError$2("BubbleChart", "initLegendList", e);
@@ -53605,25 +53563,30 @@
           barGroups = barGroupsEnter.merge(barGroups);
           let rects = barGroups.selectAll("rect").data((d) => d, (d) => d.key || d.Key);
           const rectsEnter = rects.enter().append("rect").attr("class", "rect").attr("class", (d) => d.key ? d.key.replace(/ /g, "-") : d.Key.replace(/ /g, "-")).attr("x", (d) => xScale(d.data.dimension || d.data.legend)).attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0).attr("width", xScale.bandwidth()).attr("visibility", (d) => k2 === 0 && d.data.dimension && stackTotalData ? "hidden" : "visible").style("shape-rendering", "crispEdges").on("mousemove", (event2, d) => {
-            showTooltipOnMouseMove([
-              {
-                key: d.key === "dimensionTotal" ? "Dimension" : formatOptions.xAxisTitle.xAxisTitleText,
-                value: chartJSON.formattedDimensionListMap.get(d.data.dimension)
-              },
-              {
-                key: formatOptions.yAxisTitle.yAxisTitleText,
-                value: (d.key === "up" ? "+" : d.key === "down" ? "-" : "") + getNumberWithFormat(
-                  d.key === "dimensionTotal" ? d.data.dimensionTotal : d[1] - d[0],
-                  formatOptions.toolTip.toolTipDisplayUnits,
-                  formatOptions.toolTip.toolTipNumberFormat,
-                  formatOptions.toolTip.toolTipDecimalPrecision
-                )
-              },
-              {
-                key: "Legend",
-                value: d.Key ? d.Key.includes("~$~") ? d.Key.split("~$~")[1] : d.Key : d.data.legend ? d.data.legend.includes("~$~") ? d.data.legend.split("~$~")[1] : d.data.legend : "Total"
-              }
-            ], formatOptions);
+            const markerInfo = {
+              markerShape: "square",
+              markerColor: d.key === "dimensionTotal" ? formatOptions.plotArea.totalColor : d.key === "down" ? formatOptions.plotArea.negativeColor : formatOptions.plotArea.positiveColor
+            };
+            showTooltipOnMouseMove(
+              [
+                {
+                  key: formatOptions.yAxisTitle.yAxisTitleText,
+                  value: (d.key === "up" ? "+" : d.key === "down" ? "-" : "") + getNumberWithFormat(
+                    d.key === "dimensionTotal" ? d.data.dimensionTotal : d[1] - d[0],
+                    formatOptions.toolTip.toolTipDisplayUnits,
+                    formatOptions.toolTip.toolTipNumberFormat,
+                    formatOptions.toolTip.toolTipDecimalPrecision
+                  )
+                },
+                {
+                  key: "Legend",
+                  value: d.Key ? d.Key.includes("~$~") ? d.Key.split("~$~")[1] : d.Key : d.data.legend ? d.data.legend.includes("~$~") ? d.data.legend.split("~$~")[1] : d.data.legend : "Total"
+                }
+              ],
+              formatOptions,
+              void 0,
+              markerInfo
+            );
           }).on("mouseout", () => {
             hideTooltipOnMouseOut();
           });
@@ -54188,14 +54151,19 @@
         ...child,
         parentProperties: d.properties
       }))).enter().append("rect").attr("class", "rect").attr("y", (d) => d.dimension ? yScaleLeft(d.dimension) : yScaleLeft("defaultEntry")).attr("x", (d) => xScale(Math.min(0, d.value))).attr("stroke-dasharray", (d) => d.stackBorderStyle == 2 ? "5,3" : "0").attr("stroke-width", (d) => d.stackBorderWidth + "px").attr("stroke", (d) => d.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? d.stackBorderColor : "none").style("shape-rendering", "crispEdges").attr("width", (d) => d.value ? Math.abs(xScale(d.value) - xScale(0)) : 0).attr("height", yScaleLeft.bandwidth()).style("fill", (d) => d.parentProperties.color).attr("opacity", 1).on("mousemove", (event2, d) => {
-        showTooltipOnMouseMove([
-          { key: "Measure", value: d.legend },
-          { key: "Legend", value: d.dimension },
-          {
-            key: "Value",
-            value: d.value < 0 ? getNumberWithFormat(-d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true) : getNumberWithFormat(d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true)
-          }
-        ], formatOptions);
+        showTooltipOnMouseMove(
+          [
+            { key: "Measure", value: d.legend },
+            { key: "Legend", value: d.dimension },
+            {
+              key: "Value",
+              value: d.value < 0 ? getNumberWithFormat(-d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true) : getNumberWithFormat(d.value, formatOptions.toolTip.toolTipDisplayUnits, formatOptions.toolTip.toolTipNumberFormat, formatOptions.toolTip.toolTipDecimalPrecision, true)
+            }
+          ],
+          formatOptions,
+          void 0,
+          d.currentTarget.__data__.data.properties
+        );
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
       });
@@ -54319,11 +54287,11 @@
   exports2.AreaChart = AreaChart;
   exports2.BubbleChart = BubbleChart;
   exports2.ColumnChart = ColumnChart;
-  exports2.ColumnHistogramChart = ColumnHistogramChart$1;
+  exports2.ColumnHistogramChart = ColumnHistogramChart;
   exports2.CustomColumnChart = CustomColumnChart;
   exports2.DonutChart = DonutChart;
   exports2.HorizontalBarChart = HorizontalBarChart;
-  exports2.HorizontalHistogramChart = ColumnHistogramChart;
+  exports2.HorizontalHistogramChart = HorizontalHistogramChart;
   exports2.LayeredColumnChart = LayeredColumnChart;
   exports2.LayeredHorizontalBarChart = LayeredHorizontalBarChart;
   exports2.LineChart = LineChart;