pace-chart-lib 1.0.69 → 1.0.71

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

@@ -14262,38 +14262,49 @@
       throw e;
     }
   };
-  const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList) => {
+  const dataTablePreCalculation = (formatOptions, yLabel, yTitle, seriesData, dimensionList, data) => {
     try {
+      const extraDataTableFields = data?.DataTableData ?? [];
       let dataTable = [];
       let dataTableHeight = 20;
       if (formatOptions.dataTableProperties && formatOptions.dataTableProperties.dataTable) {
+        const dataTableData = [...seriesData, ...extraDataTableFields];
         formatOptions.xAxisLabel.xAxisLabelVisibility = false;
-        let exactAvailableWidth = yLabel + yTitle;
-        seriesData.forEach((data, i) => {
-          let tempObj = {
-            data: data.data.filter(
-              (data2) => dimensionList.includes(data2.dimension)
-            ),
-            properties: {
-              legend: data.properties.alias,
-              color: data.properties.color,
-              markerColor: data.properties.markerColor,
-              markerShape: data.properties.markerShape,
-              lineStyle: data.properties.lineStyle,
-              height: calculateDataTableObjectHeight(
-                data.properties.alias.includes("~$~") ? data.properties.alias.split("~$~")[1] : data.properties.alias,
-                exactAvailableWidth,
-                formatOptions
-              )
-            }
-          };
-          dataTableHeight += tempObj.properties.height;
-          dataTable.push(tempObj);
+        const isLegendIconVisible = formatOptions.dataTableProperties.disableLegendIcon ? false : true;
+        const widthToSubtract = isLegendIconVisible ? 35 : 0;
+        let exactAvailableWidth = yLabel + yTitle - widthToSubtract;
+        dataTableData.forEach((data2, i) => {
+          if (data2?.properties?.showInDataTable ?? true) {
+            let tempObj = {
+              data: data2.data.filter(
+                (data3) => dimensionList.includes(data3.dimension)
+              ),
+              properties: {
+                legend: data2.properties.alias,
+                color: data2.properties.color,
+                markerColor: data2.properties.markerColor,
+                markerShape: data2.properties.markerShape,
+                lineStyle: data2.properties.lineStyle,
+                height: calculateDataTableObjectHeight(
+                  data2.properties.alias.includes("~$~") ? data2.properties.alias.split("~$~")[1] : data2.properties.alias,
+                  exactAvailableWidth,
+                  formatOptions
+                )
+              }
+            };
+            dataTableHeight += tempObj.properties.height;
+            dataTable.push(tempObj);
+          }
         });
       } else {
         dataTableHeight = 0;
         dataTable = [];
       }
+      if (dataTable.length == 0) {
+        dataTableHeight = 0;
+        dataTable = [];
+        formatOptions.dataTableProperties.dataTable = false;
+      }
       return { dataTable, dataTableHeight };
     } catch (e) {
     }
@@ -14336,7 +14347,7 @@
           ).style("text-align", "center").style("vertical-align", "middle").text("");
         }
         let legendsParentTag = temp.append("foreignObject").attr("x", -margin.left).attr("y", tableStartY + yCordinate).attr("width", margin.left).attr("height", cellHeight2);
-        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "flex-start").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "nowrap").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
+        let innerdiv = legendsParentTag.append("xhtml:div").style("display", "flex").style("justify-content", "center").style("align-items", "center").attr("class", "parentClass").style("flex-wrap", "wrap").style("flex-direction", "row").style("pointer-events", "auto").style("width", cellWidth).style("height", `${cellHeight2}px`).style("padding-left", formatOptions.dataTableProperties.disableLegendIcon ? `2px` : `5px`).style("padding-right", `3px`).style(
           "border-width",
           getBorderStyle(
             formatOptions,
@@ -14399,7 +14410,7 @@
         ).style("font-style", fontStyle.includes("Italic") ? "Italic" : "").style(
           "text-decoration",
           fontStyle.includes("Underline") ? "Underline" : ""
-        ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", "100%").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
+        ).style("padding-left", `5px`).style("white-space", "normal").style("overflow-wrap", "break-word").style("color", "black").style("width", formatOptions.dataTableProperties.disableLegendIcon ? "100%" : "calc(100% - 30px)").style("font-weight", fontStyle.includes("Bold") ? "Bold" : "").attr("title", text).text(text);
       };
       let innerVerticalBorderLineWidth = formatOptions.dataTableInnerBorder.verticalBorderLineWidth;
       let innerHorizontalBorderLineWidth = formatOptions.dataTableInnerBorder.horizontalBorderLineWidth;
@@ -16232,6 +16243,22 @@
     tooltip: "",
     tooltipMeasure: ""
   };
