diff --git a/src/components/legend/legend.test.tsx b/src/components/legend/legend.test.tsx
index e2e24dfa66..593d18479d 100644
--- a/src/components/legend/legend.test.tsx
+++ b/src/components/legend/legend.test.tsx
@@ -11,7 +11,7 @@ describe('Legend', () => {
   it('shall render the all the series names', () => {
     const wrapper = mount(
       <Chart>
-        <Settings showLegend />
+        <Settings showLegend showLegendExtra />
         <BarSeries
           id="areas"
           name="area"
@@ -78,7 +78,7 @@ describe('Legend', () => {
     const data = dg.generateGroupedSeries(10, numberOfSeries, 'split');
     const wrapper = mount(
       <Chart>
-        <Settings showLegend onLegendItemOver={onLegendItemOver} onLegendItemOut={onLegendItemOut} />
+        <Settings showLegend showLegendExtra onLegendItemOver={onLegendItemOver} onLegendItemOut={onLegendItemOut} />
         <BarSeries
           id="areas"
           xScaleType={ScaleType.Linear}
@@ -108,7 +108,7 @@ describe('Legend', () => {
     const data = dg.generateGroupedSeries(10, numberOfSeries, 'split');
     const wrapper = mount(
       <Chart>
-        <Settings showLegend onLegendItemClick={onLegendItemClick} />
+        <Settings showLegend showLegendExtra onLegendItemClick={onLegendItemClick} />
         <BarSeries
           id="areas"
           xScaleType={ScaleType.Linear}
diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
index e982f4749f..d316532ef5 100644
--- a/src/specs/settings.tsx
+++ b/src/specs/settings.tsx
@@ -139,6 +139,7 @@ export interface SettingsSpec extends Spec {
   legendPosition: Position;
   /**
    * Show an extra parameter on each legend item defined by the chart type
+   * @default false
    */
   showLegendExtra: boolean;
   /**
@@ -205,7 +206,7 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
     snap: DEFAULT_TOOLTIP_SNAP,
   },
   legendPosition: Position.Right,
-  showLegendExtra: true,
+  showLegendExtra: false,
   hideDuplicateAxes: false,
   theme: LIGHT_THEME,
 };
diff --git a/stories/annotations.tsx b/stories/annotations.tsx
index 2d09cc27de..2fae0ef2d4 100644
--- a/stories/annotations.tsx
+++ b/stories/annotations.tsx
@@ -70,7 +70,7 @@ export const lineBasicXDomainContinous = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
+      <Settings showLegend showLegendExtra debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
       <LineAnnotation
         id={getAnnotationId('anno_1')}
         domainType={AnnotationDomainTypes.XDomain}
diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx
index 9440331e13..1542a88c3e 100644
--- a/stories/area_chart.tsx
+++ b/stories/area_chart.tsx
@@ -193,7 +193,7 @@ with4Axes.story = {
 export const wAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}
@@ -236,7 +236,7 @@ export const stackedWAxisAndLegend = () => {
   const allMetrics = [...data3, ...data2, ...data1];
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -271,7 +271,7 @@ export const stackedAsPercentage = () => {
   const stackedAsPercentage = boolean('stacked as percentage', true);
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -310,7 +310,7 @@ stackedAsPercentage.story = {
 export const stackedWithSeparatedSpecs = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -364,7 +364,7 @@ stackedWithSeparatedSpecs.story = {
 export const stackedWithSeparatedSpecsSameNaming = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -504,7 +504,7 @@ export const bandAreaChart = () => {
   const y1AccessorFormat = text('y1AccessorFormat', '');
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}
@@ -557,7 +557,7 @@ export const stackedBandAreaChart = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend />
+      <Settings showLegend showLegendExtra />
       <Axis
         id={getAxisId('bottom')}
         title={'timestamp per 1 minute'}
diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
index 5361c00749..be815dc3dc 100644
--- a/stories/bar_chart.tsx
+++ b/stories/bar_chart.tsx
@@ -135,7 +135,7 @@ export const withValueLabel = () => {
   const stackAccessors = isStackedSeries ? ['x'] : undefined;
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings theme={theme} debug={debug} rotation={getChartRotationKnob()} showLegend />
+      <Settings theme={theme} debug={debug} rotation={getChartRotationKnob()} showLegend showLegendExtra />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -450,7 +450,7 @@ withStackedLogYAxis.story = {
 export const withAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -483,7 +483,7 @@ withAxisAndLegend.story = {
 export const stackedWithAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -523,7 +523,7 @@ export const stackedAsPercentage = () => {
   const clusterBars = boolean('cluster', true);
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -579,7 +579,13 @@ export const clusteredWithAxisAndLegend = () => {
   };
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} theme={theme} rotation={getChartRotationKnob()} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        theme={theme}
+        rotation={getChartRotationKnob()}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -616,7 +622,7 @@ clusteredWithAxisAndLegend.story = {
 export const clusteredMultipleSeriesSpecs = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'elements'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -784,7 +790,7 @@ timeStackedUsingVariousSpecs.story = {
 export const barChart1y0g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -811,7 +817,7 @@ barChart1y0g.story = {
 export const barChart1y1g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -839,7 +845,7 @@ barChart1y1g.story = {
 export const barChart1y2g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -867,7 +873,7 @@ barChart1y2g.story = {
 export const barChart2y0g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -894,7 +900,7 @@ barChart2y0g.story = {
 export const barChart2y1g = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -930,7 +936,7 @@ export const barChart2y2g = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -962,7 +968,7 @@ export const tooltipSeriesVisibility = () => {
   };
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
diff --git a/stories/interactions.tsx b/stories/interactions.tsx
index 97c69c1b66..ace87a346e 100644
--- a/stories/interactions.tsx
+++ b/stories/interactions.tsx
@@ -76,7 +76,13 @@ export const barClicksAndHovers = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} tooltip={tooltipProps} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        {...onElementListeners}
+        tooltip={tooltipProps}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -108,7 +114,7 @@ barClicksAndHovers.story = {
 export const areaPointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -140,7 +146,7 @@ areaPointClicksAndHovers.story = {
 export const linePointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -172,7 +178,7 @@ linePointClicksAndHovers.story = {
 export const lineAreaBarPointClicksAndHovers = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onElementListeners} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} {...onElementListeners} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -267,7 +273,13 @@ export const clicksHoversOnLegendItemsBarChart = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} {...onLegendItemListeners} xDomain={xDomain} />
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        {...onLegendItemListeners}
+        xDomain={xDomain}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -298,7 +310,8 @@ export const clickHoversOnLegendItemsAreaChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -342,7 +355,8 @@ export const clickHoversOnLegendItemsLineChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -451,7 +465,8 @@ export const clickHoversOnLegendItemsMixedChart = () => {
   return (
     <Chart className={'story-chart'}>
       <Settings
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
         onLegendItemClick={action('onLegendItemClick')}
         onLegendItemOver={action('onLegendItemOver')}
@@ -781,7 +796,7 @@ crosshairWithTimeAxis.story = {
 export const renderChangeAction = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} onRenderChange={onRenderChange} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} onRenderChange={onRenderChange} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -817,7 +832,7 @@ renderChangeAction.story = {
 export const cursorUpdateAction = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} onPointerUpdate={onPointerUpdate} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} onPointerUpdate={onPointerUpdate} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -886,7 +901,7 @@ export const pngExportAction = () => {
   button(label, handler, groupId);
   return (
     <Chart className={'story-chart'} ref={chartRef}>
-      <Settings showLegend={true} />
+      <Settings showLegend showLegendExtra />
       <Axis
         id={getAxisId('time')}
         position={Position.Bottom}
diff --git a/stories/legend.tsx b/stories/legend.tsx
index 7c729be812..0169923514 100644
--- a/stories/legend.tsx
+++ b/stories/legend.tsx
@@ -33,7 +33,7 @@ export const right = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -62,7 +62,7 @@ right.story = {
 export const bottom = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Bottom} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Bottom} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -90,7 +90,7 @@ bottom.story = {
 export const left = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Left} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Left} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -118,7 +118,7 @@ left.story = {
 export const top = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Top} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Top} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -147,7 +147,7 @@ export const changingSpecs = () => {
   const splitSeries = boolean('split series', true) ? ['g1', 'g2'] : undefined;
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Top} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Top} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -178,7 +178,7 @@ export const hideLegendItemsBySeries = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -289,7 +289,7 @@ export const legendSpacingBuffer = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings theme={theme} showLegend={true} legendPosition={Position.Right} />
+      <Settings theme={theme} showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
diff --git a/stories/line_chart.tsx b/stories/line_chart.tsx
index 089a14f94c..c7f2a49e53 100644
--- a/stories/line_chart.tsx
+++ b/stories/line_chart.tsx
@@ -146,7 +146,7 @@ linearWAxis.story = {
 export const wAxisAndLegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -177,7 +177,7 @@ wAxisAndLegend.story = {
 export const curvedwaxisandlegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -255,7 +255,7 @@ curvedwaxisandlegend.story = {
 export const multiplewaxisandlegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -306,7 +306,7 @@ multiplewaxisandlegend.story = {
 export const stackedwaxisandlegend = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -359,7 +359,7 @@ stackedwaxisandlegend.story = {
 export const multiserieswithlogvalues = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
diff --git a/stories/mixed.tsx b/stories/mixed.tsx
index fc42497a60..bbb27eacee 100644
--- a/stories/mixed.tsx
+++ b/stories/mixed.tsx
@@ -30,7 +30,7 @@ export default {
 export const barsAndLines = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} />
       <Axis
         id={getAxisId('left2')}
@@ -75,7 +75,7 @@ barsAndLines.story = {
 export const linesAndAreas = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -121,7 +121,7 @@ linesAndAreas.story = {
 export const areasAndBars = () => {
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -200,7 +200,7 @@ export const testBarLinesLinear = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -260,7 +260,7 @@ export const testBarLinesTime = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
diff --git a/stories/rotations.tsx b/stories/rotations.tsx
index feae1ccb90..2569c278a4 100644
--- a/stories/rotations.tsx
+++ b/stories/rotations.tsx
@@ -17,6 +17,7 @@ export const withOrdinalAxis = () => {
       <Settings
         debug={boolean('Debug', true)}
         showLegend={boolean('Legend', true)}
+        showLegendExtra
         legendPosition={select(
           'Legend position',
           {
@@ -76,7 +77,7 @@ withOrdinalAxis.story = {
 export const negative90DegreeOrdinal = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={-90} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} />
       <Axis id={getAxisId('y top')} position={Position.Top} title={'y top axis'} />
       <Axis id={getAxisId('x right')} title={'x right axis'} position={Position.Right} />
       <Axis id={getAxisId('y bottom')} position={Position.Bottom} title={'y bottom axis'} />
@@ -104,7 +105,7 @@ negative90DegreeOrdinal.story = {
 export const rotations0DegOrdinal = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={0} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} />
       <Axis id={getAxisId('x top')} position={Position.Top} title={'x top axis'} />
       <Axis id={getAxisId('y right')} title={'y right axis'} position={Position.Right} />
       <Axis id={getAxisId('x bottom')} position={Position.Bottom} title={'x bottom axis'} />
@@ -132,7 +133,7 @@ rotations0DegOrdinal.story = {
 export const rotations90DegOrdinal = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={90} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} />
       <Axis id={getAxisId('y top')} position={Position.Top} title={'y top axis'} />
       <Axis id={getAxisId('x right')} title={'x right axis'} position={Position.Right} />
       <Axis id={getAxisId('y bottom')} position={Position.Bottom} title={'y bottom axis'} />
@@ -160,7 +161,7 @@ rotations90DegOrdinal.story = {
 export const rotations180DegOrdinal = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={180} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} />
       <Axis id={getAxisId('x top')} position={Position.Top} title={'x top axis'} />
       <Axis id={getAxisId('y right')} title={'y right axis'} position={Position.Right} />
       <Axis id={getAxisId('x bottom')} position={Position.Bottom} title={'x bottom axis'} />
@@ -188,7 +189,7 @@ rotations180DegOrdinal.story = {
 export const negative90DegLinear = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={-90} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={-90} />
       <Axis id={getAxisId('y top')} position={Position.Top} title={'y top axis'} />
       <Axis id={getAxisId('x right')} title={'x right axis'} position={Position.Right} />
       <Axis id={getAxisId('y bottom')} position={Position.Bottom} title={'y bottom axis'} />
@@ -216,7 +217,7 @@ negative90DegLinear.story = {
 export const rotations0DegLinear = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={0} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={0} />
       <Axis id={getAxisId('x top')} position={Position.Top} title={'x top axis'} />
       <Axis id={getAxisId('y right')} title={'y right axis'} position={Position.Right} />
       <Axis id={getAxisId('x bottom')} position={Position.Bottom} title={'x bottom axis'} />
@@ -244,7 +245,7 @@ rotations0DegLinear.story = {
 export const rotations90DegLinear = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={90} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={90} />
       <Axis id={getAxisId('y top')} position={Position.Top} title={'y top axis'} />
       <Axis id={getAxisId('x right')} title={'x right axis'} position={Position.Right} />
       <Axis id={getAxisId('y bottom')} position={Position.Bottom} title={'y bottom axis'} />
@@ -272,7 +273,7 @@ rotations90DegLinear.story = {
 export const rotations180DegLinear = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} rotation={180} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} rotation={180} />
       <Axis id={getAxisId('x top')} position={Position.Top} title={'x top axis'} />
       <Axis id={getAxisId('y right')} title={'y right axis'} position={Position.Right} />
       <Axis id={getAxisId('x bottom')} position={Position.Bottom} title={'x bottom axis'} />
diff --git a/stories/styling.tsx b/stories/styling.tsx
index 66f757243c..a5089830f1 100644
--- a/stories/styling.tsx
+++ b/stories/styling.tsx
@@ -221,7 +221,13 @@ export const marginsAndPaddings = () => {
   const withTopTitle = boolean('top axis with title', true);
   return (
     <Chart className={'story-chart'}>
-      <Settings theme={theme} debug={boolean('debug', true)} showLegend={true} legendPosition={Position.Right} />
+      <Settings
+        theme={theme}
+        debug={boolean('debug', true)}
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+      />
       <Axis
         id={getAxisId('bottom')}
         position={Position.Bottom}
@@ -435,7 +441,8 @@ export const themeStyle = () => {
         theme={theme}
         baseTheme={darkmode ? DARK_THEME : LIGHT_THEME}
         debug={boolean('debug', false)}
-        showLegend={true}
+        showLegend
+        showLegendExtra
         legendPosition={Position.Right}
       />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
@@ -499,7 +506,7 @@ export const partialCustomTheme = () => {
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend theme={customPartialTheme} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra theme={customPartialTheme} legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -543,7 +550,13 @@ export const partialCustomThemeWithBaseTheme = () => {
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend theme={customPartialTheme} baseTheme={LIGHT_THEME} legendPosition={Position.Right} />
+      <Settings
+        showLegend
+        showLegendExtra
+        theme={customPartialTheme}
+        baseTheme={LIGHT_THEME}
+        legendPosition={Position.Right}
+      />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -594,7 +607,7 @@ export const multipleCustomPartialThemes = () => {
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend theme={[primaryTheme, secondaryTheme]} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra theme={[primaryTheme, secondaryTheme]} legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -635,7 +648,7 @@ multipleCustomPartialThemes.story = {
 export const customSeriesColorsViaColorsArray = () => {
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -688,7 +701,7 @@ export const customSeriesColorsViaAccessorFunction = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -758,7 +771,7 @@ export const customSeriesStylesBars = () => {
 
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} theme={theme} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} theme={theme} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -815,7 +828,7 @@ export const customSeriesStylesLines = () => {
 
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} theme={chartTheme} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} theme={chartTheme} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -880,7 +893,7 @@ export const customSeriesStylesArea = () => {
 
   return (
     <Chart renderer="canvas" className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} theme={chartTheme} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} theme={chartTheme} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -950,7 +963,7 @@ export const addCustomFullAndSubSeriesLabel = () => {
   };
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}
@@ -1013,7 +1026,7 @@ export const addCustomSubSeriesLabelFormatting = () => {
 
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={Position.Right} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}