pace-chart-lib 1.0.43 → 1.0.44

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

@@ -4778,7 +4778,7 @@ function index$2(projection, context) {
   };
   return path2.projection(projection).digits(digits).context(context);
 }
-function transformer$1(methods) {
+function transformer$2(methods) {
   return function(stream) {
     var s2 = new TransformStream();
     for (var key in methods) s2[key] = methods[key];
@@ -4844,7 +4844,7 @@ function resample(project, delta2) {
   return +delta2 ? resample$1(project, delta2) : resampleNone(project);
 }
 function resampleNone(project) {
-  return transformer$1({
+  return transformer$2({
     point: function(x2, y2) {
       x2 = project(x2, y2);
       this.stream.point(x2[0], x2[1]);
@@ -4913,13 +4913,13 @@ function resample$1(project, delta2) {
     return resampleStream;
   };
 }
-var transformRadians = transformer$1({
+var transformRadians = transformer$2({
   point: function(x2, y2) {
     this.stream.point(x2 * radians, y2 * radians);
   }
 });
 function transformRotate(rotate) {
-  return transformer$1({
+  return transformer$2({
     point: function(x2, y2) {
       var r = rotate(x2, y2);
       return this.stream.point(r[0], r[1]);
@@ -5737,6 +5737,24 @@ function initRange(domain, range2) {
   }
   return this;
 }
+function initInterpolator(domain, interpolator) {
+  switch (arguments.length) {
+    case 0:
+      break;
+    case 1: {
+      if (typeof domain === "function") this.interpolator(domain);
+      else this.range(domain);
+      break;
+    }
+    default: {
+      this.domain(domain);
+      if (typeof interpolator === "function") this.interpolator(interpolator);
+      else this.range(interpolator);
+      break;
+    }
+  }
+  return this;
+}
 const implicit = Symbol("implicit");
 function ordinal() {
   var index2 = new InternMap(), domain = [], range2 = [], unknown = implicit;
@@ -5879,10 +5897,10 @@ function polymap(domain, range2, interpolate2) {
     return r[i2](d[i2](x2));
   };
 }
-function copy(source, target) {
+function copy$1(source, target) {
   return target.domain(source.domain()).range(source.range()).interpolate(source.interpolate()).clamp(source.clamp()).unknown(source.unknown());
 }
-function transformer() {
+function transformer$1() {
   var domain = unit, range2 = unit, interpolate2 = interpolate$2, transform, untransform, unknown, clamp2 = identity$3, piecewise, output, input;
   function rescale() {
     var n = Math.min(domain.length, range2.length);
@@ -5921,7 +5939,7 @@ function transformer() {
   };
 }
 function continuous() {
-  return transformer()(identity$3, identity$3);
+  return transformer$1()(identity$3, identity$3);
 }
 function tickFormat(start2, stop, count2, specifier) {
   var step2 = tickStep(start2, stop, count2), precision;
@@ -5996,7 +6014,7 @@ function linearish(scale2) {
 function linear$1() {
   var scale2 = continuous();
   scale2.copy = function() {
-    return copy(scale2, linear$1());
+    return copy$1(scale2, linear$1());
   };
   initRange.apply(scale2, arguments);
   return linearish(scale2);
@@ -6023,13 +6041,53 @@ function powish(transform) {
   return linearish(scale2);
 }
 function pow() {
-  var scale2 = powish(transformer());
+  var scale2 = powish(transformer$1());
   scale2.copy = function() {
-    return copy(scale2, pow()).exponent(scale2.exponent());
+    return copy$1(scale2, pow()).exponent(scale2.exponent());
   };
   initRange.apply(scale2, arguments);
   return scale2;
 }
+function transformer() {
+  var x02 = 0, x12 = 1, t02, t12, k10, transform, interpolator = identity$3, clamp2 = false, unknown;
+  function scale2(x2) {
+    return x2 == null || isNaN(x2 = +x2) ? unknown : interpolator(k10 === 0 ? 0.5 : (x2 = (transform(x2) - t02) * k10, clamp2 ? Math.max(0, Math.min(1, x2)) : x2));
+  }
+  scale2.domain = function(_) {
+    return arguments.length ? ([x02, x12] = _, t02 = transform(x02 = +x02), t12 = transform(x12 = +x12), k10 = t02 === t12 ? 0 : 1 / (t12 - t02), scale2) : [x02, x12];
+  };
+  scale2.clamp = function(_) {
+    return arguments.length ? (clamp2 = !!_, scale2) : clamp2;
+  };
+  scale2.interpolator = function(_) {
+    return arguments.length ? (interpolator = _, scale2) : interpolator;
+  };
+  function range2(interpolate2) {
+    return function(_) {
+      var r0, r1;
+      return arguments.length ? ([r0, r1] = _, interpolator = interpolate2(r0, r1), scale2) : [interpolator(0), interpolator(1)];
+    };
+  }
+  scale2.range = range2(interpolate$2);
+  scale2.rangeRound = range2(interpolateRound);
+  scale2.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale2) : unknown;
+  };
+  return function(t) {
+    transform = t, t02 = t(x02), t12 = t(x12), k10 = t02 === t12 ? 0 : 1 / (t12 - t02);
+    return scale2;
+  };
+}
+function copy(source, target) {
+  return target.domain(source.domain()).interpolator(source.interpolator()).clamp(source.clamp()).unknown(source.unknown());
+}
+function sequential() {
+  var scale2 = linearish(transformer()(identity$3));
+  scale2.copy = function() {
+    return copy(scale2, sequential());
+  };
+  return initInterpolator.apply(scale2, arguments);
+}
 function constant$7(x2) {
   return function constant2() {
     return x2;
@@ -11052,6 +11110,7 @@ const defaultChartFormatOptions = {
     gridLinesHorizontal: true,
     gridLinesVertical: false,
     ticksHeight: "100",
+    ticksWidth: "100",
     gridLinesColor: "#ccc",
     xCoordinate: "None",
     yCoordinate: "None",
@@ -11518,6 +11577,7 @@ var chartTypes = /* @__PURE__ */ ((chartTypes2) => {
   chartTypes2["CombinationArea"] = "CombinationArea";
   chartTypes2["CombinationStackArea"] = "CombinationStackArea";
   chartTypes2["TornadoDefaultEntry"] = "defaultEntry";
+  chartTypes2["ClevelandDotPlot"] = "ClevelandDotPlot";
   return chartTypes2;
 })(chartTypes || {});
 const connecterCurve = {
@@ -12476,7 +12536,7 @@ function initYaxis$1(gTag, formatOptions, dataTableHeight, yLabel, yAxisLeft, in
     );
     yAxisG.select(".domain").style("shape-rendering", "crispEdges").style("stroke", formatOptions.yAxisLabel.yAxisColor).attr(
       "stroke-width",
-      formatOptions.yAxisLabel.yAxisWidth ? formatOptions.yAxisLabel.yAxisWidth : formatOptions.plotArea.plotAreaBorderThickness
+      formatOptions.yAxisLabel.yAxisWidth ?? formatOptions.plotArea.plotAreaBorderThickness
     );
   } catch (error) {
     throw error;
@@ -15813,6 +15873,11 @@ function getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeig
   const actualTickHeight = (innerHeight2 - dataTableHeightIfPreset) * tickHeightPercentage / 100;
   return formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? -actualTickHeight * axisPositionMultiplier : 0 : 0;
 }
+function getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth = 0) {
+  const tickHeightPercentage = parseFloat(formatOptions.plotArea.ticksWidth) || 100;
+  const actualTickWidth = (innerWidth2 - seriesLabelWidth) * tickHeightPercentage / 100;
+  return formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -actualTickWidth : 0 : 0;
+}
 const chartProperties = {
   color: "defaultColor",
   name: "",
@@ -17095,7 +17160,6 @@ const ColumnChart = ({
   let xScale;
   let xScaleForLegends;
   let calculatedRange;
-  let seriesLabelWidth;
   let yAxisLeft;
   let xAxis;
   let yAxisRight;
@@ -17103,6 +17167,7 @@ const ColumnChart = ({
   let filteredData = [];
   let scrollPosition = 0;
   let visibleBars = 0;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let chartJSON = {
     dimensionList,
     chartType,
@@ -17285,8 +17350,12 @@ const ColumnChart = ({
     let yMinLeft = Infinity;
     let yMaxRight = -Infinity;
     let yMinRight = Infinity;
+    let seriesMinValue = Infinity;
+    let seriesMaxValue = -Infinity;
     seriesData.forEach((series) => {
       legendList.push(series.properties.legendUniqueId);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       series.data.forEach((point2) => {
         allChartData.push(point2);
         if (series.properties.axis === "Secondary") {
@@ -17297,7 +17366,17 @@ const ColumnChart = ({
           yMaxLeft = Math.max(yMaxLeft, point2.value);
           yMinLeft = Math.min(yMinLeft, point2.value);
         }
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
       });
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -17349,19 +17428,6 @@ const ColumnChart = ({
       ]);
     }
     calculatedRange = [0, innerWidth2];
-    if (formatOptions.seriesLabel.seriesLabelVisibility) {
-      let labelObj = prepareDataForSeriesLabel(
-        innerWidth2,
-        yScaleLeft,
-        formatOptions,
-        filteredData,
-        yScaleRight,
-        isSecondaryAxisDrawn
-      );
-      labelObj.labelArray;
-      formatOptions.seriesLabel.seriesLabelPosition == "Right" && (seriesLabelWidth = labelObj.heightWidth[0]);
-      formatOptions.seriesLabel.seriesLabelPosition == "Right" ? calculatedRange = [0, innerWidth2 - labelObj.heightWidth[0]] : calculatedRange = [labelObj.heightWidth[0], innerWidth2];
-    }
     getXScale();
   };
   const getXScale = () => {
@@ -17389,7 +17455,7 @@ const ColumnChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -17413,7 +17479,7 @@ const ColumnChart = ({
       ).ticks(
         seondaryResponsiveLablesObj.secondaryCustomTickValue ?? innerHeight2 / 30
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickPadding(8).tickSizeOuter(0);
     }
   };
@@ -17459,7 +17525,7 @@ const ColumnChart = ({
       const bars = columnGroupsEnter.append("rect").attr("x", (d) => xScaleForLegends(d.legendUniqueId)).attr("width", xScaleForLegends.bandwidth()).attr("y", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return yScale(0);
-      }).attr("height", 0).attr("fill", data2.properties.color).attr(
+      }).attr("height", 0).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
         "stroke-dasharray",
         (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
       ).attr("stroke-width", (d) => `${data2.properties.stackBorderWidth}px`).attr(
@@ -17502,7 +17568,7 @@ const ColumnChart = ({
             },
             {
               key: "Legend",
-              value: d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend
+              value: data2.properties.alias
             }
           ],
           formatOptions,
@@ -18085,7 +18151,12 @@ const CustomColumnChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
+        // formatOptions.plotArea.gridLinesVisibility
+        //   ? formatOptions.plotArea.gridLinesHorizontal
+        //     ? -innerWidth + (seriesLabelWidth ? seriesLabelWidth : 0)
+        //     : 0
+        //   : 0,
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -18110,13 +18181,27 @@ const CustomColumnChart = ({
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
+      // formatOptions.plotArea.gridLinesVisibility
+      //   ? formatOptions.plotArea.gridLinesVertical
+      //     ? formatOptions.plotArea.gridLinesVertical
+      //       ? -(dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight)
+      //       : parseFloat(formatOptions.plotArea.ticksHeight) *
+      //       ((dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight) /
+      //         100) *
+      //       (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
+      //     : 0
+      //   : 0,
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -18727,11 +18812,11 @@ const LayeredColumnChart = ({
   let xScale;
   let xScaleForLegends;
   let calculatedRange;
-  let seriesLabelWidth;
   let yAxisLeft;
   let xAxis;
   let filteredDimension;
   let filteredData = [];
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let scrollPosition = 0;
   let visibleBars = 2;
   let scrollbarVisible = false;
@@ -18906,13 +18991,27 @@ const LayeredColumnChart = ({
     let yMinLeft = Infinity;
     let yMaxRight = -Infinity;
     let yMinRight = Infinity;
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series) => {
       legendList.push(series.properties.legendUniqueId);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       series.data.forEach((point2) => {
         allChartData.push(point2);
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         yMaxLeft = Math.max(yMaxLeft, point2.value);
         yMinLeft = Math.min(yMinLeft, point2.value);
       });
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -18962,19 +19061,6 @@ const LayeredColumnChart = ({
       ]);
     }
     calculatedRange = [0, innerWidth2];
-    if (formatOptions.seriesLabel.seriesLabelVisibility) {
-      let labelObj = prepareDataForSeriesLabel(
-        innerWidth2,
-        yScaleLeft,
-        formatOptions,
-        filteredData,
-        yScaleRight,
-        isSecondaryAxisDrawn
-      );
-      labelObj.labelArray;
-      formatOptions.seriesLabel.seriesLabelPosition == "Right" && (seriesLabelWidth = labelObj.heightWidth[0]);
-      formatOptions.seriesLabel.seriesLabelPosition == "Right" ? calculatedRange = [0, innerWidth2 - labelObj.heightWidth[0]] : calculatedRange = [labelObj.heightWidth[0], innerWidth2];
-    }
   };
   const getXScale = () => {
     xScaleForLegends = band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
@@ -19002,7 +19088,7 @@ const LayeredColumnChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -19010,7 +19096,21 @@ const LayeredColumnChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight)
+      // formatOptions.plotArea.gridLinesVisibility
+      //   ? formatOptions.plotArea.gridLinesVertical
+      //     ? formatOptions.plotArea.gridLinesVertical
+      //       ? -(dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight)
+      //       : parseFloat(formatOptions.plotArea.ticksHeight) *
+      //       ((dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight) /
+      //         100) *
+      //       (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
+      //     : 0
+      //   : 0
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -19049,7 +19149,7 @@ const LayeredColumnChart = ({
       }).attr("height", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
         return Math.abs(yScale(d.value) - yScale(0));
-      }).attr("fill", data2.properties.color).attr(
+      }).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
         "stroke-dasharray",
         (d) => data2.properties.stackBorderStyle == 2 ? "5,3" : "0"
       ).attr("stroke-width", () => `${data2.properties.stackBorderWidth}px`).attr(
@@ -19082,7 +19182,7 @@ const LayeredColumnChart = ({
             },
             {
               key: "Legend",
-              value: d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend
+              value: d.properties.alias
             }
           ],
           formatOptions,
@@ -19108,7 +19208,6 @@ const LayeredColumnChart = ({
   const drawColumnChart = () => {
     getXScale();
     getXAxis();
-    getChartType(filteredData);
     initXaxis$1(
       gTag,
       chartJSON,
@@ -19126,6 +19225,7 @@ const LayeredColumnChart = ({
       filteredDimension,
       xScale
     );
+    getChartType(filteredData);
     commonAnnotations(
       seriesData,
       xScale,
@@ -19246,6 +19346,7 @@ const StackColumnChart = ({
   let yScaleRight;
   let xScale;
   let calculatedRange;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let yAxisLeft;
   let xAxis;
   let filteredDimension;
@@ -19421,13 +19522,27 @@ const StackColumnChart = ({
   const preProcessChartData = () => {
     const allChartData = [];
     const legendList = [];
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series, index2) => {
       const prefixedLegend = `${index2}~$~${series.properties.legend}`;
       series.properties.legend = prefixedLegend;
       legendList.push(prefixedLegend);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       for (const point2 of series.data) {
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         allChartData.push(point2);
       }
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -19495,7 +19610,7 @@ const StackColumnChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickValues(
         respParams.autoLabelFlag ? void 0 : respParams.yAxisLabelArray
       ).ticks(respParams.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -19533,7 +19648,7 @@ const StackColumnChart = ({
     };
     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";
+      return colorScaleMap.get(props.legendUniqueId)?.(d.data[d.key]) ?? props?.color ?? "gray";
     }).attr("stroke", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
       return props?.stackBorderStyle == 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
@@ -19564,7 +19679,7 @@ const StackColumnChart = ({
           },
           {
             key: "Legend",
-            value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key
+            value: d.properties.alias
           }
         ],
         formatOptions,
@@ -19961,7 +20076,7 @@ const NormalizedStackColumnChart = ({
   let yScaleRight;
   let xScale;
   let calculatedRange;
-  let seriesLabelWidth;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let yAxisLeft;
   let xAxis;
   let filteredDimension;
@@ -20140,13 +20255,27 @@ const NormalizedStackColumnChart = ({
   const preProcessChartData = () => {
     const allChartData = [];
     const legendList = [];
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series, index2) => {
       const prefixedLegend = `${index2}~$~${series.properties.legend}`;
       series.properties.legend = prefixedLegend;
       legendList.push(prefixedLegend);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       for (const point2 of series.data) {
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         allChartData.push(point2);
       }
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -20208,7 +20337,7 @@ const NormalizedStackColumnChart = ({
         true
       );
       labelObj.labelArray;
-      formatOptions.seriesLabel.seriesLabelPosition == "Right" && (seriesLabelWidth = labelObj.heightWidth[0]);
+      formatOptions.seriesLabel.seriesLabelPosition == "Right" && labelObj.heightWidth[0];
       formatOptions.seriesLabel.seriesLabelPosition == "Right" ? calculatedRange = [0, innerWidth2 - labelObj.heightWidth[0]] : calculatedRange = [labelObj.heightWidth[0], innerWidth2];
     }
   };
@@ -20218,7 +20347,7 @@ const NormalizedStackColumnChart = ({
   const initAxis = () => {
     {
       yAxisLeft = axisLeft(yScaleLeft).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
         "%"
@@ -20227,7 +20356,21 @@ const NormalizedStackColumnChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
+      // formatOptions.plotArea.gridLinesVisibility
+      //   ? formatOptions.plotArea.gridLinesVertical
+      //     ? formatOptions.plotArea.gridLinesVertical
+      //       ? -(dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight)
+      //       : parseFloat(formatOptions.plotArea.ticksHeight) *
+      //       ((dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight) /
+      //         100) *
+      //       (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
+      //     : 0
+      //   : 0
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -20265,7 +20408,7 @@ const NormalizedStackColumnChart = ({
     };
     const rectsEnter = rects.enter().append("rect").attr("x", (d) => xScale(d.data.dimension) - columnWidth / 2).attr("width", columnWidth).attr("y", yScaleLeft(0)).attr("height", 0).attr("fill", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
-      return props?.color || "gray";
+      return colorScaleMap.get(props.legendUniqueId)?.(d.data[d.key]) ?? props?.color ?? "gray";
     }).attr("stroke", (d, i, nodes) => {
       const { props } = getPropsForRect(nodes, i);
       return props?.stackBorderStyle === 0 ? "none" : formatOptions.column.stackBorderVisibility ? props.stackBorderColor : "none";
@@ -20299,7 +20442,7 @@ const NormalizedStackColumnChart = ({
           },
           {
             key: "Legend",
-            value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key
+            value: d.properties.alias
           }
         ],
         formatOptions,
@@ -21418,7 +21561,7 @@ const ColumnHistogramChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + 0 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -21446,7 +21589,21 @@ const ColumnHistogramChart = ({
         false
       )
     ).tickSize(
-      formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesVertical ? formatOptions.plotArea.gridLinesVertical ? -(dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) : parseFloat(formatOptions.plotArea.ticksHeight) * ((dataTableHeight > 0 ? innerHeight2 - dataTableHeight : innerHeight2) / 100) * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) : 0 : 0
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight)
+      // formatOptions.plotArea.gridLinesVisibility
+      //   ? formatOptions.plotArea.gridLinesVertical
+      //     ? formatOptions.plotArea.gridLinesVertical
+      //       ? -(dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight)
+      //       : parseFloat(formatOptions.plotArea.ticksHeight) *
+      //       ((dataTableHeight > 0
+      //         ? innerHeight - dataTableHeight
+      //         : innerHeight) /
+      //         100) *
+      //       (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1)
+      //     : 0
+      //   : 0,
     ).tickSizeOuter(0);
     formatOptions.bins.binsCalculation === "Automatic" ? xAxis.ticks(thresholds) : xAxis.tickValues(periods).ticks(innerWidth2 / 50);
   };
@@ -21943,7 +22100,7 @@ const LineChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -21965,17 +22122,18 @@ const LineChart = ({
       ).tickValues(
         responsiveSecondaryLablesObj.autoLabelFlag ? void 0 : responsiveSecondaryLablesObj.secondaryYAxisLabelArray
       ).ticks(responsiveSecondaryLablesObj.secondaryCustomTickValue).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).tickPadding(8).tickSizeOuter(0);
     }
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
-    lineData.forEach((lData) => {
+    const reversedLineData = [...lineData].reverse();
+    reversedLineData.forEach((lData) => {
       lData.data.forEach((cData) => {
         cData.hideZero = lData.properties.hideZeroValues;
         cData.axis = lData.properties.axis;
@@ -21989,7 +22147,7 @@ const LineChart = ({
     ).defined(
       (d) => d.hideZero || chartJSON.hideZeroValues ? Boolean(d.value) : true
     ).curve(getCurveType(formatOptions));
-    let lines = gTag.selectAll(".parentGroup").data([lineData]);
+    let lines = gTag.selectAll(".parentGroup").data([reversedLineData]);
     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");
@@ -22023,7 +22181,7 @@ const LineChart = ({
     lineGroups.exit().remove();
     lineMarkers(
       lines,
-      lineData,
+      reversedLineData,
       "None",
       xScale,
       yScaleLeft,
@@ -22490,7 +22648,7 @@ const StackLineChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -22498,7 +22656,7 @@ const StackLineChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -23001,7 +23159,7 @@ const NormalisedStackLineChart = ({
   const initAxis = () => {
     {
       yAxisLeft = axisLeft(yScaleLeft).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
         "%"
@@ -23010,7 +23168,7 @@ const NormalisedStackLineChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -23250,6 +23408,7 @@ const HorizontalBarChart = ({
   const barChart = true;
   let isSecondaryAxisDrawn = false;
   const isNormalizedChart = false;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let customYaxisMinValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMinText) : void 0;
   let customYaxisMaxValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMaxText) : void 0;
   let secondaryCustomYaxisMinValue = formatOptions.secondaryYAxisLabel.secondaryYAxisIntervalsVisibility ? parseFloat(
@@ -23463,8 +23622,12 @@ const HorizontalBarChart = ({
     let yMinLeft = Infinity;
     let yMaxRight = -Infinity;
     let yMinRight = Infinity;
+    let seriesMinValue = Infinity;
+    let seriesMaxValue = -Infinity;
     seriesData.forEach((series) => {
       legendList.push(series.properties.legendUniqueId);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       series.data.forEach((point2) => {
         allChartData.push(point2);
         if (series.properties.axis === "Secondary") {
@@ -23475,7 +23638,17 @@ const HorizontalBarChart = ({
           yMaxLeft = Math.max(yMaxLeft, point2.value);
           yMinLeft = Math.min(yMinLeft, point2.value);
         }
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
       });
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -23627,7 +23800,7 @@ const HorizontalBarChart = ({
       const bars = columnGroupsEnter.append("rect").attr("y", (d) => yScaleLegends(d.legendUniqueId)).attr("height", yScaleLegends.bandwidth()).attr("x", (d) => {
         const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
         return d.value >= 0 ? xScaleUsed(0) : xScaleUsed(0);
-      }).attr("width", 0).attr("fill", data2.properties.color).attr(
+      }).attr("width", 0).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
         "stroke-dasharray",
         (d) => d.properties.stackBorderStyle == 2 ? "5,3" : "0"
       ).attr("stroke-width", (d) => `${d.properties.stackBorderWidth}px`).attr(
@@ -23799,6 +23972,7 @@ const StackHorizontalChart = ({
   let secondaryYLabel;
   let maxNumberForPrimaryAxis;
   let maxNumberForSecondaryAxis;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let innerWidth2;
   let innerHeight2;
   let width;
@@ -23964,13 +24138,27 @@ const StackHorizontalChart = ({
   const preProcessChartData = () => {
     const allChartData = [];
     const legendList = [];
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series, index2) => {
       const prefixedLegend = `${index2}~$~${series.properties.legend}`;
       series.properties.legend = prefixedLegend;
       legendList.push(prefixedLegend);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       for (const point2 of series.data) {
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         allChartData.push(point2);
       }
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -24098,10 +24286,10 @@ const StackHorizontalChart = ({
       );
       return { props: seriesData[groupIndex]?.properties, groupIndex };
     };
-    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 baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr("fill", (d, i, nodes) => {
+      const { props } = getPropsForRect(nodes, i);
+      return colorScaleMap.get(props.legendUniqueId)?.(d.data[d.key]) ?? 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(
@@ -24132,7 +24320,7 @@ const StackHorizontalChart = ({
           },
           {
             key: "Legend",
-            value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key
+            value: d.properties.alias
           }
         ],
         formatOptions,
@@ -24508,6 +24696,7 @@ const NormalizedStackHorizontalBarChart = ({
   let innerHeight2;
   let width;
   let height;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let svg;
   let gTag;
   let xScaleBottom;
@@ -24668,13 +24857,27 @@ const NormalizedStackHorizontalBarChart = ({
   const preProcessChartData = () => {
     const allChartData = [];
     const legendList = [];
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series, index2) => {
       const prefixedLegend = `${index2}~$~${series.properties.legend}`;
       series.properties.legend = prefixedLegend;
       legendList.push(prefixedLegend);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       for (const point2 of series.data) {
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         allChartData.push(point2);
       }
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -24783,10 +24986,10 @@ const NormalizedStackHorizontalBarChart = ({
       );
       return { props: seriesData[groupIndex]?.properties, groupIndex };
     };
-    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 baseRects = rects.enter().append("rect").merge(rects).attr("y", (d) => yScale(d.data.dimension) - columnWidth / 2).attr("height", columnWidth).attr("fill", (d, i, nodes) => {
+      const { props } = getPropsForRect(nodes, i);
+      return colorScaleMap.get(props.legendUniqueId)?.(d.data[d.key]) ?? 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(
@@ -24817,7 +25020,7 @@ const NormalizedStackHorizontalBarChart = ({
           },
           {
             key: "Legend",
-            value: d.key.includes("~$~") ? d.key.split("~$~")[1] : d.key
+            value: d.properties.alias
           }
         ],
         formatOptions,
@@ -24951,6 +25154,7 @@ const LayeredHorizontalBarChart = ({
   const dimensionList = data.DimensionList;
   const barChart = true;
   const isSecondaryAxisDrawn = false;
+  const colorScaleMap = /* @__PURE__ */ new Map();
   let customYaxisMinValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMinText) : void 0;
   let customYaxisMaxValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMaxText) : void 0;
   let margin;
@@ -25134,13 +25338,27 @@ const LayeredHorizontalBarChart = ({
     let yMinLeft = Infinity;
     let yMaxRight = -Infinity;
     let yMinRight = Infinity;
+    let seriesMaxValue = -Infinity;
+    let seriesMinValue = Infinity;
     seriesData.forEach((series) => {
       legendList.push(series.properties.legendUniqueId);
+      seriesMaxValue = -Infinity;
+      seriesMinValue = Infinity;
       series.data.forEach((point2) => {
         allChartData.push(point2);
+        seriesMaxValue = Math.max(seriesMaxValue, point2.value);
+        seriesMinValue = Math.min(seriesMinValue, point2.value);
         yMaxLeft = Math.max(yMaxLeft, point2.value);
         yMinLeft = Math.min(yMinLeft, point2.value);
       });
+      if (series.properties.setColorScale) {
+        colorScaleMap.set(
+          series.properties.legendUniqueId,
+          sequential().domain([seriesMinValue, seriesMaxValue]).interpolator(
+            interpolateRgb$1(series.properties.startColor, series.properties.endColor)
+          )
+        );
+      }
     });
     chartJSON.chartData = allChartData;
     chartJSON.legendList = legendList;
@@ -25270,7 +25488,7 @@ const LayeredHorizontalBarChart = ({
       }).attr(
         "width",
         (d) => d.value > 0 ? customYaxisMaxValue && d.value > customYaxisMaxValue ? xScaleBottom(customYaxisMaxValue) - xScaleBottom(0) : xScaleBottom(d.value) - xScaleBottom(0) : Math.abs(xScaleBottom(0) - xScaleBottom(d.value))
-      ).attr("fill", data2.properties.color).attr(
+      ).attr("fill", (d) => colorScaleMap.get(data2.properties.legendUniqueId)?.(d.value) ?? data2.properties.color).attr(
         "stroke-dasharray",
         (d) => d.stackBorderStyle === 2 ? "5,3" : "0"
       ).attr("stroke-width", (d) => `${d.stackBorderWidth}px`).attr(
@@ -25303,7 +25521,7 @@ const LayeredHorizontalBarChart = ({
             },
             {
               key: "Legend",
-              value: d.legend.includes("~$~") ? d.legend.split("~$~")[1] : d.legend
+              value: data2.properties.alias
             }
           ],
           formatOptions,
@@ -26485,7 +26703,7 @@ const AreaChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -26515,7 +26733,7 @@ const AreaChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -27051,7 +27269,7 @@ const StackAreaChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
         )
       ).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).tickValues(
         responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
       ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
@@ -27059,7 +27277,7 @@ const StackAreaChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -27167,7 +27385,6 @@ const StackAreaChart = ({
   const drawLineChart = () => {
     getXScale();
     getXAxis();
-    getChartType(filteredData);
     initXaxis$1(
       gTag,
       chartJSON,
@@ -27185,6 +27402,7 @@ const StackAreaChart = ({
       filteredDimension,
       xScale
     );
+    getChartType(filteredData);
     stacklineAnnotations(
       stackChartData,
       xScale,
@@ -27601,7 +27819,7 @@ const NormalizedStackAreaChart = ({
   const initAxis = () => {
     {
       yAxisLeft = axisLeft(yScaleLeft).tickSize(
-        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 + (seriesLabelWidth ? seriesLabelWidth : 0) : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2, seriesLabelWidth)
       ).ticks(
         dataTableHeight > 0 ? (innerHeight2 - dataTableHeight) / 80 : innerHeight2 / 80,
         "%"
@@ -27610,7 +27828,7 @@ const NormalizedStackAreaChart = ({
   };
   const getXAxis = () => {
     xAxis = axisBottom(xScale).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
+      getVerticalGridLinesTickSize(formatOptions, innerHeight2, dataTableHeight, true)
     ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerWidth2));
   };
   const getChartType = (lineData) => {
@@ -28331,7 +28549,7 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable }) => {
         ${value2}
       </span>`;
           }
-          if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && d.data[0].value !== void 0) {
+          if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && d.data.data[0].value !== void 0) {
             htmlString += `<span style="
         font-size: ${d.data.properties.valueFontSize}px;
         color: ${d.data.properties.valueFontColor};
@@ -28340,7 +28558,7 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable }) => {
         font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "300"};
         font-family: ${d.data.properties.valueFont};
         display: block;">
-        ${format(".2s")(d.data[0].value)}
+        ${format(".2s")(d.data.data[0].value)}
       </span>`;
           }
           return htmlString;
@@ -28764,7 +28982,7 @@ const DonutChart = ({
           ${value2}
         </span>`;
             }
-            if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && d.data[0].value !== void 0) {
+            if (chartFormatOptions.plotArea.plotAreaAbsoluteValue && d.data.data[0].value !== void 0) {
               htmlString += `<span style="
           font-size: ${d.data.properties.valueFontSize}px;
           color: ${d.data.properties.valueFontColor};
@@ -28775,7 +28993,7 @@ const DonutChart = ({
           font-weight: ${d.data.properties.valueFontStyle.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "300"};
           font-family: ${d.data.properties.valueFont};
           display: block;">
-          ${format(".2s")(d.data[0].value)}
+          ${format(".2s")(d.data.data[0].value)}
         </span>`;
             }
             return htmlString;
@@ -35319,8 +35537,9 @@ const SankeyChart = ({
   data,
   chartId
 }) => {
-  let sankeyLinks = JSON.parse(JSON.stringify(data.sankeyLinks));
-  let sankeyNodes = JSON.parse(JSON.stringify(data.sankeyNodes));
+  let sankeyLinks = JSON.parse(JSON.stringify(data?.sankeyLinks));
+  let sankeyNodes = JSON.parse(JSON.stringify(data?.sankeyNodes));
+  if (!data) return null;
   const svgRef = useRef();
   let chartFormatOptions;
   let width;
@@ -54039,8 +54258,8 @@ const BubbleChart = ({
           formatOptions.xAxisLabel.xAxisLabelDecimalPrecision ?? "2"
         )
       ).tickSize(
-        getVerticalGridLinesTickSize(formatOptions, innerHeight2, 0)
-      ).tickValues(autoLabelFlag ? void 0 : xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
+        getVerticalGridLinesTickSize(formatOptions, innerHeight2, 0, true)
+      ).tickValues(xAxisLabelArray.length > 0 ? xAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initXaxis(
         chartAreaTagG,
         chartFormatOptions,
@@ -54073,7 +54292,7 @@ const BubbleChart = ({
           formatOptions.yAxisLabel.yAxisLabelDecimalPrecision ?? "2"
         )
       ).tickSize(
-        chartFormatOptions.plotArea.gridLinesVisibility ? chartFormatOptions.plotArea.gridLinesHorizontal ? -innerWidth2 : 0 : 0
+        getHorizontalGridLinesTickSize(formatOptions, innerWidth2)
       ).tickValues(yAxisLabelArray.length > 0 ? yAxisLabelArray : null).ticks(customTickValue).tickPadding(8).tickSizeOuter(0);
       initYaxis(
         chartAreaTagG,
@@ -56064,9 +56283,668 @@ const TornadoChart = ({
     }
   ) });
 };
+const ClevelandDotPlot = ({
+  isDateType,
+  formatOptions,
+  data,
+  isReportEditable,
+  onDataLabelCoordinatesChange
+}) => {
+  const chartId = crypto.randomUUID();
+  let columnWidth = 0;
+  const chartType = chartTypes.ClevelandDotPlot;
+  const svgRef = useRef();
+  const seriesData = generalizedChartData(
+    data.ChartData,
+    data.DimensionList
+  );
+  const dimensionList = data.DimensionList;
+  const barChart = true;
+  const isSecondaryAxisDrawn = false;
+  let customYaxisMinValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMinText) : void 0;
+  let customYaxisMaxValue = formatOptions.yAxisLabel.yAxisIntervalsVisibility ? parseFloat(formatOptions.yAxisLabel.yAxisMaxText) : void 0;
+  let margin;
+  let yLabel;
+  let xLabel;
+  let yTitle;
+  let xTitle;
+  let dimensionHeightWidthArray;
+  let chartTitleHeight;
+  let secondaryAxisTitleWidth;
+  let legendMargin;
+  let secondaryYLabel;
+  let maxNumberForPrimaryAxis;
+  let maxNumberForSecondaryAxis;
+  let innerWidth2;
+  let innerHeight2;
+  let width;
+  let height;
+  let svg;
+  let gTag;
+  let xScaleBottom;
+  let yScale;
+  let calculatedRange;
+  let xAxisBottom;
+  let yAxis;
+  let filteredDimension;
+  let filteredData = [];
+  let scrollPosition = 0;
+  let visibleBars = 2;
+  let scrollbarVisible = false;
+  let stackChartData = [];
+  const isNormalizedChart = false;
+  let chartJSON = {
+    dimensionList,
+    chartType,
+    chartData: [],
+    formatOptions,
+    legendList: [],
+    secondaryAxisDrawn: false,
+    yMaxLeft: 0,
+    yMaxRight: 0,
+    yMinLeft: 0,
+    yMinRight: 0,
+    hideZeroValues: false,
+    formattedDimensionListMap: /* @__PURE__ */ new Map()
+  };
+  useEffect(() => {
+    try {
+      createStackHorizontalBarChart();
+    } catch (error) {
+      logError$2(
+        "StackStackHorizontalBarchart",
+        "createStackHorizontalBarChart",
+        error
+      );
+    }
+  }, [formatOptions]);
+  const createStackHorizontalBarChart = () => {
+    ({ formatOptions, svg, width, height } = firstFunctionBeforeRender$1(
+      svgRef,
+      formatOptions
+    ));
+    preProcessChartData();
+    ({ maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } = customYscaleLabelFormatting$1(
+      // for calculating primary/secondary axis max number so that we can calculate margin accordinglt
+      formatOptions,
+      chartJSON.yMinLeft,
+      chartJSON.yMaxLeft,
+      chartJSON.yMinRight,
+      chartJSON.yMaxRight
+    ));
+    ({
+      margin,
+      yLabel,
+      xLabel,
+      yTitle,
+      xTitle,
+      dimensionHeightWidthArray,
+      chartTitleHeight,
+      secondaryAxisTitleWidth,
+      legendMargin,
+      secondaryYLabel,
+      visibleBars,
+      columnWidth,
+      scrollbarVisible
+    } = marginCalculation(
+      // for all margin related calculations
+      width,
+      height,
+      maxNumberForPrimaryAxis,
+      maxNumberForSecondaryAxis,
+      chartJSON.yMaxLeft,
+      formatOptions,
+      chartJSON.legendList,
+      chartJSON.dimensionList,
+      chartJSON.yMaxRight,
+      isSecondaryAxisDrawn,
+      isNormalizedChart,
+      isDateType,
+      barChart,
+      chartJSON
+    ));
+    setSVGContainer(margin);
+    initSvg$1(
+      // for svg creation
+      svg,
+      width,
+      height,
+      formatOptions
+    );
+    gTag = initChartArea$1(svg, margin);
+    initPlotArea(gTag, formatOptions, 0, innerWidth2, innerHeight2, chartType);
+    initScale();
+    initAxis();
+    initXaxisBar(
+      formatOptions,
+      gTag,
+      yLabel,
+      innerHeight2,
+      innerWidth2,
+      xAxisBottom
+    );
+    setXaxistitle$1(
+      formatOptions,
+      barChart,
+      svg,
+      margin,
+      xLabel,
+      height,
+      xTitle,
+      chartJSON.chartType,
+      yLabel,
+      innerWidth2,
+      innerHeight2
+    );
+    yAxistitle$1(
+      innerHeight2,
+      formatOptions,
+      0,
+      barChart,
+      svg,
+      margin,
+      yTitle,
+      yLabel
+    );
+    setChartTitle(svg, formatOptions, width, chartTitleHeight);
+    drawLegends(
+      height,
+      svg,
+      dimensionHeightWidthArray,
+      chartTitleHeight,
+      width,
+      legendMargin,
+      formatOptions,
+      seriesData,
+      chartId,
+      staticLegendShape.rectangle
+    );
+    horizontalScrollBar(
+      seriesData,
+      height,
+      width,
+      svg,
+      margin,
+      innerWidth2,
+      scrollbarVisible,
+      visibleBars,
+      chartJSON,
+      scrollPosition,
+      false,
+      setAndUpdateChartData,
+      barChart
+    );
+  };
+  const preProcessChartData = () => {
+    const allChartData = [];
+    const legendList = [];
+    let formatedDimensionList = [];
+    let yMaxLeft = -Infinity;
+    let yMinLeft = Infinity;
+    let yMaxRight = -Infinity;
+    let yMinRight = Infinity;
+    seriesData.forEach((series) => {
+      legendList.push(series.properties.legendUniqueId);
+      series.data.forEach((point2) => {
+        allChartData.push(point2);
+        yMaxLeft = Math.max(yMaxLeft, point2.value);
+        yMinLeft = Math.min(yMinLeft, point2.value);
+      });
+    });
+    chartJSON.chartData = allChartData;
+    chartJSON.legendList = legendList;
+    chartJSON.yMaxLeft = yMaxLeft;
+    chartJSON.yMinLeft = yMinLeft > 0 ? 0 : yMinLeft;
+    chartJSON.yMaxRight = yMaxRight;
+    chartJSON.yMinRight = yMinRight;
+    formatedDimensionList = isDateType ? setDateFormats(
+      formatOptions.xAxisLabel.xAxisNumberFormat,
+      chartJSON.dimensionList
+    ).map((d) => d) : chartJSON.dimensionList;
+    formatedDimensionList = isDateType ? setDateFormats(
+      formatOptions.xAxisLabel.xAxisNumberFormat,
+      chartJSON.dimensionList
+    ).map((d) => d) : chartJSON.dimensionList;
+    chartJSON.dimensionList.forEach((dim, i) => {
+      chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
+      chartJSON.formattedDimensionListMap.set(dim, formatedDimensionList[i]);
+    });
+    filteredData = JSON.parse(JSON.stringify(seriesData));
+    if (!formatOptions.plotArea.fitChart) {
+      filteredDimension = chartJSON.dimensionList.slice(
+        scrollPosition,
+        scrollPosition + visibleBars
+      );
+    } else {
+      filteredDimension = chartJSON.dimensionList;
+    }
+    if (formatOptions.plotArea.hideZeroValues) {
+      chartJSON.hideZeroValues = true;
+    }
+  };
+  const initScale = () => {
+    let yAxisLabelArray = responsiveYaxisLabel$1(
+      customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+      chartJSON.yMinLeft,
+      innerHeight2,
+      formatOptions,
+      chartJSON,
+      customYaxisMinValue,
+      customYaxisMaxValue,
+      barChart,
+      innerWidth2
+    ).yAxisLabelArray;
+    chartJSON.yMaxLeft = yAxisLabelArray[yAxisLabelArray.length - 1];
+    chartJSON.yMinLeft = yAxisLabelArray[0];
+    {
+      xScaleBottom = linear$1().domain([
+        chartJSON.yMinLeft >= 0 ? customYaxisMinValue !== void 0 && !Number.isNaN(customYaxisMinValue) ? customYaxisMinValue : 0 : chartJSON.yMinLeft < 0 ? chartJSON.yMinLeft * 1.1 : chartJSON.yMinLeft * 0.9,
+        chartJSON.yMaxLeft <= 0 ? 0 : customYaxisMaxValue !== void 0 && !Number.isNaN(customYaxisMaxValue) ? customYaxisMaxValue : chartJSON.yMaxLeft * 1.1
+      ]).range([0, innerWidth2]);
+    }
+    calculatedRange = [innerHeight2, 0];
+    getYScale();
+  };
+  const getYScale = () => {
+    band().domain(["layeredLegend"]).range([0, columnWidth]).paddingInner(
+      chartJSON.legendList.length > 1 ? 0.3 * parseFloat(formatOptions.plotArea.plotAreaSeriesWidth) / 100 : 0
+    );
+    yScale = point$7().domain(filteredDimension).range(calculatedRange).padding(0.5);
+  };
+  const initAxis = () => {
+    getYAxis();
+    {
+      let responsiveLablesObj = responsiveYaxisLabel$1(
+        customYaxisMaxValue ? customYaxisMaxValue : chartJSON.yMaxLeft,
+        chartJSON.yMinLeft,
+        innerHeight2,
+        formatOptions,
+        chartJSON,
+        customYaxisMinValue,
+        customYaxisMaxValue,
+        barChart,
+        innerWidth2
+      );
+      xAxisBottom = axisBottom(xScaleBottom).tickFormat(
+        (d) => getNumberWithFormat(
+          d,
+          formatOptions.yAxisLabel.yAxisDisplayUnits,
+          formatOptions.yAxisLabel.yAxisNumberFormat,
+          formatOptions.yAxisLabel.yAxisLabelDecimalPrecision
+        )
+      ).tickSize(
+        formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? -innerHeight2 : 0 : 0
+      ).tickValues(
+        responsiveLablesObj.autoLabelFlag ? void 0 : responsiveLablesObj.yAxisLabelArray
+      ).ticks(responsiveLablesObj.customTickValue).tickPadding(8).tickSizeOuter(0);
+    }
+  };
+  const getYAxis = () => {
+    yAxis = axisLeft(yScale).tickSize(
+      formatOptions.plotArea.gridLinesVisibility ? formatOptions.plotArea.gridLinesHorizontal ? parseFloat(formatOptions.plotArea.ticksHeight) * innerWidth2 * (formatOptions.xAxisLabel.xAxisPosition == "1" ? 1 : -1) * 0.01 : 0 : 0
+    ).tickSizeOuter(0).tickValues(responsiveXaxisLabel(filteredDimension, innerHeight2));
+  };
+  const getChartType = (lineData) => {
+    lineData.forEach((lData) => {
+      lData.data.forEach((cData) => {
+        cData.hideZero = lData.properties.hideZeroValues;
+        cData.axis = lData.properties.axis;
+        cData["properties"] = lData.properties;
+      });
+    });
+    lineData.forEach((data2, index2) => {
+      let column = gTag.selectAll(".parentGroup").data([data2], (d) => d.properties.legendUniqueId);
+      column = column.enter().append("g").attr("class", `column parentGroup`).merge(column);
+      let columnGroups = column.selectAll(".column-group").data(data2.data, (d) => d.dimension);
+      let columnGroupsEnter = columnGroups.enter().append("g").attr("class", "column-group").attr(
+        "hoverId",
+        (data2.properties.alias || data2.properties.name || "Legend").replace(
+          /\s+/g,
+          "-"
+        )
+      ).attr(
+        "transform",
+        (d) => `translate(0,${yScale(d.dimension)})`
+      );
+      columnGroupsEnter.merge(columnGroups).attr(
+        "transform",
+        (d) => `translate(0,${yScale(d.dimension)})`
+      );
+      columnGroupsEnter.append("line").attr("class", "cleveland-line").attr("x1", (d) => xScaleBottom(0)).attr("x2", (d) => xScaleBottom(d.value)).attr("y1", 0).attr("y2", 0).attr("stroke", "#c7c7c7").attr("stroke-width", 2);
+      columnGroupsEnter.append("circle").attr("class", "cleveland-dot").attr("cx", (d) => xScaleBottom(d.value)).attr("cy", 0).attr("r", 6).attr("fill", data2.properties.color).attr("opacity", 0.9).on("mousemove", (event2, d) => {
+        showTooltipOnMouseMove(
+          [
+            {
+              key: formatOptions.xAxisTitle.xAxisTitleText,
+              value: chartJSON.formattedDimensionListMap.get(d.dimension)
+            },
+            {
+              key: formatOptions.yAxisTitle.yAxisTitleText,
+              value: getNumberWithFormat(
+                d.value,
+                formatOptions.toolTip.toolTipDisplayUnits,
+                formatOptions.toolTip.toolTipNumberFormat,
+                formatOptions.toolTip.toolTipDecimalPrecision
+              )
+            },
+            {
+              key: "Legend",
+              value: d.legend
+            }
+          ],
+          formatOptions,
+          event2,
+          data2.properties
+        );
+        let legend = (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
+        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", true);
+        selectAll('[hoverId="' + legend + '"]').classed("highlight", true).classed("unhighlight", false);
+      }).on("mouseout", () => {
+        selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
+        hideTooltipOnMouseOut();
+      });
+      columnGroups.exit().remove();
+    });
+    gTag.selectAll(".parentGroup").raise();
+  };
+  const setSVGContainer = (margin2) => {
+    innerWidth2 = width - margin2.left - margin2.right;
+    innerHeight2 = height - margin2.bottom - margin2.top;
+  };
+  const setAndUpdateChartData = (fDimension, fData, fVisibleBars) => {
+    filteredData = fData;
+    filteredDimension = fDimension;
+    visibleBars = fVisibleBars;
+    drawLineChart();
+  };
+  const drawLineChart = () => {
+    getYScale();
+    getYAxis();
+    initYaxisBar(
+      formatOptions,
+      gTag,
+      xLabel,
+      innerHeight2,
+      innerWidth2,
+      yAxis,
+      void 0,
+      xScaleBottom,
+      chartJSON.yMaxLeft,
+      filteredDimension,
+      chartType,
+      isDateType,
+      width,
+      dimensionHeightWidthArray,
+      columnWidth,
+      yScale
+    );
+    createStackLineData();
+    getChartType(filteredData);
+    commonAnnotations(
+      filteredData,
+      yScale,
+      xScaleBottom,
+      void 0,
+      // need to pass secondary axis scale if secondary axis is drawn
+      margin,
+      d3Annotation,
+      [],
+      //this.labelExcludeList,
+      [],
+      //this.individualLabelColor,
+      // [], //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
+      formatOptions,
+      chartType,
+      height,
+      width,
+      innerWidth2,
+      filteredDimension,
+      innerHeight2,
+      chartId,
+      svg,
+      onDataLabelCoordinatesChange,
+      yScale,
+      columnWidth,
+      false,
+      isReportEditable,
+      barChart
+    );
+    getConnectors();
+  };
+  const createStackLineData = () => {
+    let stackLineData2 = getStackedData(
+      filteredDimension,
+      filteredData,
+      isNormalizedChart
+    );
+    stackChartData = stack().keys(chartJSON.legendList).offset(diverging)(stackLineData2);
+    filteredData.forEach(
+      (data2, index2) => data2.data.forEach((axisData, position) => {
+        axisData["0"] = stackChartData[index2][position][0];
+        axisData["1"] = stackChartData[index2][position][1];
+      })
+    );
+    let seriesColor = formatOptions.annotation.annotationSetLabelColor;
+    stackChartData.forEach(
+      (K2, j) => K2.forEach((d) => {
+        d["key"] = K2.key;
+        K2["color"] = JSON.parse(JSON.stringify(seriesData[j].properties.color));
+        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(
+          JSON.stringify(seriesData[j].properties.hideZeroValues)
+        );
+      })
+    );
+  };
+  const getConnectors = () => {
+    try {
+      const connectorVisibility = Number(
+        formatOptions.connector?.connectorVisibility
+      );
+      if (!formatOptions.connector || connectorVisibility === 2) return;
+      const pathLineData = [];
+      const nextBarHeight = [];
+      const xaxisLabelExcludeList = [];
+      let stepSize;
+      const heightArray = [];
+      if (connectorVisibility === 1) {
+        stepSize = 1;
+      } else if (connectorVisibility === 3) {
+        const follow = Number(formatOptions.connector.connectorFollow);
+        if (follow === 1)
+          stepSize = Number(formatOptions.connector.connectorStepSize);
+        else if (follow === 2) {
+          (formatOptions.connector.connectorExclude || []).forEach(
+            (e) => xaxisLabelExcludeList.push(e)
+          );
+          stepSize = 1;
+        }
+      }
+      const connectorLabelExcludeList = [];
+      const differenceBarData = [];
+      const totalDifference = [];
+      const customLabelShowList = formatOptions.connector?.connectorCustomRange || [];
+      xaxisLabelExcludeList.forEach((ele) => {
+        const sub = ele.split("-");
+        if (sub.length) connectorLabelExcludeList.push(sub[0]);
+      });
+      const stack0 = stackChartData?.[0] || [];
+      const lineData = stack0.map((d, i) => ({
+        Dimension: d.data.Dimension,
+        Total: d.data.Total,
+        CustomTotal: d.data.Total - (totalDifference[i] ?? 0),
+        Index: i
+      }));
+      if (stepSize != null) {
+        for (let i = 0; i < lineData.length; i++) {
+          if (stepSize === 1 || i % stepSize === 0 && stepSize !== 1)
+            pathLineData.push(lineData[i]);
+        }
+        for (let i = stepSize; i < lineData.length; i += stepSize) {
+          const end = Math.min(i + stepSize, lineData.length);
+          let maxH = -Infinity;
+          for (let j = i; j < end; j++) {
+            if (lineData[j].Total > maxH) maxH = lineData[j].Total;
+          }
+          if (maxH !== -Infinity) heightArray.push(maxH);
+        }
+        for (let i = 1; i < pathLineData.length; i++)
+          nextBarHeight.push(pathLineData[i]);
+      } else {
+        const validPairs = [];
+        (customLabelShowList || []).forEach((k2) => {
+          if (k2?.from && k2?.to) {
+            const startExists = lineData.some((ld) => ld.Dimension === k2.from);
+            const endExists = lineData.some((ld) => ld.Dimension === k2.to);
+            if (startExists && endExists)
+              validPairs.push({ from: k2.from, to: k2.to });
+          }
+        });
+        validPairs.forEach((pair) => {
+          const startIndex = lineData.findIndex(
+            (ld) => ld.Dimension === pair.from
+          );
+          const endIndex = lineData.findIndex((ld) => ld.Dimension === pair.to);
+          if (startIndex >= 0 && endIndex >= 0) {
+            const s2 = Math.min(startIndex, endIndex);
+            const e = Math.max(startIndex, endIndex);
+            pathLineData.push(lineData[s2]);
+            let maxH = lineData[s2]?.Total ?? -Infinity;
+            for (let j = s2; j <= e; j++) {
+              if (lineData[j].Total > maxH) maxH = lineData[j].Total;
+            }
+            if (maxH !== -Infinity) heightArray.push(maxH);
+            nextBarHeight.push(lineData[e]);
+          }
+        });
+      }
+      gTag.append("defs").append("marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 5).attr("refY", 5).attr("markerWidth", 10).attr("markerHeight", 7).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style(
+        "fill",
+        formatOptions.connector.connectorMarkerColor !== commonColors.white ? formatOptions.connector.connectorMarkerColor : "none"
+      );
+      getConnectorPath(
+        pathLineData,
+        heightArray,
+        nextBarHeight,
+        stepSize,
+        connectorLabelExcludeList
+      );
+      getConnectorTextAddition(
+        pathLineData,
+        heightArray,
+        nextBarHeight,
+        stepSize,
+        connectorLabelExcludeList
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const getConnectorPath = (pathLineData, heightArray, nextBarHeight, stepSize, connectorLabelExcludeList) => {
+    try {
+      gTag.append("g").selectAll("path").data(pathLineData).enter().filter(
+        (d, i) => stepSize != null ? i < pathLineData.length - 1 : i < pathLineData.length
+      ).append("path").attr(
+        "d",
+        (d, i) => formatOptions.total.totalVisibility ? `M ${xScaleBottom(d.Total) + 50},
+            ${yScale(d.Dimension) + yScale.bandwidth() / 2 - 5} 
+            H ${60 + Math.max(
+          xScaleBottom(heightArray[i]),
+          xScaleBottom(nextBarHeight[i].Total),
+          xScaleBottom(d.Total)
+        )}
+                    V ${yScale(nextBarHeight[i].Dimension) + yScale.bandwidth() / 2 + 5}
+            H ${30 + xScaleBottom(nextBarHeight[i].Total)}` : `M ${xScaleBottom(d.Total) + 30},
+            ${yScale(d.Dimension) + yScale.bandwidth() / 2 - 5} 
+            H ${45 + Math.max(
+          xScaleBottom(heightArray[i]),
+          xScaleBottom(nextBarHeight[i].Total),
+          xScaleBottom(d.Total)
+        )}
+                    V ${yScale(nextBarHeight[i].Dimension) + yScale.bandwidth() / 2 + 5}
+            H ${10 + xScaleBottom(nextBarHeight[i].Total)}
+              `
+      ).style(
+        "stroke",
+        formatOptions.connector.connectorLineColor !== commonColors.white ? formatOptions.connector.connectorLineColor : "none"
+      ).attr("fill", "none").attr("stroke-width", formatOptions.connector.connectorLineThickness).attr("marker-end", "url(#arrow)").style(
+        "visibility",
+        (d) => connectorLabelExcludeList.includes(d.Dimension) || d.Total == 0 && formatOptions.yAxisLabel.hideZeroValues ? "hidden" : "visible"
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const getConnectorTextAddition = (pathLineData, heightArray, nextBarHeight, stepSize, connectorLabelExcludeList) => {
+    try {
+      let fontStyle = formatOptions.connector.connectorFontStyle;
+      let numberFormat = formatOptions.connector.connectorNumberFormat;
+      let tickCount = innerHeight2 / 30 < filteredDimension.length ? Math.round(innerHeight2 / 30) : filteredDimension.length;
+      if (formatOptions.connector.connectorKPI == "2" || formatOptions.connector.connectorKPI == "3") {
+        numberFormat = ".2s";
+      }
+      gTag.append("g").selectAll("text1").data(pathLineData).enter().filter(
+        (d, i) => stepSize != null ? i < pathLineData.length - 1 : i < pathLineData.length
+      ).append("text").attr(
+        "y",
+        (d, i) => stepSize == null ? yScale(nextBarHeight[i].Dimension) / 2 + yScale(d.Dimension) / 2 + 15 : stepSize == 1 ? tickCount < 6 && yScale.bandwidth() > 40 ? yScale(nextBarHeight[i].Dimension) + yScale.bandwidth() / 2 + yScale.bandwidth() / 2 + 13 : yScale(nextBarHeight[i].Dimension) + yScale.bandwidth() / 2 + yScale.bandwidth() / 2 + 7 : yScale(nextBarHeight[i].Dimension) + yScale.bandwidth() / 2 + yScale.bandwidth() / 2 * stepSize + 12
+      ).attr(
+        "x",
+        (d, i) => formatOptions.total.totalVisibility ? 70 + Math.max(
+          xScaleBottom(heightArray[i]),
+          xScaleBottom(nextBarHeight[i].Total),
+          xScaleBottom(d.Total)
+        ) : 50 + Math.max(
+          xScaleBottom(heightArray[i]),
+          xScaleBottom(nextBarHeight[i].Total),
+          xScaleBottom(d.Total)
+        )
+      ).text((d, i) => {
+        if (d.CustomTotal == 0 && nextBarHeight[i].CustomTotal != 0) {
+          d.CustomTotal = 1;
+        }
+        return connectorNumberFormat(
+          // legendExcludeList.length == 0 ?
+          nextBarHeight[i].Total,
+          // : nextBarHeight[i].CustomTotal,
+          // legendExcludeList.length == 0 ?
+          d.Total,
+          // : d.CustomTotal,
+          parseInt(formatOptions.connector.connectorDecimalPrecision),
+          numberFormat,
+          parseInt(d.Dimension),
+          parseInt(nextBarHeight[i].Dimension),
+          formatOptions
+        );
+      }).attr("text-anchor", "start").style("font-size", formatOptions.connector.connectorFontSize).style("font-family", formatOptions.connector.connectorFontFamily).style("font-style", formatOptions.connector.connectorFontStyle).style(
+        "fill",
+        formatOptions.connector.connectorFontColor !== commonColors.white ? formatOptions.connector.connectorFontColor : "none"
+      ).style("font-weight", "lighter").style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
+        "text-decoration",
+        fontStyle.includes("Underline") ? "Underline" : ""
+      ).style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").style(
+        "visibility",
+        (d) => connectorLabelExcludeList.includes(d.Dimension) || d.Total == 0 && formatOptions.yAxisLabel.hideZeroValues ? "hidden" : "visible"
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  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,
   BubbleChart,
+  ClevelandDotPlot,
   ColumnChart,
   ColumnHistogramChart,
   CustomColumnChart,