From 6e41e898eb4c4336cbebd117458353964560b52f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Mon, 9 Jan 2023 20:28:10 +0100
Subject: [PATCH] Candlestick: Fix showing hidden legend values (#60971)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 .../visualizations/candlestick/index.md       |  2 ++
 .../panel/candlestick/CandlestickPanel.tsx    | 30 +++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md
index f833bde433d..3e7f5628a82 100644
--- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md
+++ b/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.
diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 8c8040285af..612622b51ab 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/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 (