pace-chart-lib 1.0.10 → 1.0.13

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

@@ -11602,7 +11602,7 @@ function computeMarginMetrics(windowWidth, windowHeight, maxNumberForPrimaryAxis
     "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,
@@ -15401,10 +15401,10 @@ function getNumberWithFormatFunction(displayUnits, numberFormat, decimalPrecisio
     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",
@@ -15514,11 +15514,11 @@ const drawChartTitle = (chartSvg, chartTitleHeight, chartTitleWidth, chartFormat
       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);
@@ -15564,14 +15564,14 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
           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);
           }
         });
@@ -15592,7 +15592,7 @@ const legendsWithScroll = (svg, seriesData, x2, y2, width, height, legendPositio
         {
           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);
@@ -15638,7 +15638,7 @@ function getCircleShape(d, innerDiv) {
 }
 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);
   }
@@ -15824,7 +15824,7 @@ const marginCalculationsForChartsWithoutAxis = (chartFormatOptions, width, heigh
     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;
@@ -15845,7 +15845,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           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
         );
@@ -15860,7 +15860,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           30,
           position,
           horizontalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -15875,7 +15875,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           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
         );
@@ -15890,7 +15890,7 @@ const initLegendListWithTotalValueAllowance = (chartFormatOptions, svg, seriesDa
           30,
           position,
           horizontalLegendAlignment,
-          staticLegendShape.circle,
+          staticLegendShape2,
           chartFormatOptions,
           chartId
         );
