pace-chart-lib 1.0.70 → 1.0.71

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

@@ -16240,6 +16240,22 @@ const chartProperties = {
   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,
@@ -16371,7 +16387,7 @@ function calculateMaxLegendWidth(list, formatOptions) {
     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;
@@ -16408,6 +16424,10 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
         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(
           [
             {
@@ -16436,7 +16456,8 @@ function lineMarkers(lines, chartData, type, xScale, yScale, yScaleRight, toolti
           ],
           formatOptions,
           event2,
-          d
+          d,
+          _customHTML
         );
         parentG.selectAll(".halo").remove();
         parentG.insert("circle", ":first-child").attr("class", "halo").attr("cx", xScale(dataPoint.dimension)).attr("cy", () => {
@@ -16727,7 +16748,7 @@ function getAutoNumberWithFormat(value2) {
   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";
@@ -16827,12 +16848,9 @@ function showTooltipOnMouseMove(elements, chartFormatOptions, event2, prop) {
                 `;
       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;
@@ -17494,13 +17512,22 @@ const ColumnChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  tooltipFormatter,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   let scrollbarVisible = false;
   const chartType = chartTypes.ColumnChart;
   const svgRef = useRef();
+  const tooltipFormatterRef = useRef(tooltipFormatter);
+  tooltipFormatterRef.current = tooltipFormatter;
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -17922,7 +17949,7 @@ const ColumnChart = ({
       ).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;
@@ -17933,13 +17960,17 @@ const ColumnChart = ({
       });
       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,
@@ -17961,12 +17992,19 @@ const ColumnChart = ({
           ],
           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();
@@ -18070,7 +18108,9 @@ const CustomColumnChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
@@ -18078,6 +18118,10 @@ const CustomColumnChart = ({
   let stackChartData = [];
   const chartType = chartTypes.CustomColumnChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -18652,7 +18696,7 @@ const CustomColumnChart = ({
     ).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(
         [
           {
@@ -18683,7 +18727,12 @@ const CustomColumnChart = ({
         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;
@@ -18988,7 +19037,12 @@ const CustomColumnChart = ({
         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",
@@ -19207,12 +19261,18 @@ const LayeredColumnChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.LayeredColumnChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -19602,7 +19662,7 @@ const LayeredColumnChart = ({
       ).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;
@@ -19658,6 +19718,12 @@ const LayeredColumnChart = ({
         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();
@@ -19765,13 +19831,20 @@ const StackColumnChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  tooltipFormatter,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   let scrollbarVisible = false;
   const chartType = chartTypes.StackColumnChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const dimensionList = data.DimensionList;
   const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
   const barChart = false;
@@ -20129,7 +20202,9 @@ const StackColumnChart = ({
     }).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(
         [
           {
@@ -20152,11 +20227,17 @@ const StackColumnChart = ({
         ],
         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();
@@ -20505,12 +20586,18 @@ const NormalizedStackColumnChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.NormalizedStackColumnChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -20896,7 +20983,7 @@ const NormalizedStackColumnChart = ({
     }).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])));
@@ -20927,7 +21014,12 @@ const NormalizedStackColumnChart = ({
       );
     }).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();
   };
@@ -22346,12 +22438,19 @@ const LineChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  tooltipFormatter,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.LineChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -22787,7 +22886,12 @@ const LineChart = ({
       ).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);
@@ -22811,7 +22915,9 @@ const LineChart = ({
       secondaryCustomYaxisMaxValue,
       secondaryCustomYaxisMinValue,
       customYaxisMinValue,
-      customYaxisMaxValue
+      customYaxisMaxValue,
+      false,
+      tooltipFormatter
     );
     gTag.selectAll(".parentGroup").raise();
   };
@@ -22923,12 +23029,18 @@ const StackLineChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.StackLineChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const dimensionList = data.DimensionList;
   const seriesData = (generalizedChartData(data.ChartData, data.DimensionList) || []).reverse();
   const barChart = false;
@@ -23329,7 +23441,12 @@ const StackLineChart = ({
       ).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) {
@@ -23512,12 +23629,18 @@ const NormalisedStackLineChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.NormalizedStackLineChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
@@ -23862,7 +23985,12 @@ const NormalisedStackLineChart = ({
       ).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) {
@@ -24044,12 +24172,19 @@ const HorizontalBarChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  tooltipFormatter,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.HorizontalBarChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -24461,7 +24596,7 @@ const HorizontalBarChart = ({
       ).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;
@@ -24477,6 +24612,10 @@ const HorizontalBarChart = ({
       });
       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(
           [
             {
@@ -24505,12 +24644,18 @@ const HorizontalBarChart = ({
           ],
           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();
@@ -24597,12 +24742,18 @@ const StackHorizontalChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.StackHorizontalBarChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -24957,7 +25108,7 @@ const StackHorizontalChart = ({
     ).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(
         [
@@ -24986,7 +25137,12 @@ const StackHorizontalChart = ({
     }).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])));
@@ -25322,12 +25478,18 @@ const NormalizedStackHorizontalBarChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.NormalizedStackHorizontalBarChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -25662,7 +25824,7 @@ const NormalizedStackHorizontalBarChart = ({
     ).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(
         [
@@ -25693,7 +25855,12 @@ const NormalizedStackHorizontalBarChart = ({
       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();
@@ -25803,12 +25970,18 @@ const LayeredHorizontalBarChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   let columnWidth = 0;
   const chartType = chartTypes.LayeredHorizontalBarChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -26157,7 +26330,7 @@ const LayeredHorizontalBarChart = ({
       ).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",
@@ -26200,7 +26373,12 @@ const LayeredHorizontalBarChart = ({
         );
       }).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();
@@ -27020,12 +27198,19 @@ const AreaChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  tooltipFormatter,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.AreaChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList
@@ -27442,7 +27627,12 @@ const AreaChart = ({
         /\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 {
@@ -27501,7 +27691,9 @@ const AreaChart = ({
       secondaryCustomYaxisMaxValue,
       secondaryCustomYaxisMinValue,
       customYaxisMinValue,
-      customYaxisMaxValue
+      customYaxisMaxValue,
+      false,
+      tooltipFormatter
     );
     gTag.selectAll(".parentGroup").raise();
     gTag.selectAll(".hoverLine").raise();
@@ -27618,12 +27810,18 @@ const StackAreaChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.StackAreaChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
@@ -28000,7 +28198,16 @@ const StackAreaChart = ({
     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 {
@@ -28226,12 +28433,18 @@ const NormalizedStackAreaChart = ({
   data,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID();
   const barWidth = 0;
   const chartType = chartTypes.NormalizedStackAreaChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(data.ChartData, data.DimensionList)?.reverse() || [];
   const dimensionList = data.DimensionList;
   const barChart = false;
@@ -28573,7 +28786,16 @@ const NormalizedStackAreaChart = ({
     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));
@@ -28892,8 +29114,12 @@ const drawTotalValue = (chartFormatOptions, totalValue, chartTitleHeight, chartA
   }
 };
 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 = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(data.ChartData);
   let chartFormatOptions;
   let height;
@@ -29026,7 +29252,12 @@ const PieChart = ({ data, formatOptions, chartId, isReportEditable, onDataLabelC
       ).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(
@@ -29328,9 +29559,15 @@ const DonutChart = ({
   chartId,
   isReportEditable,
   onDataLabelCoordinatesChange,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const seriesData = generalizedChartData(data.ChartData);
   let chartFormatOptions;
   let width;
@@ -29463,7 +29700,12 @@ const DonutChart = ({
       ).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() {
@@ -29826,8 +30068,12 @@ const DonutChart = ({
   ) });
 };
 const fileName$6 = "TreemapChart.tsx";
-const Treemap = ({ data, formatOptions, chartId }) => {
+const Treemap = ({ data, formatOptions, chartId, onElementClick, vfxPickModeActive }) => {
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   let chartFormatOptions;
   let width;
   let height;
@@ -29994,7 +30240,16 @@ const Treemap = ({ data, formatOptions, chartId }) => {
           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);
       }
@@ -36477,12 +36732,18 @@ function Sankey() {
 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 = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   let chartFormatOptions;
   let width;
   let height;
@@ -36769,7 +37030,15 @@ const SankeyChart = ({
         } 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",
@@ -54977,8 +55246,15 @@ const BubbleChart = ({
   data,
   formatOptions,
   chartId,
-  addLocalFilterFromLib
+  addLocalFilterFromLib,
+  onElementClick,
+  vfxPickModeActive
 }) => {
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
+  const legendIndexMap = new Map((data.ChartData ?? []).map((s2, i) => [s2.legend, i]));
   let legendEntries = data.LegendList;
   const svgRef = useRef();
   let chartFormatOptions;
@@ -55151,10 +55427,15 @@ const BubbleChart = ({
         );
       }).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(
           [
             {
@@ -55437,10 +55718,17 @@ const fileName = "ScatterChart.tsx";
 const ScatterChart = ({
   data,
   formatOptions,
-  chartId
+  chartId,
+  onElementClick,
+  vfxPickModeActive
 }) => {
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = 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 = useRef();
   let chartFormatOptions;
@@ -55606,10 +55894,15 @@ const ScatterChart = ({
         );
       }).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(
           [
             ...[
@@ -56077,13 +56370,19 @@ const WaterfallChart = ({
   isDateType,
   formatOptions,
   data,
-  isAdvancedAnalyticsWaterFall = false
+  isAdvancedAnalyticsWaterFall = false,
+  onElementClick,
+  vfxPickModeActive
 }) => {
   const chartId = crypto.randomUUID?.();
   let columnWidth = 0;
   let colorScale;
   const chartType = chartTypes.WaterfallChart;
   const svgRef = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   const isAdvancedWaterfall = isAdvancedAnalyticsWaterFall ?? false;
   const seriesData = isAdvancedWaterfall ? [] : generalizedChartData(data.ChartData, data.DimensionList);
   const dimensionList = data.DimensionList;
@@ -56529,7 +56828,14 @@ const WaterfallChart = ({
           );
         }).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();
@@ -56756,13 +57062,19 @@ const TornadoChart = ({
   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 = useRef();
+  const onElementClickRef = useRef(onElementClick);
+  onElementClickRef.current = onElementClick;
+  const vfxPickModeActiveRef = useRef(vfxPickModeActive);
+  vfxPickModeActiveRef.current = vfxPickModeActive;
   let seriesData = generalizedChartData(
     data.ChartData,
     data.DimensionList,
@@ -57216,7 +57528,12 @@ const TornadoChart = ({
         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)));
   };