[v11.0.x] XY Chart: Show mapped size/color fields in tooltip (#87183)

public/app/plugins/panel/xychart/v2/XYChartPanel.tsx

@@ -53,6 +53,10 @@ export const XYChartPanel2 = (props: Props2) => {
 
   // TODO: React.memo()
   const renderLegend = () => {
+    if (!props.options.legend.showLegend) {
+      return null;
+    }
+
     const items: VizLegendItem[] = [];
 
     series.forEach((s, idx) => {

public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx

@@ -40,6 +40,9 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
   const xField = series.x.field;
   const yField = series.y.field;
 
+  const sizeField = series.size.field;
+  const colorField = series.color.field;
+
   let label = series.name.value;
 
   let seriesColor = series.color.fixed;
@@ -68,6 +71,21 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
     },
   ];
 
+  // mapped fields for size/color
+  if (sizeField != null) {
+    contentItems.push({
+      label: stripSeriesName(sizeField.state?.displayName ?? sizeField.name, label),
+      value: fmt(sizeField, sizeField.values[rowIndex]),
+    });
+  }
+
+  if (colorField != null) {
+    contentItems.push({
+      label: stripSeriesName(colorField.state?.displayName ?? colorField.name, label),
+      value: fmt(colorField, colorField.values[rowIndex]),
+    });
+  }
+
   series._rest.forEach((field) => {
     contentItems.push({
       label: stripSeriesName(field.state?.displayName ?? field.name, label),