+  var VfxDataAttr = /* @__PURE__ */ ((VfxDataAttr2) => {
+    VfxDataAttr2["SeriesId"] = "data-series-id";
+    VfxDataAttr2["DimValue"] = "data-dim-value";
+    return VfxDataAttr2;
+  })(VfxDataAttr || {});
+  const VFX_TOOLTIP_FONT_SIZE = "11px";
+  const VFX_TOOLTIP_LINE_HEIGHT = "1.6";
+  function makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, buildPayload) {
+    return (_event, datum2) => {
+      if (!vfxPickModeActiveRef.current || !onElementClickRef.current) return;
+      onElementClickRef.current(buildPayload(_event, datum2));
+    };
+  }
+  function resolveCustomTooltipHTML(tooltipFormatter, dimValue, seriesProperties) {
+    return tooltipFormatter?.(dimValue, seriesProperties) ?? void 0;
+  }
   const fileName$b = "CommonFunctions.ts";
   [
     chartTypes.ColumnChart,
@@ -16363,7 +16390,7 @@
       logError$2(fileName$b, "calculateMaxLegendWidth", error);
     }
   }
-  function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, tooltipHandle, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, isNormalizedChart) {
+  function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, tooltipHandle, formatOptions, chartJSON, secondaryCustomYaxisMaxValue, secondaryCustomYaxisMinValue, customYaxisMinValue, customYaxisMaxValue, isNormalizedChart, tooltipFormatter) {
     try {
       let hideZeroValues = formatOptions.plotArea.hideZeroValues;
       formatOptions.plotArea.plotAreaHideLineAndMarkers === void 0 ? formatOptions.plotArea.plotAreaHideLineAndMarkers = true : null;
@@ -16400,6 +16427,10 @@
           const dataPoint = d;
           const legendEntry = d;
           const parentG = select$2(this.parentNode);
+          const _dimVal = String(chartJSON.formattedDimensionListMap.get(
+            Array.isArray(dataPoint.dimension) ? dataPoint.dimension[0] : dataPoint.dimension
+          ) ?? "");
+          const _customHTML = tooltipFormatter?.(_dimVal, d) ?? void 0;
           showTooltipOnMouseMove(
             [
               {
@@ -16428,7 +16459,8 @@
             ],
             formatOptions,
             event2,
-            d
+            d,
+            _customHTML
           );
           parentG.selectAll(".halo").remove();
           parentG.insert("circle", ":first-child").attr("class", "halo").attr("cx", xScale(dataPoint.dimension)).attr("cy", () => {
@@ -16719,7 +16751,7 @@
     if (abs2 >= 1e3) return (value2 / 1e3).toFixed(2) + "K";
     return value2.toFixed(2);
   }
-  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
+  function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop, customHTML) {
     try {
       const markerColor = prop?.color ?? prop?.markerColor ?? "blue";
       const markerShape = prop?.markerShape?.toLowerCase() ?? "circle";
@@ -16819,12 +16851,9 @@
                 `;
         return p;
       }, ``);
-      tooltip.html(`
-            <div class="arrow-placeholder"></div>
-            <div class="tooltipInner" style="display:flex; flex-direction:column;">
-                ${tooltipElements}
-            </div>
-        `);
+      tooltip.html(
+        customHTML ? `<div class="tooltipInner" style="display:flex; flex-direction:column; font-size:${VFX_TOOLTIP_FONT_SIZE}; color:${textColor}; line-height:${VFX_TOOLTIP_LINE_HEIGHT};">${customHTML}</div>` : `<div class="arrow-placeholder"></div><div class="tooltipInner" style="display:flex; flex-direction:column;">${tooltipElements}</div>`
+      );
       const tooltipNode = tooltip.node();
       const tooltipWidth = tooltipNode.offsetWidth;
       const tooltipHeight = tooltipNode.offsetHeight;
@@ -17486,13 +17515,22 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    tooltipFormatter,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     let scrollbarVisible = false;
     const chartType = chartTypes.ColumnChart;
     const svgRef = require$$0$1.useRef();
+    const tooltipFormatterRef = require$$0$1.useRef(tooltipFormatter);
+    tooltipFormatterRef.current = tooltipFormatter;
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -17615,7 +17653,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -17913,7 +17952,7 @@
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-        );
+        ).attr(VfxDataAttr.SeriesId, () => data2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension));
         const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
         finalBars.attr("y", (d) => {
           const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
@@ -17924,13 +17963,17 @@
         });
         columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
           (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
+          const _dimVal = String(
+            chartJSON.formattedDimensionListMap.get(
+              Array.isArray(d.dimension) ? d.dimension[0] : d.dimension
+            ) ?? ""
+          );
+          const _customHTML = resolveCustomTooltipHTML(tooltipFormatterRef.current, _dimVal, data2.properties);
           showTooltipOnMouseMove(
             [
               {
                 key: formatOptions.xAxisTitle.xAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.xAxisTitle.xAxisTitleHTML, "text/html").body.textContent?.trim() : formatOptions.xAxisTitle.xAxisTitleText.includes("~$~") ? formatOptions.xAxisTitle.xAxisTitleText.split("~$~")[1] : formatOptions.xAxisTitle.xAxisTitleText,
-                value: chartJSON.formattedDimensionListMap.get(
-                  Array.isArray(d.dimension) ? d.dimension[0] : d.dimension
-                )
+                value: _dimVal
               },
               {
                 key: formatOptions.yAxisTitle.yAxisTitleHTML !== "" ? new DOMParser().parseFromString(formatOptions.yAxisTitle.yAxisTitleHTML, "text/html").body.textContent?.trim() : d.properties?.currentMeasure ? d.properties.currentMeasure : formatOptions.yAxisTitle.yAxisTitleText || d.value,
@@ -17952,12 +17995,19 @@
             ],
             formatOptions,
             event2,
-            data2.properties
+            data2.properties,
+            _customHTML
           );
         }).on("mouseout", (event2, d) => {
           (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
           hideTooltipOnMouseOut();
         });
+        columnGroupsEnter.merge(columnGroups).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: data2.properties.legendUniqueId,
+          dimValue: Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension),
+          legendUniqueId: data2.properties.legendUniqueId,
+          seriesDisplayName: data2.properties.alias || data2.properties.name || ""
+        })));
         columnGroups.exit().remove();
       });
       gTag.selectAll(".parentGroup").raise();
@@ -18061,7 +18111,9 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
@@ -18069,6 +18121,10 @@
     let stackChartData = [];
     const chartType = chartTypes.CustomColumnChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -18201,7 +18257,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -18642,7 +18699,7 @@
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
         "visibility",
         (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-      ).on("mousemove", (event2, d) => {
+      ).attr(VfxDataAttr.SeriesId, () => data2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension)).on("mousemove", (event2, d) => {
         showTooltipOnMouseMove(
           [
             {
@@ -18673,7 +18730,12 @@
           event2,
           seriesData.filter((e) => e.legend === d.legend)[0].properties
         );
-      }).on("mouseout", hideTooltipOnMouseOut);
+      }).on("mouseout", hideTooltipOnMouseOut).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: data2.properties.legendUniqueId,
+        dimValue: Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension),
+        legendUniqueId: data2.properties.legendUniqueId,
+        seriesDisplayName: data2.properties.alias || data2.properties.name || ""
+      })));
       const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
       finalBars.attr("y", (d) => {
         const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
@@ -18978,7 +19040,12 @@
           event2,
           seriesData.filter((e) => e.legend === d.key)[0].properties
         );
-      }).on("mouseout", hideTooltipOnMouseOut);
+      }).on("mouseout", hideTooltipOnMouseOut).attr(VfxDataAttr.SeriesId, (d) => d.key ?? "").attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension)).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.key ?? "",
+        dimValue: Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension),
+        legendUniqueId: d.key ?? "",
+        seriesDisplayName: d.alias || d.key || ""
+      })));
       const finalStackRects = formatOptions.animation.animationEnabled ? rectsEnter.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : rectsEnter;
       finalStackRects.attr(
         "y",
@@ -19197,12 +19264,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.LayeredColumnChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -19324,7 +19397,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -19591,7 +19665,7 @@
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-        );
+        ).attr(VfxDataAttr.SeriesId, () => data2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension));
         const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
         finalBars.attr("y", (d) => {
           const yScale = data2.properties.axis === axisTypes.primary ? yScaleLeft : yScaleRight;
@@ -19647,6 +19721,12 @@
           selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
           hideTooltipOnMouseOut();
         });
+        columnGroupsEnter.merge(columnGroups).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: data2.properties.legendUniqueId,
+          dimValue: Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension),
+          legendUniqueId: data2.properties.legendUniqueId,
+          seriesDisplayName: data2.properties.alias || data2.properties.name || ""
+        })));
         columnGroups.exit().remove();
       });
       gTag.selectAll(".parentGroup").raise();
@@ -19754,13 +19834,20 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    tooltipFormatter,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     let scrollbarVisible = false;
     const chartType = chartTypes.StackColumnChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const dimensionList = data.DimensionList;
     const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
     const barChart = false;
@@ -19880,7 +19967,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -20117,7 +20205,9 @@
       }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
         return d.data[d.key] == 0 && props?.hideZeroValues ? "hidden" : "visible";
-      }).on("mousemove", (event2, d) => {
+      }).attr(VfxDataAttr.SeriesId, (d) => d.key ?? "").attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension)).on("mousemove", (event2, d) => {
+        const _dimVal = String(chartJSON.formattedDimensionListMap.get(d.data.dimension) ?? "");
+        const _customHTML = resolveCustomTooltipHTML(tooltipFormatter, _dimVal, d.properties);
         showTooltipOnMouseMove(
           [
             {
@@ -20140,11 +20230,17 @@
           ],
           formatOptions,
           event2,
-          d.properties
+          d.properties,
+          _customHTML
         );
       }).on("mouseout", (event2, d) => {
         hideTooltipOnMouseOut();
-      });
+      }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.key ?? "",
+        dimValue: Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension),
+        legendUniqueId: d.key ?? "",
+        seriesDisplayName: d.properties?.alias || d.key || ""
+      })));
       const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : 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();
@@ -20493,12 +20589,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.NormalizedStackColumnChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -20619,7 +20721,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -20883,7 +20986,7 @@
       }).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("visibility", (d, i, nodes) => {
         const { props } = getPropsForRect(nodes, i);
         return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
-      });
+      }).attr(VfxDataAttr.SeriesId, (d) => d.key ?? "").attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension));
       const shouldAnimate = formatOptions.animation.animationEnabled;
       const applyTransition = (sel) => shouldAnimate ? sel.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : 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])));
@@ -20914,7 +21017,12 @@
         );
       }).on("mouseout", (event2, d) => {
         hideTooltipOnMouseOut();
-      });
+      }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.key ?? "",
+        dimValue: Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension),
+        legendUniqueId: d.key ?? "",
+        seriesDisplayName: d.properties?.alias || d.key || ""
+      })));
       columnGroups.exit().remove();
       gTag.selectAll(".parentGroup").raise();
     };
@@ -22333,12 +22441,19 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    tooltipFormatter,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.LineChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -22462,7 +22577,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -22773,7 +22889,12 @@
         ).attr(
           "hoverId",
           (d.properties.alias || d.properties.name || "Legend").replace(/\s+/g, "-")
-        ).attr("clip-path", `url(#${chartId}-clip)`).attr("d", (d2) => lineGenerator(d2.data));
+        ).attr("clip-path", `url(#${chartId}-clip)`).attr("d", (d2) => lineGenerator(d2.data)).attr(VfxDataAttr.SeriesId, (d2) => d2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d2) => d2.properties.alias || d2.properties.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d2) => ({
+          seriesId: d2.properties.legendUniqueId,
+          dimValue: d2.properties.alias || d2.properties.name || "",
+          legendUniqueId: d2.properties.legendUniqueId,
+          seriesDisplayName: d2.properties.alias || d2.properties.name || ""
+        })));
         if (shouldAnimate) {
           pathSel.each(function() {
             const path2 = select$2(this);
@@ -22797,7 +22918,9 @@
         secondaryCustomYaxisMaxValue,
         secondaryCustomYaxisMinValue,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        false,
+        tooltipFormatter
       );
       gTag.selectAll(".parentGroup").raise();
     };
@@ -22909,12 +23032,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.StackLineChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const dimensionList = data.DimensionList;
     const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
     const barChart = false;
@@ -23036,7 +23165,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23314,7 +23444,12 @@
         ).attr(
           "stroke-width",
           seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
-        ).attr("fill", "none");
+        ).attr("fill", "none").attr(VfxDataAttr.SeriesId, seriesData[i].properties.legendUniqueId).attr(VfxDataAttr.DimValue, seriesData[i].properties.alias || seriesData[i].properties.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, () => ({
+          seriesId: seriesData[i].properties.legendUniqueId,
+          dimValue: seriesData[i].properties.alias || seriesData[i].properties.name || "",
+          legendUniqueId: seriesData[i].properties.legendUniqueId,
+          seriesDisplayName: seriesData[i].properties.alias || seriesData[i].properties.name || ""
+        })));
         const enableTransition = formatOptions.animation.animationEnabled;
         const totalLength = pathSel.node().getTotalLength();
         if (enableTransition) {
@@ -23497,12 +23632,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.NormalizedStackLineChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
@@ -23615,7 +23756,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -23846,7 +23988,12 @@
         ).attr(
           "stroke-width",
           seriesData[i].properties.lineStyle !== staticLineStyle.none ? seriesData[i].properties.lineWidth : 0
-        ).attr("fill", "none");
+        ).attr("fill", "none").attr(VfxDataAttr.SeriesId, seriesData[i].properties.legendUniqueId).attr(VfxDataAttr.DimValue, seriesData[i].properties.alias || seriesData[i].properties.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, () => ({
+          seriesId: seriesData[i].properties.legendUniqueId,
+          dimValue: seriesData[i].properties.alias || seriesData[i].properties.name || "",
+          legendUniqueId: seriesData[i].properties.legendUniqueId,
+          seriesDisplayName: seriesData[i].properties.alias || seriesData[i].properties.name || ""
+        })));
         const enableTransition = formatOptions.animation.animationEnabled;
         const totalLength = pathSel.node().getTotalLength();
         if (enableTransition) {
@@ -24028,12 +24175,19 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    tooltipFormatter,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.HorizontalBarChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -24445,7 +24599,7 @@
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-        );
+        ).attr(VfxDataAttr.SeriesId, () => data2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension));
         const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
         finalBars.attr("x", (d) => {
           const xScaleUsed = data2.properties.axis === axisTypes.primary ? xScaleBottom : xScaleTop;
@@ -24461,6 +24615,10 @@
         });
         columnGroupsEnter.merge(columnGroups).on("mousemove", (event2, d) => {
           (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
+          const _dimVal = String(chartJSON.formattedDimensionListMap.get(
+            Array.isArray(d.dimension) ? d.dimension[0] : d.dimension
+          ) ?? "");
+          const _customHTML = resolveCustomTooltipHTML(tooltipFormatter, _dimVal, data2.properties);
           showTooltipOnMouseMove(
             [
               {
@@ -24489,12 +24647,18 @@
             ],
             formatOptions,
             event2,
-            data2.properties
+            data2.properties,
+            _customHTML
           );
         }).on("mouseout", (event2, d) => {
           (data2.properties.alias || data2.properties.name || "Legend").replace(/ /g, "-");
           hideTooltipOnMouseOut();
-        });
+        }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: data2.properties.legendUniqueId,
+          dimValue: Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension),
+          legendUniqueId: data2.properties.legendUniqueId,
+          seriesDisplayName: data2.properties.alias || data2.properties.name || ""
+        })));
         columnGroups.exit().remove();
       });
       gTag.selectAll(".parentGroup").raise();
