[Lens] Value in legend

x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx

@@ -44,6 +44,18 @@ export interface LegendSettingsPopoverProps {
    * Callback on nested switch status change
    */
   onNestedLegendChange?: (event: EuiSwitchEvent) => void;
+  /**
+   * value in legend status
+   */
+  valueInLegend?: boolean;
+  /**
+   * Callback on value in legend status change
+   */
+  onValueInLegendChange?: (event: EuiSwitchEvent) => void;
+  /**
+   * If true, value in legend switch is rendered
+   */
+  renderValueInLegendSwitch?: boolean;
 }
 
 const toggleButtonsIcons = [
@@ -86,6 +98,9 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
   renderNestedLegendSwitch,
   nestedLegend,
   onNestedLegendChange = () => {},
+  valueInLegend,
+  onValueInLegendChange = () => {},
+  renderValueInLegendSwitch,
 }) => {
   return (
     <ToolbarPopover
@@ -155,6 +170,26 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
           />
         </EuiFormRow>
       )}
+      {renderValueInLegendSwitch && (
+        <EuiFormRow
+          display="columnCompressedSwitch"
+          label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
+            defaultMessage: 'Show value',
+          })}
+        >
+          <EuiSwitch
+            compressed
+            label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
+              defaultMessage: 'Show value',
+            })}
+            data-test-subj="lens-legend-show-value"
+            showLabel={false}
+            disabled={mode === 'hide'}
+            checked={!!valueInLegend}
+            onChange={onValueInLegendChange}
+          />
+        </EuiFormRow>
+      )}
     </ToolbarPopover>
   );
 };

x-pack/plugins/lens/public/xy_visualization/expression.test.tsx

@@ -265,6 +265,7 @@ const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({
     position: Position.Top,
   },
   valueLabels: 'hide',
+  valuesInLegend: false,
   axisTitlesVisibilitySettings: {
     type: 'lens_xy_axisTitlesVisibilityConfig',
     x: true,
@@ -839,6 +840,20 @@ describe('xy_expression', () => {
       expect(component.find(Settings).prop('xDomain')).toEqual({ minInterval: 101 });
     });
 
+    test('disabled legend extra by default', () => {
+      const { data, args } = sampleArgs();
+      const component = shallow(<XYChart {...defaultProps} data={data} args={args} />);
+      expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
+    });
+
+    test('enables legend extra', () => {
+      const { data, args } = sampleArgs();
+      const component = shallow(
+        <XYChart {...defaultProps} data={data} args={{ ...args, valuesInLegend: true }} />
+      );
+      expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(true);
+    });
+
     test('it renders bar', () => {
       const { data, args } = sampleArgs();
       const component = shallow(

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -209,6 +209,13 @@ export const xyChart: ExpressionFunctionDefinition<
         defaultMessage: 'Hide endzone markers for partial data',
       }),
     },
+    valuesInLegend: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('xpack.lens.xyChart.valuesInLegend.help', {
+        defaultMessage: 'Show values in legend',
+      }),
+    },
   },
   fn(data: LensMultiTable, args: XYArgs) {
     return {
@@ -365,6 +372,7 @@ export function XYChart({
     hideEndzones,
     yLeftExtent,
     yRightExtent,
+    valuesInLegend,
   } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
@@ -602,7 +610,6 @@ export function XYChart({
             : legend.isVisible
         }
         legendPosition={legend.position}
-        showLegendExtra={false}
         theme={{
           ...chartTheme,
           barSeriesStyle: {
@@ -622,6 +629,7 @@ export function XYChart({
         xDomain={xDomain}
         onBrushEnd={renderMode !== 'noInteractivity' ? brushHandler : undefined}
         onElementClick={renderMode !== 'noInteractivity' ? clickHandler : undefined}
+        showLegendExtra={valuesInLegend}
       />
 
       <Axis

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -244,6 +244,7 @@ export const buildExpression = (
           ],
           valueLabels: [state?.valueLabels || 'hide'],
           hideEndzones: [state?.hideEndzones || false],
+          valuesInLegend: [state?.valuesInLegend || false],
           layers: validLayers.map((layer) => {
             const columnToLabel = getColumnToLabelMap(layer, datasourceLayers[layer.layerId]);
 

x-pack/plugins/lens/public/xy_visualization/types.ts

@@ -466,6 +466,7 @@ export interface XYArgs {
   curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;
+  valuesInLegend?: boolean;
 }
 
 export type XYCurveType = 'LINEAR' | 'CURVE_MONOTONE_X';
@@ -488,6 +489,7 @@ export interface XYState {
   curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;
+  valuesInLegend?: boolean;
 }
 
 export type State = XYState;

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx

@@ -323,6 +323,14 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
                 legend: { ...state.legend, position: id as Position },
               });
             }}
+            renderValueInLegendSwitch={!!state}
+            valueInLegend={state?.valuesInLegend}
+            onValueInLegendChange={() => {
+              setState({
+                ...state,
+                valuesInLegend: !state.valuesInLegend,
+              });
+            }}
           />
         </EuiFlexGroup>
       </EuiFlexItem>

x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts

@@ -529,6 +529,7 @@ function buildSuggestion({
     yTitle: currentState?.yTitle,
     yRightTitle: currentState?.yRightTitle,
     hideEndzones: currentState?.hideEndzones,
+    valuesInLegend: currentState?.valuesInLegend,
     yLeftExtent: currentState?.yLeftExtent,
     yRightExtent: currentState?.yRightExtent,
     axisTitlesVisibilitySettings: currentState?.axisTitlesVisibilitySettings || {