@@ -19905,7 +19905,7 @@ const setnumberOfBubbles = (svg, legendPosition, chartFormatOptions, height, wid
 function logError$1(fileName2, functionName, error) {
   console.error(`[${fileName2}] [${functionName}]`, error);
 }
-const ColumnHistogramChart$1 = ({
+const ColumnHistogramChart = ({
   isDateType,
   formatOptions,
   data
@@ -24317,7 +24317,7 @@ const LayeredHorizontalBarChart = ({
     }
   ) });
 };
-const ColumnHistogramChart = ({
+const HorizontalHistogramChart = ({
   isDateType,
   formatOptions,
   data
@@ -24390,12 +24390,12 @@ const ColumnHistogramChart = ({
   };
   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
@@ -24444,25 +24444,28 @@ const ColumnHistogramChart = ({
       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,
@@ -24579,7 +24582,7 @@ const ColumnHistogramChart = ({
   const binsCalculation = () => {
     switch (formatOptions.bins.binsCalculation) {
       case "Automatic":
-        thresholds = innerWidth2 / 50;
+        thresholds = innerHeight2 / 50;
         break;
       case "Number of Bins":
         calculatingPeriodsWithBins(false);
@@ -24589,11 +24592,7 @@ const ColumnHistogramChart = ({
     }
   };
   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) {
@@ -24619,9 +24618,9 @@ const ColumnHistogramChart = ({
     }
   };
   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);
@@ -24637,23 +24636,26 @@ const ColumnHistogramChart = ({
     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,
@@ -24661,15 +24663,14 @@ const ColumnHistogramChart = ({
           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,
@@ -24678,32 +24679,29 @@ const ColumnHistogramChart = ({
         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)
           }
         ],
@@ -24753,7 +24751,7 @@ const ColumnHistogramChart = ({
               (d) => filteredDimension.includes(d.dimension)
             )
           );
-          getXAxis();
+          getYAxis();
           drawColumnChart();
         })
       );
@@ -24770,35 +24768,20 @@ const ColumnHistogramChart = ({
             (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%" }
@@ -26589,7 +26572,8 @@ const PieChart = ({ data, formatOptions, chartId }) => {
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.circle
     );
     initPieChartData();
     drawPieChart();
@@ -26670,7 +26654,9 @@ const PieChart = ({ data, formatOptions, chartId }) => {
             },
             { key: "Legend", value: d.currentTarget.__data__.data.legend }
           ],
-          chartFormatOptions
+          chartFormatOptions,
+          void 0,
+          d.currentTarget.__data__.data.properties
         );
       }).on("mouseout.text", () => {
         hideTooltipOnMouseOut();
@@ -26948,6 +26934,7 @@ const DonutChart = ({
       chartTitleHeight,
       chartId,
       margins,
+      staticLegendShape.hollowCircle,
       false
     );
     initPieChartData();
@@ -26968,7 +26955,7 @@ const DonutChart = ({
   };
   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,
@@ -27034,7 +27021,9 @@ const DonutChart = ({
             },
             { 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) ;
@@ -27111,7 +27100,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?.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(
@@ -27192,69 +27181,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").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);
@@ -27452,7 +27379,9 @@ const Treemap = ({ data, formatOptions, chartId }) => {
               )(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);
@@ -27635,7 +27564,9 @@ const PieofPie = ({
             },
             { key: "Legend", value: d.currentTarget.__data__.data.legend }
           ],
-          chartFormatOptions
+          chartFormatOptions,
+          void 0,
+          d.currentTarget.__data__.data.properties
         );
       }).on("mouseout.text", () => {
         hideTooltipOnMouseOut();
@@ -27701,7 +27632,9 @@ const PieofPie = ({
             },
             { key: "Legend", value: d.currentTarget.__data__.data.legend }
           ],
-          chartFormatOptions
+          chartFormatOptions,
+          void 0,
+          d.currentTarget.__data__.data.properties
         );
       }).on("mouseout.text", () => {
         hideTooltipOnMouseOut();
@@ -27902,7 +27835,8 @@ const PieofPie = ({
         legendListWidth,
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
     } catch (error) {
       logError$2(fileName$5, "initLegendList", error);
@@ -27975,6 +27909,7 @@ const PyramidChart = ({
       chartTitleHeight,
       chartId,
       margins,
+      staticLegendShape.rectangle,
       false
     );
     initPyramidData();
@@ -28037,13 +27972,13 @@ const PyramidChart = ({
                 ${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
                       )
@@ -28051,10 +27986,12 @@ const PyramidChart = ({
                       "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) {
@@ -28328,7 +28265,8 @@ const ProgressChart = ({
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.hollowCircle
     );
     initProgressChartData();
     drawProgressChart();
@@ -28386,7 +28324,9 @@ const ProgressChart = ({
                 )(maxValue)
               }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         } catch (error) {
           logError$2(
@@ -28839,7 +28779,9 @@ const Speedometer = ({
                       )(data[index2].data[0].value)
                     }
                   ],
-                  chartFormatOptions
+                  chartFormatOptions,
+                  void 0,
+                  d.currentTarget.__data__.data.properties
                 );
               }).on("mouseout", () => {
                 hideTooltipOnMouseOut();
@@ -29046,7 +28988,8 @@ const RadialBarChart = ({
       legendListWidth,
       chartTitleHeight,
       chartId,
-      margins
+      margins,
+      staticLegendShape.hollowCircle
     );
     initRadialBarChart();
   };
@@ -29204,7 +29147,9 @@ const RadialBarChart = ({
             },
             { key: "Legend", value: d.properties.alias }
           ],
-          chartFormatOptions
+          chartFormatOptions,
+          void 0,
+          d.properties
         );
       }).on("mouseout", () => {
         hideTooltipOnMouseOut();
@@ -29765,7 +29710,9 @@ const WordCloud = ({ data, formatOptions, chartId }) => {
                     value: totalMeasureValue
                   }
                 ],
-                chartFormatOptions
+                chartFormatOptions,
+                void 0,
+                d.properties
               );
             } catch (error) {
               logError$2(fileName$2, "draw-mousemove", error);
@@ -33234,7 +33181,9 @@ const VennChart = ({
               )(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");
@@ -33975,7 +33924,7 @@ const SankeyChart = ({
             showTooltipOnMouseMove(
               [
                 {
-                  key: d.name,
+                  key: d.name.split("~$~")[1],
                   value: chartFormatOptions.toolTip.toolTipNumberFormat == ",.0%" ? layerWisePercentage.get(d.name) + "%" : getNumberWithFormatFunction(
                     "None",
                     chartFormatOptions.toolTip.toolTipNumberFormat,
@@ -33983,7 +33932,9 @@ const SankeyChart = ({
                   )(d.value)
                 }
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              { markerShape: "square", markerColor: d.color }
             );
           }
           chartAreaTagG.selectAll(".sankey-nodes").style("fill-opacity", 0.1).style("stroke", "none");
@@ -34052,7 +34003,7 @@ const SankeyChart = ({
             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,
@@ -34060,7 +34011,9 @@ const SankeyChart = ({
                   )(d.value)
                 }
               ],
-              chartFormatOptions
+              chartFormatOptions,
+              void 0,
+              { markerColor: d.source.color, markerShape: "circle" }
             );
           }
         } catch (error) {
@@ -49518,7 +49471,9 @@ const Maps = ({
               },
               ...keyValueObject
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
         }
       }).on("mouseout", (event2, d) => {
@@ -49628,7 +49583,9 @@ const Maps = ({
                 )(d.properties.data?.data[1]?.value)
               }
             ],
-            chartFormatOptions
+            chartFormatOptions,
+            void 0,
+            d.currentTarget.__data__.data.properties
           );
           select$2(this).style(
             "r",
@@ -52547,7 +52504,8 @@ const BubbleChart = ({
         maxLegendDimensions[0],
         chartTitleHeight,
         chartId,
-        margins
+        margins,
+        staticLegendShape.circle
       );
     } catch (e) {
       logError$2("BubbleChart", "initLegendList", e);
@@ -53602,25 +53560,30 @@ const WaterfallChart = ({
         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();
         });
@@ -54185,14 +54148,19 @@ const TornadoChart = ({
       ...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();
     });
@@ -54317,11 +54285,11 @@ export {
   AreaChart,
   BubbleChart,
   ColumnChart,
-  ColumnHistogramChart$1 as ColumnHistogramChart,
+  ColumnHistogramChart,
   CustomColumnChart,
   DonutChart,
   HorizontalBarChart,
-  ColumnHistogramChart as HorizontalHistogramChart,
+  HorizontalHistogramChart,
   LayeredColumnChart,
   LayeredHorizontalBarChart,
   LineChart,