@@ -24581,12 +24745,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.StackHorizontalBarChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -24941,7 +25111,7 @@
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", 0).attr("visibility", (d, i, nodes) => {
         const props = getPropsForRect(nodes, i).props;
         return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
-      }).on("mousemove", (event2, d) => {
+      }).attr(VfxDataAttr.SeriesId, (d) => d.key ?? "").attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension)).on("mousemove", (event2, d) => {
         const dim = d.data.dimension;
         showTooltipOnMouseMove(
           [
@@ -24970,7 +25140,12 @@
       }).on("mouseout", (event2, d) => {
         d.data.dimension;
         hideTooltipOnMouseOut();
-      });
+      }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.key,
+        dimValue: Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension),
+        legendUniqueId: d.key,
+        seriesDisplayName: d.properties?.alias || d.properties?.name || ""
+      })));
       baseRects.attr("x", (d) => xScaleBottom(0));
       const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : baseRects;
       finalRects.attr("x", (d) => Math.min(xScaleBottom(d[0]), xScaleBottom(d[1]))).attr("width", (d) => Math.abs(xScaleBottom(d[1]) - xScaleBottom(d[0])));
@@ -25306,12 +25481,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.NormalizedStackHorizontalBarChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -25646,7 +25827,7 @@
       ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("x", (d) => xScaleBottom(0)).attr("width", 0).attr("visibility", (d, i, nodes) => {
         const props = getPropsForRect(nodes, i).props;
         return d.data[d.key] === 0 && props?.hideZeroValues ? "hidden" : "visible";
-      }).on("mousemove", (event2, d) => {
+      }).attr(VfxDataAttr.SeriesId, (d) => d.key ?? "").attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension)).on("mousemove", (event2, d) => {
         const dim = d.data.dimension;
         showTooltipOnMouseMove(
           [
@@ -25677,7 +25858,12 @@
         selectAll(".parentGroup").classed("highlight", false).classed("unhighlight", false);
         selectAll('[hoverId="' + legend + '"]').classed("highlight", false).classed("unhighlight", false);
         hideTooltipOnMouseOut();
-      });
+      }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.key,
+        dimValue: Array.isArray(d.data.dimension) ? String(d.data.dimension[0]) : String(d.data.dimension),
+        legendUniqueId: d.key,
+        seriesDisplayName: d.properties?.alias || d.properties?.name || ""
+      })));
       const finalRects = formatOptions.animation.animationEnabled ? baseRects.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : 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();
