pace-chart-lib 1.0.4 → 1.0.6

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

@@ -2371,7 +2371,7 @@ define$1(Hcl, hcl, extend$1(Color$1, {
   }
 }));
 const constant$9 = (x2) => () => x2;
-function linear$3(a2, d) {
+function linear$2(a2, d) {
   return function(t) {
     return a2 + t * d;
   };
@@ -2388,7 +2388,7 @@ function gamma$1(y2) {
 }
 function nogamma$1(a2, b) {
   var d = b - a2;
-  return d ? linear$3(a2, d) : constant$9(isNaN(a2) ? b : a2);
+  return d ? linear$2(a2, d) : constant$9(isNaN(a2) ? b : a2);
 }
 const interpolateRgb$1 = (function rgbGamma(y2) {
   var color2 = gamma$1(y2);
@@ -3337,10 +3337,6 @@ Transition$1.prototype = {
   end: transition_end$1,
   [Symbol.iterator]: selection_prototype$1[Symbol.iterator]
 };
-const linear$2 = (t) => +t;
-function cubicOut(t) {
-  return --t * t * t + 1;
-}
 function cubicInOut$1(t) {
   return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
 }
@@ -10868,7 +10864,8 @@ const defaultChartFormatOptions = {
     xAxisLabelFontFamily: "Helvetica",
     xAxisLabelFontStyle: [],
     xAxisLabelColor: "#000000",
-    xAxisNumberFormat: "DD-MM-YYYY",
+    xAxisNumberFormat: "MMM-YY",
+    // "DD-MM-YYYY",
     xAxisQuarterFormat: "Long",
     xAxisDisplayUnits: "None",
     xAxisDisplayUnitsLabel: false,
@@ -10918,7 +10915,7 @@ const defaultChartFormatOptions = {
     yAxisLabelFontStyle: [],
     yAxisLabelColor: "#000000",
     yAxisNumberFormat: ",",
-    yAxisDisplayUnits: "Thousands",
+    yAxisDisplayUnits: "Auto",
     //"None",
     yAxisLabelRotation: 90,
     yAxisDisplayUnitsLabel: false,
@@ -12346,7 +12343,9 @@ function getLabelsFromAlgo(dataMin, dataMax, axisLengthPx, labelWidthPx = 80) {
     labels.push(parseFloat(current.toFixed(10)));
     current += interval2;
   }
-  return labels;
+  const reductionFactor = 4;
+  const reducedLabels = labels.filter((i) => i % reductionFactor === 0);
+  return reducedLabels;
 }
 function initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, innerHeight2) {
   try {
@@ -15388,7 +15387,7 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, markerProp
     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("box-shadow", "0px 4px 10px #240808ff").style("transition", "transform 0.1s ease, opacity 0.2s ease");
+    ).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");
     const e = event2 || window.event;
     const mouseX = e.pageX;
     const mouseY = e.pageY;
@@ -15902,10 +15901,10 @@ const marginCalculationsForChartsWithoutLegends = (chartFormatOptions, height, w
       "Helvetica"
     ).height : 5;
     let margins = {
-      top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 10,
-      bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 10,
-      left: 10,
-      right: 10
+      top: chartFormatOptions.chartTitle.chartTitleVisibility ? chartTitleHeight : 20,
+      bottom: shouldShowColorScale && chartFormatOptions.colorScale.showColor == colorThemeTypes.colorTheme ? 40 : 20,
+      left: 20,
+      right: 20
     };
     innerHeight = height - margins.top - margins.bottom;
     innerWidth = width - margins.left - margins.right;
@@ -16429,7 +16428,7 @@ const ColumnChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -16455,7 +16454,7 @@ const ColumnChart = ({
         ).secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -16493,7 +16492,7 @@ const ColumnChart = ({
         "transform",
         (d) => `translate(${xScale(d.dimension) - columnWidth / 2}, 0)`
       );
-      columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legend)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
+      const bars = columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legend)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
         const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
         return yScale(0);
       }).attr("height", 0).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
@@ -16502,7 +16501,9 @@ const ColumnChart = ({
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-      ).transition().duration(2e3).ease(cubicOut).attr("y", (d) => {
+      );
+      const finalBars = bars;
+      finalBars.attr("y", (d) => {
         const yScale = data2.properties.axis === "Primary" ? yScaleLeft : yScaleRight;
         return d.value > 0 ? yScale(d.value) : yScale(0);
       }).attr("height", (d) => {
@@ -16638,18 +16639,15 @@ const ColumnChart = ({
     );
     getChartType(filteredData);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const CustomColumnChart = ({
   isDateType,
@@ -17164,7 +17162,7 @@ const CustomColumnChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -17190,7 +17188,7 @@ const CustomColumnChart = ({
         ).secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getChartType = (lineData) => {
@@ -17617,18 +17615,15 @@ const CustomColumnChart = ({
     });
     return stackChartData;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const LayeredColumnChart = ({
   isDateType,
@@ -17965,7 +17960,7 @@ const LayeredColumnChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -18142,18 +18137,15 @@ const LayeredColumnChart = ({
     visibleBars = fVisibleBars;
     drawColumnChart();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const StackColumnChart = ({
   isDateType,
@@ -18468,7 +18460,7 @@ const StackColumnChart = ({
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
       ).tickValues(respParams.yAxisLabelArray).ticks(
         respParams.customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -18501,7 +18493,7 @@ const StackColumnChart = ({
       );
       return { props: seriesData[groupIndex]?.properties, groupIndex };
     };
-    const mergedRects = rects.enter().append("rect").merge(rects).attr("x", (d) => xScale(d.data.dimension) - columnWidth / 2).attr("width", columnWidth).attr("y", (d) => yScaleLeft(0)).attr("height", 0).attr("fill", (d, i, nodes) => {
+    const baseRects = rects.enter().append("rect").merge(rects).attr("x", (d) => xScale(d.data.dimension) - columnWidth / 2).attr("width", columnWidth).attr("y", (d) => yScaleLeft(0)).attr("height", 0).attr("fill", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
       return props?.color || "gray";
     }).attr("stroke", (d, i, nodes) => {
@@ -18554,10 +18546,8 @@ const StackColumnChart = ({
       selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
     });
-    mergedRects.transition().duration(2e3).ease(cubicOut).attr(
-      "y",
-      (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])
-    ).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
+    const finalRects = baseRects;
+    finalRects.attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
   };
@@ -18870,18 +18860,15 @@ const StackColumnChart = ({
     } catch (e) {
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const NormalizedStackColumnChart = ({
   isDateType,
@@ -19184,7 +19171,7 @@ const NormalizedStackColumnChart = ({
     }
   };
   const getXScale = () => {
-    xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.3 * parseFloat(formatOptions.plotArea.plotAreaGapWidth) / 100);
+    xScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
   };
   const initAxis = () => {
     {
@@ -19193,7 +19180,7 @@ const NormalizedStackColumnChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -19248,7 +19235,8 @@ const NormalizedStackColumnChart = ({
       const { props } = getPropsForRect(nodes, i);
       return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
     });
-    rectsEnter.transition().duration(2e3).ease(cubicOut).attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
+    const applyTransition = (sel) => sel;
+    applyTransition(rectsEnter).attr("y", (d) => d[1] >= d[0] ? yScaleLeft(d[1]) : yScaleLeft(d[0])).attr("height", (d) => Math.abs(yScaleLeft(d[0]) - yScaleLeft(d[1])));
     rectsEnter.merge(rects).on("mousemove", (event2, d) => {
       showTooltipOnMouseMove(
         [
@@ -19393,7 +19381,11 @@ const NormalizedStackColumnChart = ({
       (K2, j) => K2.forEach((d) => {
         d["key"] = K2.key;
         K2["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
-        K2["individualAnnotationVisibility"] = JSON.parse(JSON.stringify(seriesData[j].properties.individualAnnotationVisibility));
+        K2["individualAnnotationVisibility"] = JSON.parse(
+          JSON.stringify(
+            seriesData[j].properties.individualAnnotationVisibility
+          )
+        );
         d.data.labelPosition = seriesData[j].properties.dataLabelPosition;
         d.data["labelColor"] = seriesColor == "2" ? JSON.parse(JSON.stringify(seriesData[j].properties.color)) : seriesData[j].properties.labelColor;
         d["hideZero"] = JSON.parse(
@@ -19403,18 +19395,15 @@ const NormalizedStackColumnChart = ({
       })
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$a = "ChartsWithoutAxisFunctions.ts";
 function marginCalculationForBubbleScatter(width, height, maxMeasure, formatOptions, maxDimension, maxLegendDimensions) {
@@ -20261,7 +20250,7 @@ const ColumnHistogramChart = ({
           false,
           innerWidth2
         ).yAxisLabelArray
-      ).ticks(innerHeight2 / 50).tickSizeOuter(0);
+      ).ticks(innerHeight2 / 50).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -20278,7 +20267,7 @@ const ColumnHistogramChart = ({
       )
     ).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
-    ).tickValues(labelArray).ticks(innerWidth2 / 30).tickSizeOuter(0);
+    ).tickValues(labelArray).ticks(innerWidth2 / 30).tickPadding(8).tickSizeOuter(0);
     formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
   };
   const getChartType = (lineData) => {
@@ -20394,18 +20383,15 @@ const ColumnHistogramChart = ({
       filteredDimension
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const LineChart = ({
   isDateType,
@@ -20775,7 +20761,7 @@ const LineChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       yAxisRight = axisRight(yScaleRight).tickFormat(
@@ -20801,7 +20787,7 @@ const LineChart = ({
         ).secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -20816,16 +20802,17 @@ const LineChart = ({
         cData.axis = lData.properties.axis;
       });
     });
-    const lineGenerator = line$1().x(
-      (d) => xScale(d.dimension) ? xScale(d.dimension) : null
-    ).y(
+    const lineGenerator = line$1().x((d) => {
+      const val = xScale(d.dimension);
+      return val != null ? val : 0;
+    }).y(
       (d) => d.axis === "Primary" ? yScaleLeft(d.value) : yScaleRight(d.value)
     ).defined((d) => d.hideZero ? Boolean(d.value) : true).curve(getCurveType(formatOptions));
     let lines = gTag.selectAll(".parentGroup").data([lineData]);
     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", "line").attr("fill", "none");
+    lineGroupsEnter.attr("hoverId", (d) => d.legend.replace(/ /g, "-")).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(
@@ -20846,11 +20833,7 @@ const LineChart = ({
       ).attr(
         "stroke-width",
         (d2) => d2.properties.lineStyle !== "None" ? 2.5 : 0
-      ).attr("fill", "none").each(function(d2) {
-        const path2 = select$2(this);
-        const totalLength = this.getTotalLength();
-        path2.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength).transition().duration(2e3).ease(linear$2).attr("stroke-dashoffset", 0);
-      });
+      ).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(
@@ -20967,18 +20950,15 @@ const LineChart = ({
       );
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const StackLineChart = ({
   isDateType,
@@ -21330,7 +21310,7 @@ const StackLineChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -21351,27 +21331,36 @@ const StackLineChart = ({
     let lines = gTag.selectAll(".parentGroup").data([stackChartData]);
     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, "-"));
+    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.merge(lineGroups).each(function(d, i) {
       const g = select$2(this);
-      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("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("stroke-linecap", seriesData[i].properties.lineStyle === "dotted" ? "round" : "").attr("stroke-width", seriesData[i].properties.lineStyle !== "None" ? 2.5 : 0).attr("fill", "none").each(function() {
-        const path2 = select$2(this);
-        const totalLength = this.getTotalLength();
-        path2.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength).transition().duration(2e3).ease(linear$2).attr("stroke-dashoffset", 0);
-      });
+      ).attr(
+        "stroke-linecap",
+        seriesData[i].properties.lineStyle === "dotted" ? "round" : ""
+      ).attr(
+        "stroke-width",
+        seriesData[i].properties.lineStyle !== "None" ? 2.5 : 0
+      ).attr("fill", "none");
+      const totalLength = pathSel.node().getTotalLength();
+      {
+        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() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
-        svg.selectAll(`[hoverId="${getJQuerySelector(d.key.split("~$~")[1].replace(/ /g, "-"))}"]`).classed("highlight", true).classed("unhighlight", false);
+        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(".parentGroup").classed("highlight", false).classed("unhighlight", false);
-        svg.selectAll(`[hoverId="${getJQuerySelector(d.key.split("~$~")[1].replace(/ /g, "-"))}"]`).classed("highlight", false).classed("unhighlight", false);
       });
     });
     lineGroups.exit().remove();
@@ -21512,18 +21501,15 @@ const StackLineChart = ({
     visibleBars = fVisibleBars;
     drawLineChart();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const NormalisedStackLineChart = ({
   isDateType,
@@ -21813,7 +21799,7 @@ const NormalisedStackLineChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -21849,7 +21835,7 @@ const NormalisedStackLineChart = ({
     ).append("path").attr("class", "line").attr("fill", "none");
     lineGroupsEnter.merge(lineGroups).each(function(d, i) {
       const g = select$2(this);
-      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("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(
@@ -21858,16 +21844,16 @@ const NormalisedStackLineChart = ({
       ).attr(
         "stroke-width",
         seriesData[i].properties.lineStyle !== "None" ? 2.5 : 0
-      ).attr("fill", "none").each(function() {
-        const path2 = select$2(this);
-        const totalLength = this.getTotalLength();
-        path2.attr("stroke-dasharray", totalLength + " " + totalLength).attr("stroke-dashoffset", totalLength).transition().duration(2e3).ease(linear$2).attr("stroke-dashoffset", 0);
-      });
+      ).attr("fill", "none");
+      const totalLength = pathSel.node().getTotalLength();
+      {
+        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() {
         svg.selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
         svg.selectAll(
           `[hoverId="${getJQuerySelector(
-            d.key.split("~$~")[1].replace(/ /g, "-")
+            d.key.includes("~$~") ? d.key.split("~$~")[1].replace(/ /g, "-") : d.key.replace(/ /g, "-")
           )}"]`
         ).classed("highlight", true).classed("unhighlight", false);
       }).on("mouseleave", function() {
@@ -22016,18 +22002,15 @@ const NormalisedStackLineChart = ({
       })
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const HorizontalBarChart = ({
   isDateType,
@@ -22358,7 +22341,7 @@ const HorizontalBarChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       xAxisTop = axisTop(xScaleTop).tickFormat(
@@ -22384,7 +22367,7 @@ const HorizontalBarChart = ({
         ).secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -22412,7 +22395,7 @@ const HorizontalBarChart = ({
       ).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})`);
-      columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legend)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
+      const bars = columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legend)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
         const xScaleUsed = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
         return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(0);
       }).attr("width", 0).attr("fill", data2.properties.color).attr("stroke-dasharray", (d) => d.stackBorderStyle === 2 ? "5,3" : "0").attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
@@ -22421,7 +22404,9 @@ const HorizontalBarChart = ({
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-      ).transition().duration(2e3).ease(cubicOut).attr("x", (d) => {
+      );
+      const finalBars = bars;
+      finalBars.attr("x", (d) => {
         const xScaleUsed = data2.properties.axis === "Primary" ? xScaleBottom : xScaleTop;
         return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(d.value);
       }).attr("width", (d) => {
@@ -22535,18 +22520,15 @@ const HorizontalBarChart = ({
       barChart
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const StackHorizontalChart = ({
   isDateType,
@@ -22862,7 +22844,7 @@ const StackHorizontalChart = ({
           barChart,
           innerWidth2
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -22893,7 +22875,7 @@ const StackHorizontalChart = ({
       const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
       return { props: seriesData[groupIndex]?.properties, groupIndex };
     };
-    const mergedRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
+    const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
       const props = getPropsForRect(nodes, i).props;
       return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr(
@@ -22943,7 +22925,9 @@ const StackHorizontalChart = ({
       selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
       hideTooltipOnMouseOut();
     });
-    mergedRects.attr("x", (d) => xScaleBottom(0)).transition().duration(2e3).ease(cubicOut).attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
+    baseRects.attr("x", (d) => xScaleBottom(0));
+    const finalRects = baseRects;
+    finalRects.attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
   };
@@ -23242,18 +23226,15 @@ const StackHorizontalChart = ({
       console.error(e);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const NormalizedStackHorizontalBarChart = ({
   isDateType,
@@ -23533,7 +23514,7 @@ const NormalizedStackHorizontalBarChart = ({
     {
       xAxisBottom = axisBottom(xScaleBottom).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -innerHeight2 : 0 : 0
-      ).ticks(innerWidth2 / 30, "%").tickSizeOuter(0);
+      ).ticks(innerWidth2 / 30, "%").tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -23570,7 +23551,7 @@ const NormalizedStackHorizontalBarChart = ({
       const groupIndex = Array.from(columnGroups.nodes()).indexOf(nodes[i].parentNode);
       return { props: seriesData[groupIndex]?.properties, groupIndex };
     };
-    const mergedRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - yScale.bandwidth() / 2).attr("height", yScale.bandwidth()).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
+    const baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - yScale.bandwidth() / 2).attr("height", yScale.bandwidth()).attr("fill", (d, i, nodes) => getPropsForRect(nodes, i).props?.color || "gray").attr("stroke", (d, i, nodes) => {
       const props = getPropsForRect(nodes, i).props;
       return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
     }).attr(
@@ -23616,7 +23597,8 @@ const NormalizedStackHorizontalBarChart = ({
       gTag.select(`#dim-background-${d.data.dimension}`).attr("visibility", "hidden");
       hideTooltipOnMouseOut();
     });
-    mergedRects.transition().duration(2e3).ease(cubicOut).attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
+    const finalRects = baseRects;
+    finalRects.attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
     columnGroups.exit().remove();
     gTag.selectAll(".parentGroup").raise();
   };
@@ -23706,18 +23688,15 @@ const NormalizedStackHorizontalBarChart = ({
     createStackLineData();
     drawLineChart();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const LayeredHorizontalBarChart = ({
   isDateType,
@@ -24028,7 +24007,7 @@ const LayeredHorizontalBarChart = ({
           barChart,
           innerWidth2
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -24402,18 +24381,15 @@ const LayeredHorizontalBarChart = ({
       console.error(e);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const HorizontalHistogramChart = ({
   isDateType,
@@ -24794,7 +24770,7 @@ const HorizontalHistogramChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       xAxisTop = axisTop(xScaleTop).tickFormat(
@@ -24820,7 +24796,7 @@ const HorizontalHistogramChart = ({
         ).secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
         formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -25010,18 +24986,15 @@ const HorizontalHistogramChart = ({
       barChart
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const AreaChart = ({
   isDateType,
@@ -25362,7 +25335,7 @@ const AreaChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -25391,7 +25364,11 @@ const AreaChart = ({
     areaGroupsEnter.append("path").attr("hoverId", (d) => d.legend.replace(/ /g, "-")).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)).transition().duration(2e3).ease(cubicInOut$1).attr("d", (d) => areaGenerator(d.data));
+    ).style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
+      {
+        select$2(this).attr("d", areaGenerator(d.data));
+      }
+    });
     areaGroupsEnter.merge(areaGroups).each(function(d) {
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2.data)).attr(
@@ -25543,18 +25520,15 @@ const AreaChart = ({
       );
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const StackAreaChart = ({
   isDateType,
@@ -25907,7 +25881,7 @@ const StackAreaChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -25940,7 +25914,11 @@ const StackAreaChart = ({
     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)).transition().duration(2e3).ease(cubicInOut$1).attr("d", (d) => areaGenerator(d));
+    ).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));
+      }
+    });
     areaGroupsEnter.merge(areaGroups).each(function(d, i) {
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => areaGenerator(d2)).attr("stroke", (d2) => d2.color !== "#ffffff" ? d2.color : "none").attr("stroke-dasharray", () => {
@@ -26121,18 +26099,15 @@ const StackAreaChart = ({
       })
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const NormalizedStackAreaChart = ({
   isDateType,
@@ -26436,7 +26411,7 @@ const NormalizedStackAreaChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -26474,7 +26449,12 @@ const NormalizedStackAreaChart = ({
     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)).transition().duration(2e3).ease(cubicInOut$1).attr("d", (d) => columnGenerator(d));
+    ).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));
+      }
+    });
     areaGroupsEnter.merge(areaGroups).each(function(d, i) {
       const g = select$2(this);
       g.selectAll("path.visibleLine").data([d]).join("path").attr("class", "visibleLine parentGroup").attr("d", (d2) => columnGenerator(d2)).attr("stroke", (d2) => d2.color !== "#ffffff" ? d2.color : "none").attr("stroke-dasharray", () => {
@@ -26655,18 +26635,15 @@ const NormalizedStackAreaChart = ({
       })
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const TSankeyDataLabelPostion = {
   left: "Left",
@@ -27111,18 +27088,15 @@ const PieChart = ({ data, formatOptions, chartId }) => {
       logError$2(fileName$8, "drawPieDataLabels", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$7 = "DonutChart.tsx";
 const DonutChart = ({
@@ -27234,13 +27208,21 @@ const DonutChart = ({
   };
   const drawDonutChart = () => {
     try {
+      const enableTransition = false;
       const arc2 = arc$1().innerRadius(innerRadius).outerRadius(radius);
       const arcOver = arc$1().innerRadius(innerRadius).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(
+      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(
         "fill",
         (d) => d.data.properties.color !== "#ffffff" ? d.data.properties.color : "none"
-      ).attr("d", (d) => arc2(d)).on("mouseover.arc", function(d) {
-        select$2(this).transition().duration(100).attr("d", arcOver);
+      ).each(function(d) {
+        const thisPath = d;
+        thisPath._current = { startAngle: 0, endAngle: 0 };
+      }).on("mouseover.arc", function() {
+        if (enableTransition) ;
+        else {
+          select$2(this).attr("d", arcOver);
+        }
       }).on("mousemove.text", (d) => {
         showTooltipOnMouseMove(
           [
@@ -27262,11 +27244,16 @@ const DonutChart = ({
           ],
           chartFormatOptions
         );
-      }).on("mouseout.text", () => {
-        hideTooltipOnMouseOut();
-      }).on("mouseout.arc", function(d) {
-        select$2(this).transition().duration(100).attr("d", arc2);
+      }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
+        if (enableTransition) ;
+        else {
+          select$2(this).attr("d", arc2);
+        }
       });
+      if (enableTransition) ;
+      else {
+        paths.attr("d", (d) => arc2(d));
+      }
     } catch (error) {
       logError$2(fileName$7, "drawDonutChart", error);
     }
@@ -27511,18 +27498,15 @@ const DonutChart = ({
       logError$2(fileName$7, "drawTotalValue", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$6 = "TreemapChart.tsx";
 const Treemap = ({ data, formatOptions, chartId }) => {
@@ -27702,18 +27686,15 @@ const Treemap = ({ data, formatOptions, chartId }) => {
       logError$2(fileName$6, "initChartRect", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$5 = "PieofPieChart.tsx";
 const PieofPie = ({
@@ -28130,18 +28111,15 @@ const PieofPie = ({
       logError$2(fileName$5, "initLegendList", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$4 = "PyramidChart.tsx";
 const PyramidChart = ({
@@ -28489,18 +28467,15 @@ const PyramidChart = ({
       return 0;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName$3 = "ProgressChart.tsx";
 const ProgressChart = ({
@@ -28733,18 +28708,15 @@ const ProgressChart = ({
       return "";
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const Speedometer = ({
   data,
@@ -29213,18 +29185,15 @@ const Speedometer = ({
       logError$2(fileName2, "setPointerValueText", error);
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 function logError(fileName2, functionName, error) {
   console.error(`[${fileName2}][${functionName}]`, error);
@@ -29505,18 +29474,15 @@ const RadialBarChart = ({
       logError("RadialBarChart.tsx", "getPiePosition", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 var noop$1 = { value: function() {
 } };
@@ -30047,18 +30013,15 @@ const WordCloud = ({ data, formatOptions, chartId }) => {
       logError$2(fileName$2, "drawWordCloudChart", e);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 var SMALL$1 = 1e-10;
 function intersectionArea(circles, stats) {
@@ -33585,18 +33548,15 @@ const VennChart = ({
       logError$2("VennChart.tsx", "initLegendListWithTotalValueAllowance", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 function max(values, valueof) {
   let max2;
@@ -33979,11 +33939,12 @@ function Sankey() {
   return sankey;
 }
 const SankeyChart = ({
-  sankeyLinks,
-  sankeyNodes,
   formatOptions,
+  data,
   chartId
 }) => {
+  let sankeyLinks = JSON.parse(JSON.stringify(data.sankeyLinks));
+  let sankeyNodes = JSON.parse(JSON.stringify(data.sankeyNodes));
   const svgRef = useRef();
   let chartFormatOptions;
   let width;
@@ -34392,13 +34353,13 @@ const SankeyChart = ({
                   "text-align",
                   chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                 ).style("line-height", "20px").attr("title", (d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
-                    return d2.alias ? d2.alias : d2.name;
+                  if (layerWisePercentage.get(d2.name) > 0) {
+                    return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                   }
                   return "";
                 }).text((d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
-                    return d2.alias ? d2.alias : d2.name;
+                  if (layerWisePercentage.get(d2.name) > 0) {
+                    return d2.alias ? d2.alias.includes("~$~") ? d2.alias.split("~$~")[1] : d2.alias : d2.name.includes("~$~") ? d2.name.split("~$~")[1] : d2.name;
                   }
                   return "";
                 });
@@ -34443,7 +34404,7 @@ const SankeyChart = ({
                   "text-align",
                   chartFormatOptions.nodes.sankeyChartType === "Left" ? "right" : chartFormatOptions.nodes.sankeyChartType === "Center" ? "center" : "left"
                 ).style("line-height", "20px").attr("title", (d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
+                  if (layerWisePercentage.get(d2.name) > 0) {
                     return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                       parseFloat(
                         chartFormatOptions.nodes.nodeLabelDecimalPrecision
@@ -34456,7 +34417,7 @@ const SankeyChart = ({
                   }
                   return "";
                 }).text((d2) => {
-                  if (layerWisePercentage.get(d2.name) > 5) {
+                  if (layerWisePercentage.get(d2.name) > 0) {
                     return chartFormatOptions.nodes.nodeLabelNumberFormat === ",.0%" ? layerWisePercentage.get(d2.name).toFixed(
                       parseFloat(
                         chartFormatOptions.nodes.nodeLabelDecimalPrecision
@@ -34551,18 +34512,15 @@ const SankeyChart = ({
       return { x: 0, y: 0 };
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const unitedStates = {
   "type": "FeatureCollection",
@@ -52675,7 +52633,7 @@ const BubbleChart = ({
         )
       ).tickSize(
         chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
-      ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickSizeOuter(0);
+      ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initXaxis(
         chartAreaTagG,
         chartFormatOptions,
@@ -52709,7 +52667,7 @@ const BubbleChart = ({
         )
       ).tickSize(
         chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickSizeOuter(0);
+      ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initYaxis(
         chartAreaTagG,
         chartFormatOptions,
@@ -52798,18 +52756,15 @@ const BubbleChart = ({
       logError$2("BubbleChart", "initLegendList", e);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const fileName = "ScatterChart.tsx";
 const ScatterChart = ({
@@ -53079,7 +53034,7 @@ const ScatterChart = ({
         )
       ).tickSize(
         chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesVertical ? chartFormatOptions.xAxisLabel.xAxisPosition === "0" ? -innerHeight2 : chartFormatOptions.xAxisLabel.xAxisPosition === "1" ? innerHeight2 : 0 : 0 : 0
-      ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickSizeOuter(0);
+      ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initXaxis(
         chartAreaTagG,
         chartFormatOptions,
@@ -53113,7 +53068,7 @@ const ScatterChart = ({
         )
       ).tickSize(
         chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
-      ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickSizeOuter(0);
+      ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initYaxis(
         chartAreaTagG,
         chartFormatOptions,
@@ -53421,18 +53376,15 @@ const ScatterChart = ({
       logError$2(fileName, "getJQuerySelector", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const WaterfallChart = ({
   isDateType,
@@ -53823,7 +53775,7 @@ const WaterfallChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     colorScale = ordinal().range([
       "#E25A42",
@@ -54067,18 +54019,15 @@ const WaterfallChart = ({
       throw error;
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 const TornadoChart = ({
   isDateType,
@@ -54441,7 +54390,7 @@ const TornadoChart = ({
         barChart,
         innerWidth2
       ).customTickValue ?? (dataTableHeight > 0 ? (innerWidth2 - dataTableHeight) / 30 : innerWidth2 / 30)
-    ).tickSizeOuter(0);
+    ).tickPadding(8).tickSizeOuter(0);
   };
   const getChartType = (lineData) => {
     formatOptions.plotArea.plotAreaCalculatedHigh;
@@ -54568,18 +54517,15 @@ const TornadoChart = ({
       barChart
     );
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "chartTooltipDiv" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        className: "chartSVG",
-        ref: svgRef,
-        id: chartId,
-        style: { width: "100%", height: "100%" }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      className: "chartSVG",
+      ref: svgRef,
+      id: chartId,
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
 };
 export {
   AreaChart,