fixes

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -61,9 +61,23 @@ export const PlotLegend = memo(
             dataFrameFieldIndexCfg?.frameIndex === dataFrameFieldIndex.frameIndex &&
             dataFrameFieldIndexCfg?.fieldIndex === dataFrameFieldIndex.fieldIndex
           );
-        })!;
+        });
 
-        const axisPlacement = config.getAxisPlacement(seriesConfig.props.scaleKey);
+        let axisPlacement = AxisPlacement.Left;
+
+        // there is a bit of a bug here. since we no longer add hidden fields to the uplot config
+        // we cannot determine "auto" axis placement of hidden series
+        // we can fix this in future by decoupling some things
+        if (seriesConfig != null) {
+          axisPlacement = config.getAxisPlacement(seriesConfig.props.scaleKey);
+        } else {
+          let fieldAxisPlacement = field.config.custom?.axisPlacement;
+
+          // respect explicit non-auto placement
+          if (fieldAxisPlacement !== AxisPlacement.Auto) {
+            fieldAxisPlacement = fieldAxisPlacement;
+          }
+        }
 
         const label = field.state?.displayName ?? field.name;
         const scaleColor = getFieldSeriesColor(field, theme);
@@ -82,40 +96,6 @@ export const PlotLegend = memo(
       })
       .filter((item) => item !== undefined);
 
-    // const legendItems = config
-    //   .getSeries()
-    //   .map<VizLegendItem | undefined>((s) => {
-    //     const seriesConfig = s.props;
-    //     const fieldIndex = seriesConfig.dataFrameFieldIndex;
-    //     const axisPlacement = config.getAxisPlacement(s.props.scaleKey);
-
-    //     if (!fieldIndex) {
-    //       return undefined;
-    //     }
-
-    //     const field = data[fieldIndex.frameIndex]?.fields[fieldIndex.fieldIndex];
-
-    //     if (!field || field.config.custom?.hideFrom?.legend) {
-    //       return undefined;
-    //     }
-
-    //     const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data);
-    //     const scaleColor = getFieldSeriesColor(field, theme);
-    //     const seriesColor = scaleColor.color;
-
-    //     return {
-    //       disabled: !(seriesConfig.show ?? true),
-    //       fieldIndex,
-    //       color: seriesColor,
-    //       label,
-    //       yAxis: axisPlacement === AxisPlacement.Left || axisPlacement === AxisPlacement.Bottom ? 1 : 2,
-    //       getDisplayValues: () => getDisplayValuesForCalcs(calcs, field, theme),
-    //       getItemKey: () => `${label}-${fieldIndex.frameIndex}-${fieldIndex.fieldIndex}`,
-    //       lineStyle: seriesConfig.lineStyle,
-    //     };
-    //   })
-    //   .filter((i): i is VizLegendItem => i !== undefined);
-
     return (
       <VizLayout.Legend placement={placement} {...vizLayoutLegendProps}>
         <VizLegend

public/app/core/components/GraphNG/GraphNG.tsx

@@ -83,6 +83,9 @@ function sameProps<T extends Record<string, unknown>>(
  * @internal -- not a public API
  */
 export interface GraphNGState {
+  // includes fields hidden from viz
+  alignedFrameLegend: DataFrame;
+  // excludes fields hidden from viz
   alignedFrame: DataFrame;
   alignedData?: AlignedData;
   config?: UPlotConfigBuilder;
@@ -175,8 +178,10 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
         };
       }
 
+      const alignedFrameLegend = alignedFrameFinal;
+
       const nonHiddenFields = alignedFrameFinal.fields.filter(
-        (field, i) => i === 0 || field.config.custom?.hideFrom?.viz !== true
+        (field, i) => i === 0 || (!field.config.custom?.hideFrom?.viz && !field.state?.hideFrom?.viz)
       );
       alignedFrameFinal = {
         ...alignedFrameFinal,
@@ -193,6 +198,7 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
 
       state = {
         alignedFrame: alignedFrameFinal,
+        alignedFrameLegend,
         config,
       };
 
@@ -238,14 +244,14 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
 
   render() {
     const { width, height, children, renderLegend } = this.props;
-    const { config, alignedFrame, alignedData } = this.state;
+    const { config, alignedFrame, alignedFrameLegend, alignedData } = this.state;
 
     if (!config) {
       return null;
     }
 
     return (
-      <VizLayout width={width} height={height} legend={renderLegend(config, alignedFrame)}>
+      <VizLayout width={width} height={height} legend={renderLegend(config, alignedFrameLegend)}>
         {(vizWidth: number, vizHeight: number) => (
           <UPlotChart
             config={config}