@@ -25787,12 +25973,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.LayeredHorizontalBarChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -26141,7 +26333,7 @@
         ).style("clip-path", "inset(0px) fill-box").style("shape-rendering", "crispEdges").attr("opacity", 0.7).attr(
           "visibility",
           (d) => d.value === 0 && formatOptions.xAxisLabel.hideZeroValues ? "hidden" : "visible"
-        );
+        ).attr(VfxDataAttr.SeriesId, () => data2.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension));
         const finalBars = formatOptions.animation.animationEnabled ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
         finalBars.attr(
           "x",
@@ -26184,7 +26376,12 @@
           );
         }).on("mouseout", () => {
           hideTooltipOnMouseOut();
-        });
+        }).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: data2.properties.legendUniqueId,
+          dimValue: Array.isArray(d.dimension) ? String(d.dimension[0]) : String(d.dimension),
+          legendUniqueId: data2.properties.legendUniqueId,
+          seriesDisplayName: data2.properties.alias || data2.properties.name || ""
+        })));
         columnGroups.exit().remove();
       });
       gTag.selectAll(".parentGroup").raise();
@@ -27004,12 +27201,19 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    tooltipFormatter,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.AreaChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList
@@ -27133,7 +27337,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27425,7 +27630,12 @@
           /\s+/g,
           "-"
         )
