Candlestick: Fix showing hidden legend values (#60971)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

docs/sources/panels-visualizations/visualizations/candlestick/index.md

@@ -48,6 +48,8 @@ The **Up color** and **Down color** options select which colors are used when th
 
 The candlestick panel will attempt to map fields to the appropriate dimension. The **Open**, **High**, **Low**, and **Close** options allow you to map your data to these dimensions if the panel is unable to do so.
 
+> **Note**: These values are hidden from the legend.
+
 - **Open** corresponds to the starting value of the given period.
 - **High** corresponds to the highest value of the given period.
 - **Low** corresponds to the lowest value of the given period.

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -51,7 +51,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
     return prepareCandlestickFields(data.series, options, theme, timeRange);
   }, [data, options, theme, timeRange]);
 
-  const { renderers, tweakScale, tweakAxis } = useMemo(() => {
+  const { renderers, tweakScale, tweakAxis, shouldRenderPrice } = useMemo(() => {
     let tweakScale = (opts: ScaleProps, forField: Field) => opts;
     let tweakAxis = (opts: AxisProps, forField: Field) => opts;
 
@@ -59,6 +59,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
       renderers: [],
       tweakScale,
       tweakAxis,
+      shouldRenderPrice: false,
     };
 
     if (!info) {
@@ -159,18 +160,6 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
 
     if (shouldRenderPrice) {
       fields = { open, high: high!, low: low!, close };
-
-      // hide series from legend that are rendered as composite markers
-      for (let key in fields) {
-        let field = (info as any)[key] as Field;
-        field.config = {
-          ...field.config,
-          custom: {
-            ...field.config.custom,
-            hideFrom: { legend: true, tooltip: false, viz: false },
-          },
-        };
-      }
     } else {
       // these fields should not be omitted from normal rendering if they arent rendered
       // as part of price markers. they're only here so we can get back their indicies in the
@@ -185,6 +174,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
     }
 
     return {
+      shouldRenderPrice,
       renderers: [
         {
           fieldMap: fields,
@@ -227,6 +217,20 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
     );
   }
 
+  if (shouldRenderPrice) {
+    // hide series from legend that are rendered as composite markers
+    for (let key in renderers[0].fieldMap) {
+      let field = (info as any)[key] as Field;
+      field.config = {
+        ...field.config,
+        custom: {
+          ...field.config.custom,
+          hideFrom: { legend: true, tooltip: false, viz: false },
+        },
+      };
+    }
+  }
+
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());
 
   return (