diff --git a/public/app/plugins/panel/histogram/Histogram.tsx b/public/app/plugins/panel/histogram/Histogram.tsx index f766351680f..16063c8f402 100644 --- a/public/app/plugins/panel/histogram/Histogram.tsx +++ b/public/app/plugins/panel/histogram/Histogram.tsx @@ -41,6 +41,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; } @@ -209,8 +210,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, }, }); } @@ -271,11 +272,11 @@ export class Histogram extends React.Component { renderLegend(config: UPlotConfigBuilder) { const { legend } = this.props; - if (!config || legend.showLegend === false) { + if (!config || legend.showLegend === false || !this.props.rawSeries) { return null; } - return ; + return ; } componentDidUpdate(prevProps: HistogramProps) { diff --git a/public/app/plugins/panel/histogram/HistogramPanel.tsx b/public/app/plugins/panel/histogram/HistogramPanel.tsx index dc459235915..4f19272b53c 100644 --- a/public/app/plugins/panel/histogram/HistogramPanel.tsx +++ b/public/app/plugins/panel/histogram/HistogramPanel.tsx @@ -45,6 +45,7 @@ export const HistogramPanel: React.FC = ({ data, options, width, height } options={options} theme={theme} legend={options.legend} + rawSeries={data.series} structureRev={data.structureRev} width={width} height={height}