-      ).attr("d", (d) => areaGeneratorStart(d.data)).each(function(d) {
+      ).attr("d", (d) => areaGeneratorStart(d.data)).attr(VfxDataAttr.SeriesId, (d) => d.properties.legendUniqueId).attr(VfxDataAttr.DimValue, (d) => d.properties.alias || d.properties.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: d.properties.legendUniqueId,
+        dimValue: d.properties.alias || d.properties.name || "",
+        legendUniqueId: d.properties.legendUniqueId,
+        seriesDisplayName: d.properties.alias || d.properties.name || ""
+      }))).each(function(d) {
         if (enableTransition) {
           select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d.data));
         } else {
@@ -27484,7 +27694,9 @@
         secondaryCustomYaxisMaxValue,
         secondaryCustomYaxisMinValue,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        false,
+        tooltipFormatter
       );
       gTag.selectAll(".parentGroup").raise();
       gTag.selectAll(".hoverLine").raise();
@@ -27601,12 +27813,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.StackAreaChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
@@ -27728,7 +27946,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -27982,7 +28201,16 @@
       areaGroupsEnter.append("path").attr(
         "hoverId",
         (d) => (lineData[d.index].properties.alias || lineData[d.index].properties.name || "Legend").replace(/\s+/g, "-")
-      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).each(function(d) {
+      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => areaGeneratorStart(d)).attr(VfxDataAttr.SeriesId, (d) => seriesData[d.index]?.properties?.legendUniqueId ?? d.key).attr(VfxDataAttr.DimValue, (d) => seriesData[d.index]?.properties?.alias || seriesData[d.index]?.properties?.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => {
+        const sid = seriesData[d.index]?.properties?.legendUniqueId ?? d.key;
+        const displayName = seriesData[d.index]?.properties?.alias || seriesData[d.index]?.properties?.name || "";
+        return {
+          seriesId: sid,
+          dimValue: displayName,
+          legendUniqueId: sid,
+          seriesDisplayName: displayName
+        };
+      })).each(function(d) {
         if (enableTransition) {
           select$2(this).transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", areaGenerator(d));
         } else {
@@ -28208,12 +28436,18 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     const barWidth = 0;
     const chartType = chartTypes.NormalizedStackAreaChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
     const dimensionList = data.DimensionList;
     const barChart = false;
@@ -28326,7 +28560,8 @@
         yLabel,
         yTitle,
         seriesData,
-        chartJSON.dimensionList
+        chartJSON.dimensionList,
+        data
       ));
       initSvg$1(
         // for svg creation
@@ -28554,7 +28789,16 @@
       areaGroupsEnter.append("path").attr(
         "hoverId",
         (d) => (lineData[d.index]?.properties?.alias || lineData[d.index]?.properties?.name || "Legend").replace(/\s+/g, "-")
-      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).each(function(d) {
+      ).attr("class", "area parentGroup").attr("fill", (d) => d.color !== commonColors.white ? d.color : "none").style("fill-opacity", formatOptions.plotArea.fillOpacity).style("pointer-events", "none").attr("d", (d) => columnGeneratorStart(d)).attr(VfxDataAttr.SeriesId, (d) => seriesData[d.index]?.properties?.legendUniqueId ?? d.key).attr(VfxDataAttr.DimValue, (d) => seriesData[d.index]?.properties?.alias || seriesData[d.index]?.properties?.name || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => {
+        const sid = seriesData[d.index]?.properties?.legendUniqueId ?? d.key;
+        const displayName = seriesData[d.index]?.properties?.alias || seriesData[d.index]?.properties?.name || "";
+        return {
+          seriesId: sid,
+          dimValue: displayName,
+          legendUniqueId: sid,
+          seriesDisplayName: displayName
+        };
+      })).each(function(d) {
         const path2 = select$2(this);
         if (enableTransition) {
           path2.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]).attr("d", columnGenerator(d));
@@ -28873,8 +29117,12 @@
     }
   };
   const fileName$8 = "PieChart.tsx";
-  const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelCoordinatesChange, addLocalFilterFromLib }) => {
+  const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelCoordinatesChange, addLocalFilterFromLib, onElementClick, vfxPickModeActive }) => {
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(data.ChartData);
     let chartFormatOptions;
     let height;
@@ -29007,7 +29255,12 @@
         ).attr(
           "fill",
           (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
-        ).on("mouseover.arc", function(d) {
+        ).attr(VfxDataAttr.SeriesId, (d) => d.data.properties.legendUniqueId ?? d.data.properties.name ?? "").attr(VfxDataAttr.DimValue, (d) => d.data.properties.alias || d.data.legend || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: d.data.properties.legendUniqueId ?? d.data.properties.name ?? "",
+          dimValue: d.data.properties.alias || d.data.legend || "",
+          legendUniqueId: d.data.properties.legendUniqueId ?? d.data.properties.name ?? "",
+          seriesDisplayName: d.data.properties.alias || d.data.properties.name || ""
+        }))).on("mouseover.arc", function(d) {
           select$2(this).transition().duration(100).attr("d", arcOver);
         }).on("mousemove. ", (d) => {
           showTooltipOnMouseMove(
@@ -29309,9 +29562,15 @@
     chartId,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const seriesData = generalizedChartData(data.ChartData);
     let chartFormatOptions;
     let width;
@@ -29444,7 +29703,12 @@
         ).attr(
           "fill",
           (d) => d.data.properties.color !== commonColors.white ? d.data.properties.color : "none"
-        ).each(function(d) {
+        ).attr(VfxDataAttr.SeriesId, (d) => d.data.properties.legendUniqueId ?? d.data.properties.name ?? "").attr(VfxDataAttr.DimValue, (d) => d.data.properties.alias || d.data.legend || "").on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: d.data.properties.legendUniqueId ?? d.data.properties.name ?? "",
+          dimValue: d.data.properties.alias || d.data.legend || "",
+          legendUniqueId: d.data.properties.legendUniqueId ?? d.data.properties.name ?? "",
+          seriesDisplayName: d.data.properties.alias || d.data.properties.name || ""
+        }))).each(function(d) {
           const thisPath = d;
           thisPath._current = { startAngle: 0, endAngle: 0 };
         }).on("mouseover.arc", function() {
@@ -29807,8 +30071,12 @@
     ) });
   };
   const fileName$6 = "TreemapChart.tsx";
