diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png
new file mode 100644
index 0000000000..09ba4ae302
Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-legend-scroll-bar-sizing-visually-looks-correct-1-snap.png differ
diff --git a/src/state/selectors/get_legend_size.ts b/src/state/selectors/get_legend_size.ts
index 10b15b84ad..26ce650420 100644
--- a/src/state/selectors/get_legend_size.ts
+++ b/src/state/selectors/get_legend_size.ts
@@ -33,7 +33,7 @@ import { getLegendItemsLabelsSelector } from './get_legend_items_labels';
 
 const getParentDimensionSelector = (state: GlobalChartState) => state.parentDimensions;
 
-const SCROLL_BAR_WIDTH = 6; // ~1em
+const SCROLL_BAR_WIDTH = 16; // ~1em
 const MARKER_WIDTH = 16;
 const SHARED_MARGIN = 4;
 const VERTICAL_PADDING = 4;
diff --git a/stories/test_cases/5_legend_scroll_bar_sizing.tsx b/stories/test_cases/5_legend_scroll_bar_sizing.tsx
new file mode 100644
index 0000000000..8b62ddbe32
--- /dev/null
+++ b/stories/test_cases/5_legend_scroll_bar_sizing.tsx
@@ -0,0 +1,89 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { Chart, Axis, Position, BarSeries, ScaleType, Settings } from '../../src';
+
+const data = [
+  { g: 'AE', x: '2021-04-06 00:00', y: 1 },
+  { g: 'AE', x: '2021-04-06 03:00', y: 0 },
+  { g: 'AF', x: '2021-04-07 06:00', y: 1 },
+  { g: 'AF', x: '2021-04-07 09:00', y: 0 },
+  { g: 'AM', x: '2021-04-10 09:00', y: 1 },
+  { g: 'AO', x: '2021-04-07 09:00', y: 1 },
+  { g: 'AO', x: '2021-04-07 12:00', y: 0 },
+  { g: 'AR', x: '2021-04-07 03:00', y: 1 },
+  { g: 'AR', x: '2021-04-07 06:00', y: 0 },
+  { g: 'AT', x: '2021-04-12 03:00', y: 1 },
+  { g: 'AU', x: '2021-04-06 09:00', y: 1 },
+  { g: 'AU', x: '2021-04-06 12:00', y: 0 },
+  { g: 'AZ', x: '2021-04-10 15:00', y: 1 },
+  { g: 'AZ', x: '2021-04-10 18:00', y: 0 },
+  { g: 'BA', x: '2021-04-09 06:00', y: 1 },
+  { g: 'BA', x: '2021-04-09 09:00', y: 0 },
+  { g: 'BD', x: '2021-04-06 03:00', y: 3 },
+  { g: 'BD', x: '2021-04-06 06:00', y: 2 },
+  { g: 'BD', x: '2021-04-06 09:00', y: 1 },
+  { g: 'BD', x: '2021-04-06 12:00', y: 0 },
+  { g: 'BE', x: '2021-04-07 06:00', y: 1 },
+  { g: 'BF', x: '2021-04-09 09:00', y: 1 },
+  { g: 'BJ', x: '2021-04-07 15:00', y: 1 },
+  { g: 'BJ', x: '2021-04-07 18:00', y: 0 },
+  { g: 'BO', x: '2021-04-07 06:00', y: 1 },
+  { g: 'BO', x: '2021-04-07 09:00', y: 0 },
+  { g: 'BR', x: '2021-04-06 03:00', y: 3 },
+  { g: 'BR', x: '2021-04-06 06:00', y: 0 },
+  { g: 'BR', x: '2021-04-06 09:00', y: 2 },
+  { g: 'BR', x: '2021-04-06 12:00', y: 1 },
+  { g: 'BR', x: '2021-04-06 15:00', y: 0 },
+  { g: 'BW', x: '2021-04-06 03:00', y: 1 },
+  { g: 'BY', x: '2021-04-08 06:00', y: 1 },
+  { g: 'CA', x: '2021-04-07 09:00', y: 1 },
+  { g: 'CA', x: '2021-04-07 12:00', y: 0 },
+  { g: 'CA', x: '2021-04-08 06:00', y: 0 },
+  { g: 'CA', x: '2021-04-08 09:00', y: 2 },
+  { g: 'CA', x: '2021-04-08 12:00', y: 0 },
+  { g: 'CD', x: '2021-04-07 03:00', y: 1 },
+  { g: 'CD', x: '2021-04-07 06:00', y: 1 },
+  { g: 'CD', x: '2021-04-07 09:00', y: 1 },
+  { g: 'CD', x: '2021-04-07 12:00', y: 0 },
+  { g: 'CG', x: '2021-04-12 06:00', y: 1 },
+];
+
+/**
+ * Should filter out zero values when fitting domain
+ */
+export const Example = () => {
+  return (
+    <Chart className="story-chart">
+      <Settings showLegend />
+      <Axis id="count" position={Position.Left} />
+      <Axis id="time" position={Position.Bottom} integersOnly />
+      <BarSeries
+        id="bars"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        splitSeriesAccessors={['g']}
+        stackAccessors={['g']}
+        data={data}
+      />
+    </Chart>
+  );
+};
diff --git a/stories/test_cases/test_cases.stories.tsx b/stories/test_cases/test_cases.stories.tsx
index 816243fb2e..3f75475915 100644
--- a/stories/test_cases/test_cases.stories.tsx
+++ b/stories/test_cases/test_cases.stories.tsx
@@ -30,3 +30,4 @@ export { Example as noSeries } from './1_no_series';
 export { Example as chromePathBugFix } from './2_chrome_path_bug_fix';
 export { Example as noAxesAnnotationBugFix } from './3_no_axes_annotation';
 export { Example as filterZerosInLogFitDomain } from './4_filter_zero_values_log';
+export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing';