pace-chart-lib 1.0.5 → 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("position", "absolute").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;
@@ -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,7 +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();
   };
@@ -18867,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,
@@ -19190,7 +19180,7 @@ const NormalizedStackColumnChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -19245,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(
         [
@@ -19404,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) {
@@ -20262,7 +20250,7 @@ const ColumnHistogramChart = ({
           false,
           innerWidth2
         ).yAxisLabelArray
-      ).ticks(innerHeight2 / 50).tickSizeOuter(0);
+      ).ticks(innerHeight2 / 50).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -20279,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) => {
@@ -20395,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,
@@ -20776,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(
@@ -20802,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 = () => {
@@ -20817,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(
@@ -20847,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(
@@ -20968,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,
@@ -21331,7 +21310,7 @@ const StackLineChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -21352,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();
@@ -21513,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,
@@ -21814,7 +21799,7 @@ const NormalisedStackLineChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -21850,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(
@@ -21859,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() {
@@ -22017,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,
@@ -22359,7 +22341,7 @@ const HorizontalBarChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
     if (isSecondaryAxisDrawn) {
       xAxisTop = axisTop(xScaleTop).tickFormat(
@@ -22385,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 = () => {
@@ -22413,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(
@@ -22422,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) => {
@@ -22536,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,
@@ -22863,7 +22844,7 @@ const StackHorizontalChart = ({
           barChart,
           innerWidth2
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -22894,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(
@@ -22944,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();
   };
@@ -23243,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,
@@ -23534,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 = () => {
@@ -23571,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(
@@ -23617,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();
   };
@@ -23707,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,
@@ -24029,7 +24007,7 @@ const LayeredHorizontalBarChart = ({
           barChart,
           innerWidth2
         ).customTickValue ?? innerHeight2 / 30
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getYAxis = () => {
@@ -24403,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,
@@ -24795,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(
@@ -24821,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 = () => {
@@ -25011,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,
@@ -25363,7 +25335,7 @@ const AreaChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -25392,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(
@@ -25544,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,
@@ -25908,7 +25881,7 @@ const StackAreaChart = ({
           customYaxisMinValue,
           customYaxisMaxValue
         ).customTickValue ?? (dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30)
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -25941,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", () => {
@@ -26122,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,
@@ -26437,7 +26411,7 @@ const NormalizedStackAreaChart = ({
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 30 : innerHeight2 / 30,
         "%"
-      ).tickSizeOuter(0);
+      ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
@@ -26475,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", () => {
@@ -26656,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",
@@ -27112,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 = ({
@@ -27235,6 +27208,7 @@ 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);
       const parentGroup = chartAreaTagG.append("g").attr("class", "parentGroup").attr("fill-opacity", chartFormatOptions.plotArea.opacity).attr("transform", `${getPiePosition()}`);
@@ -27245,7 +27219,10 @@ const DonutChart = ({
         const thisPath = d;
         thisPath._current = { startAngle: 0, endAngle: 0 };
       }).on("mouseover.arc", function() {
-        select$2(this).transition().duration(150).attr("d", arcOver);
+        if (enableTransition) ;
+        else {
+          select$2(this).attr("d", arcOver);
+        }
       }).on("mousemove.text", (d) => {
         showTooltipOnMouseMove(
           [
@@ -27268,17 +27245,15 @@ const DonutChart = ({
           chartFormatOptions
         );
       }).on("mouseout.text", () => hideTooltipOnMouseOut()).on("mouseout.arc", function() {
-        select$2(this).transition().duration(150).attr("d", arc2);
-      });
-      paths.transition().delay((_, i) => i * 100).duration(2e3).attrTween("d", function(d) {
-        const interpolate2 = interpolate$2(
-          { startAngle: 0, endAngle: 0 },
-          d
-        );
-        return function(t) {
-          return arc2(interpolate2(t));
-        };
+        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);
     }
@@ -27523,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 }) => {
@@ -27714,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 = ({
@@ -28142,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 = ({
@@ -28501,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 = ({
@@ -28745,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,
@@ -29225,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);
@@ -29517,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() {
 } };
@@ -30059,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) {
@@ -33597,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;
@@ -34564,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",
@@ -52688,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,
@@ -52722,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,
@@ -52811,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 = ({
@@ -53092,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,
@@ -53126,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,
@@ -53434,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,
@@ -53836,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",
@@ -54080,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,
@@ -54454,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;
@@ -54581,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,