-  const Treemap = ({ data, formatOptions, chartId }) => {
+  const Treemap = ({ data, formatOptions, chartId, onElementClick, vfxPickModeActive }) => {
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     let chartFormatOptions;
     let width;
     let height;
@@ -29975,7 +30243,16 @@
             void 0,
             getMarkerColorForTooltip(d)
           );
-        }).on("mouseout", () => hideTooltipOnMouseOut());
+        }).on("mouseout", () => hideTooltipOnMouseOut()).attr(VfxDataAttr.SeriesId, (d) => String(d.data.properties?.legendUniqueId ?? d.data.legend ?? "")).attr(VfxDataAttr.DimValue, (d) => String(d.data.data[0].legend ?? "")).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => {
+          const seriesId = String(d.data.properties?.legendUniqueId ?? d.data.legend ?? "");
+          const dimValue = String(d.data.data[0].legend ?? "");
+          return {
+            seriesId,
+            dimValue,
+            legendUniqueId: seriesId,
+            seriesDisplayName: String(d.data.properties?.alias || d.data.properties?.name || dimValue)
+          };
+        }));
         if (shouldAnimate) {
           rects.transition().duration(chartFormatOptions.animation.animationDuration).ease(effectsMap[chartFormatOptions.animation.animationEffect]).attr("fill-opacity", 0.7);
         }
