pace-chart-lib 1.0.70 → 1.0.72

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

@@ -16243,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,
@@ -16374,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;
@@ -16411,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(
             [
               {
@@ -16439,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", () => {
@@ -16730,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";
@@ -16830,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;
@@ -17497,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
@@ -17925,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;
@@ -17936,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,
@@ -17964,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();
@@ -18073,7 +18111,9 @@
     data,
     isReportEditable,
     onDataLabelCoordinatesChange,
-    addLocalFilterFromLib
+    addLocalFilterFromLib,
+    onElementClick,
+    vfxPickModeActive
   }) => {
     const chartId = crypto.randomUUID();
     let columnWidth = 0;
@@ -18081,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
@@ -18655,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(
           [
             {
@@ -18686,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;
@@ -18991,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",
@@ -19210,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
@@ -19605,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;
@@ -19661,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();
@@ -19768,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;
@@ -20132,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(
           [
             {
@@ -20155,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();
@@ -20508,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
@@ -20899,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])));
@@ -20930,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();
     };
@@ -22349,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
@@ -22790,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);
@@ -22814,7 +22918,9 @@
         secondaryCustomYaxisMaxValue,
         secondaryCustomYaxisMinValue,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        false,
+        tooltipFormatter
       );
       gTag.selectAll(".parentGroup").raise();
     };
@@ -22926,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;
@@ -23332,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) {
@@ -23515,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;
@@ -23865,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) {
@@ -24047,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
@@ -24464,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;
@@ -24480,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(
             [
               {
@@ -24508,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();
@@ -24600,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
@@ -24960,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(
           [
@@ -24989,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])));
@@ -25325,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
@@ -25665,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(
           [
@@ -25696,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();
@@ -25806,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
@@ -26160,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",
@@ -26203,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();
@@ -27023,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
@@ -27445,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 {
@@ -27504,7 +27694,9 @@
         secondaryCustomYaxisMaxValue,
         secondaryCustomYaxisMinValue,
         customYaxisMinValue,
-        customYaxisMaxValue
+        customYaxisMaxValue,
+        false,
+        tooltipFormatter
       );
       gTag.selectAll(".parentGroup").raise();
       gTag.selectAll(".hoverLine").raise();
@@ -27621,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;
@@ -28003,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 {
@@ -28229,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;
@@ -28576,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));
@@ -28895,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;
@@ -29029,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(
@@ -29331,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;
@@ -29466,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() {
@@ -29829,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;
@@ -29997,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);
         }
@@ -36480,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;
@@ -36772,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",
@@ -54980,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;
@@ -55154,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(
             [
               {
@@ -55440,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;
@@ -55609,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(
             [
               ...[
@@ -56080,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;
@@ -56532,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();
@@ -56759,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,
@@ -57219,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)));
     };