Explore/Tooltip: Fix label value in tooltip (#25940)

* Fix value name in tooltip

* Fallback to field.name

* Use getFieldDisplayName method

packages/grafana-ui/src/components/Graph/GraphTooltip/SingleModeGraphTooltip.tsx

@@ -4,6 +4,7 @@ import {
   getColumnFromDimension,
   formattedValueToString,
   getDisplayProcessor,
+  getFieldDisplayName,
 } from '@grafana/data';
 import { SeriesTable } from './SeriesTable';
 import { GraphTooltipContentProps } from './types';
@@ -36,7 +37,7 @@ export const SingleModeGraphTooltip: React.FC<GraphTooltipContentProps> = ({
       series={[
         {
           color: disp.color,
-          label: valueField.name,
+          label: getFieldDisplayName(valueField),
           value: formattedValueToString(disp),
         },
       ]}

packages/grafana-ui/src/components/Graph/utils.ts

@@ -3,6 +3,7 @@ import {
   Field,
   formattedValueToString,
   getDisplayProcessor,
+  getFieldDisplayName,
   TimeZone,
   dateTimeFormat,
 } from '@grafana/data';
@@ -91,7 +92,7 @@ export const getMultiSeriesGraphHoverInfo = (
       datapointIndex: hoverIndex,
       seriesIndex: i,
       color: disp.color,
-      label: field.name,
+      label: getFieldDisplayName(field),
       time: time.display ? formattedValueToString(time.display(pointTime)) : pointTime,
     });
   }