@@ -36458,12 +36735,18 @@
   const SankeyChart = ({
     formatOptions,
     data,
-    chartId
+    chartId,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     let sankeyLinks = JSON.parse(JSON.stringify(data?.sankeyLinks));
     let sankeyNodes = JSON.parse(JSON.stringify(data?.sankeyNodes));
     if (!data) return null;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     let chartFormatOptions;
     let width;
     let height;
@@ -36750,7 +37033,15 @@
           } catch (error) {
             logError$2("SankeyChart.tsx", "Nodes.onMouseOut", error);
           }
-        });
+        }).attr(VfxDataAttr.SeriesId, (d) => String(d.name ?? "")).attr(VfxDataAttr.DimValue, (d) => String(d.name ?? "")).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => {
+          const nodeName = String(d.name ?? "");
+          return {
+            seriesId: nodeName,
+            dimValue: nodeName,
+            legendUniqueId: nodeName,
+            seriesDisplayName: nodeName.includes("~$~") ? nodeName.split("~$~")[1] : nodeName
+          };
+        }));
         const link2 = chartAreaTagG.append("g").attr("fill", "none").selectAll("g").data(links).enter().append("g").style("mix-blend-mode", "multiply");
         link2.append("path").attr("class", "sankey-links").attr("stroke-opacity", linksFillOpacity).attr("id", (d) => "Link" + d.index).attr("d", sankeyLinkCustom(curviness)).attr(
           "stroke",
@@ -54958,8 +55249,15 @@
     data,
     formatOptions,
     chartId,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
+    const legendIndexMap = new Map((data.ChartData ?? []).map((s2, i) => [s2.legend, i]));
     let legendEntries = data.LegendList;
     const svgRef = require$$0$1.useRef();
     let chartFormatOptions;
@@ -55132,10 +55430,15 @@
           );
         }).attr("transform", function(d) {
           return `translate(${xScale(d.dimension)}, ${yScale(d.measure)})`;
-        }).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
+        }).attr(VfxDataAttr.SeriesId, (d) => `${legendIndexMap.get(d.legendName)}_${d.legendName}`).attr(VfxDataAttr.DimValue, (d) => String(d.dimension)).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
           "visibility",
           (d, i) => d.dimension[0] === 0 || d.measure === 0 && chartFormatOptions.plotArea.hideZeroValues || d.dimension < customXaxisMinValue || d.dimension > customXaxisMaxValue || d.measure < customYaxisMinValue || d.measure > customYaxisMaxValue ? "hidden" : "visible"
