Histogram: Send proper dataframe to PlotLegend (#53284) (#53463)

* Send proper dataframe to PlotLegend

* Update dataFrameFieldIndex for multiple frames

(cherry picked from commit 3893c46976)

public/app/plugins/panel/histogram/Histogram.tsx

@@ -48,6 +48,7 @@ export interface HistogramProps extends Themeable2 {
   height: number;
   structureRev?: number; // a number that will change when the frames[] structure changes
   legend: VizLegendOptions;
+  rawSeries?: DataFrame[];
   children?: (builder: UPlotConfigBuilder, frame: DataFrame) => React.ReactNode;
 }
 
@@ -211,8 +212,8 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
 
       // The following properties are not used in the uPlot config, but are utilized as transport for legend config
       dataFrameFieldIndex: {
-        fieldIndex: i,
-        frameIndex: 0,
+        fieldIndex: 1,
+        frameIndex: i - 2,
       },
     });
   }
@@ -273,11 +274,11 @@ export class Histogram extends React.Component<HistogramProps, State> {
 
   renderLegend(config: UPlotConfigBuilder) {
     const { legend } = this.props;
-    if (!config || legend.displayMode === LegendDisplayMode.Hidden) {
+    if (!config || legend.displayMode === LegendDisplayMode.Hidden || !this.props.rawSeries) {
       return null;
     }
 
-    return <PlotLegend data={[this.props.alignedFrame]} config={config} maxHeight="35%" maxWidth="60%" {...legend} />;
+    return <PlotLegend data={this.props.rawSeries} config={config} maxHeight="35%" maxWidth="60%" {...legend} />;
   }
 
   componentDidUpdate(prevProps: HistogramProps) {

public/app/plugins/panel/histogram/HistogramPanel.tsx

@@ -45,6 +45,7 @@ export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }
       options={options}
       theme={theme}
       legend={options.legend}
+      rawSeries={data.series}
       structureRev={data.structureRev}
       width={width}
       height={height}