-        ).on("mousemove", (event2, d) => {
+        ).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: `${legendIndexMap.get(d.legendName)}_${d.legendName}`,
+          dimValue: String(d.dimension),
+          legendUniqueId: `${legendIndexMap.get(d.legendName)}_${d.legendName}`,
+          seriesDisplayName: d.legendName
+        }))).on("mousemove", (event2, d) => {
           showTooltipOnMouseMove(
             [
               {
@@ -55418,10 +55721,17 @@
   const ScatterChart = ({
     data,
     formatOptions,
-    chartId
+    chartId,
+    onElementClick,
+    vfxPickModeActive
   }) => {
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const colorsList = data.ColorElements ?? [];
     const shapesList = data.ShapeElements ?? [];
+    const colorIndexMap = new Map(colorsList.map((c2, i) => [c2.name, i]));
     let modifiedData = [];
     const svgRef = require$$0$1.useRef();
     let chartFormatOptions;
@@ -55587,10 +55897,15 @@
           );
         }).attr("transform", function(d) {
           return `translate(${xScale(d.dimension)}, ${yScale(d.measure)})`;
-        }).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
+        }).attr(VfxDataAttr.SeriesId, (d) => `${colorIndexMap.get(d.colorName)}_${d.colorName}`).attr(VfxDataAttr.DimValue, (d) => String(d.dimension)).attr("opacity", shouldAnimate ? 0 : chartFormatOptions.plotArea.fillOpacity).style(
           "visibility",
           (d, i) => d.dimension[0] === 0 || d.measure === 0 && chartFormatOptions.plotArea.hideZeroValues || d.dimension < customXaxisMinValue || d.dimension > customXaxisMaxValue || d.measure < customYaxisMinValue || d.measure > customYaxisMaxValue ? "hidden" : "visible"
-        ).on("mousemove", (event2, d) => {
+        ).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+          seriesId: `${colorIndexMap.get(d.colorName)}_${d.colorName}`,
+          dimValue: String(d.dimension),
+          legendUniqueId: `${colorIndexMap.get(d.colorName)}_${d.colorName}`,
+          seriesDisplayName: d.colorName
+        }))).on("mousemove", (event2, d) => {
           showTooltipOnMouseMove(
             [
               ...[
@@ -56058,13 +56373,19 @@
     isDateType,
     formatOptions,
     data,
-    isAdvancedAnalyticsWaterFall = false
+    isAdvancedAnalyticsWaterFall = false,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID?.();
     let columnWidth = 0;
     let colorScale;
     const chartType = chartTypes.WaterfallChart;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     const isAdvancedWaterfall = isAdvancedAnalyticsWaterFall ?? false;
     const seriesData = isAdvancedWaterfall ? [] : generalizedChartData(data.ChartData, data.DimensionList);
     const dimensionList = data.DimensionList;
@@ -56510,7 +56831,14 @@
             );
           }).on("mouseout", () => {
             hideTooltipOnMouseOut();
-          });
+          }).attr(VfxDataAttr.SeriesId, (d) => String(d.key ?? d.Key ?? "")).attr(
+            VfxDataAttr.DimValue,
+            (d) => !isAdvancedWaterfall ? String(d.data.dimension || d.data.legend || "") : String(d.data.xKey || "")
+          ).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => {
+            const seriesId = String(d.key ?? d.Key ?? "");
+            const dimValue = !isAdvancedWaterfall ? String(d.data.dimension || d.data.legend || "") : String(d.data.xKey || "");
+            return { seriesId, dimValue, legendUniqueId: seriesId, seriesDisplayName: seriesId };
+          }));
           const finalRects = shouldAnimate ? rectsEnter.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : rectsEnter;
           finalRects.attr("y", (d) => d[1] ? yScaleLeft(d[1]) : 0).attr("height", (d) => d[1] ? yScaleLeft(d[0]) - yScaleLeft(d[1]) : 0);
           rects.exit().remove();
@@ -56737,13 +57065,19 @@
     formatOptions,
     data,
     isReportEditable,
-    onDataLabelCoordinatesChange
+    onDataLabelCoordinatesChange,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
     const chartType = chartTypes.TornadoChart;
     const isAdvanceAnalyticsChart = data.IsadvanceanalyticsChart ?? data.IsCalCSensitivity;
     const svgRef = require$$0$1.useRef();
+    const onElementClickRef = require$$0$1.useRef(onElementClick);
+    onElementClickRef.current = onElementClick;
+    const vfxPickModeActiveRef = require$$0$1.useRef(vfxPickModeActive);
+    vfxPickModeActiveRef.current = vfxPickModeActive;
     let seriesData = generalizedChartData(
       data.ChartData,
       data.DimensionList,
@@ -56857,14 +57191,6 @@
         chartJSON
       ));
       setSVGContainer(margin);
-      ({ dataTable, dataTableHeight } = dataTablePreCalculation(
-        // calculations for data tables
-        formatOptions,
-        yLabel,
-        yTitle,
-        seriesData,
-        chartJSON.dimensionList
-      ));
       initSvg$1(
         // for svg creation
         svg,
@@ -57150,7 +57476,7 @@
           customYaxisMaxValue,
           barChart,
           innerWidth2
-        ).customTickValue ?? (dataTableHeight > 0 ? (innerWidth2 - dataTableHeight) / 30 : innerWidth2 / 30)
+        ).customTickValue ?? innerWidth2 / 30
       ).tickPadding(8).tickSizeOuter(0);
     };
     const getChartType = () => {
@@ -57205,7 +57531,12 @@
           event2,
           !data.IsCalCSensitivity ? d.properties : d.properties.legend === "Calculated Low(-ve)" ? { markerColor: formatOptions.plotArea.plotAreaCalculatedLow } : { markerColor: formatOptions.plotArea.plotAreaCalculatedHigh }
         );
-      }).on("mouseout", hideTooltipOnMouseOut);
+      }).on("mouseout", hideTooltipOnMouseOut).attr(VfxDataAttr.SeriesId, (d) => String(d.properties?.legendUniqueId ?? "")).attr(VfxDataAttr.DimValue, (d) => String(d.legend ?? d.legendText ?? "")).on("click", makeVfxClickHandler(vfxPickModeActiveRef, onElementClickRef, (_event, d) => ({
+        seriesId: String(d.properties?.legendUniqueId ?? ""),
+        dimValue: String(d.legend ?? d.legendText ?? ""),
+        legendUniqueId: String(d.properties?.legendUniqueId ?? ""),
+        seriesDisplayName: String(d.properties?.alias || d.properties?.name || d.legendText || "")
+      })));
       const finalBars = shouldAnimate ? bars.transition().duration(formatOptions.animation.animationDuration).ease(effectsMap[formatOptions.animation.animationEffect]) : bars;
       finalBars.attr("x", (d) => d.value >= 0 ? xScale(0) : xScale(d.value)).attr("width", (d) => Math.abs(xScale(d.value) - xScale(0)));
     };