diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
index 34e1e87300..4fd47a5d77 100644
--- a/packages/polaris-viz/src/components/ComboChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
@@ -332,6 +332,7 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
+          width={width}
         />
       )}
     </ChartElements.Div>
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
index 17b3ce4435..63342bca41 100644
--- a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
+++ b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
@@ -204,7 +204,7 @@ export const SampleLegendChart = ({theme} = {theme: 'Default'}) => {
 export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => {
   const selectedTheme = useTheme(theme);
   const colors = getSeriesColors(6, selectedTheme);
-  const {legend} = useLegend({
+  const {legend, width} = useLegend({
     data: [
       {
         shape: 'Line',
@@ -253,6 +253,7 @@ export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => {
           colorVisionType=""
           data={legend}
           onDimensionChange={() => {}}
+          width={width}
         />
       </div>
     </SimpleContainer>
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
index 27089445f3..9c4629a541 100644
--- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -282,6 +282,7 @@ export function Chart({
           direction={legendDirection}
           position={legendPosition}
           maxWidth={maxLegendWidth}
+          width={width}
           renderLegendContent={
             shouldRenderLegendContentWithValues
               ? renderLegendContentWithValues
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
index 0006ad6639..fc9efe7b2d 100644
--- a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -307,6 +307,7 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
+          width={width}
         />
       )}
     </ChartElements.Div>
diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
index 4bb9e2be90..99bd887613 100644
--- a/packages/polaris-viz/src/components/Legend/Legend.tsx
+++ b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, type RefObject} from 'react';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../../hooks';
@@ -11,6 +11,7 @@ export interface LegendProps {
   activeIndex?: number;
   colorVisionType?: string;
   theme?: string;
+  cardDimensions: RefObject<{width: number; height: number}[]>;
 }
 
 export function Legend({
@@ -18,6 +19,7 @@ export function Legend({
   colorVisionType,
   data,
   theme = DEFAULT_THEME_NAME,
+  cardDimensions,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -34,9 +36,18 @@ export function Legend({
         colorVisionType={colorVisionType}
         index={index}
         theme={theme}
+        onDimensionChange={(dimensions) => {
+          if (cardDimensions.current != null) {
+            cardDimensions.current[index] = dimensions;
+          }
+        }}
       />
     );
   });
 
-  return <Fragment>{items}</Fragment>;
+  return (
+    <Fragment>
+      {items}
+    </Fragment>
+  );
 }
diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
index 5ff8bd0ac7..082c3d6ac4 100644
--- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
+++ b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
@@ -2,7 +2,7 @@ import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
 } from '@shopify/polaris-viz-core';
-import type {ReactNode} from 'react';
+import {useEffect, type ReactNode, useRef} from 'react';
 
 import {
   LEGEND_ITEM_LEFT_PADDING,
@@ -22,6 +22,7 @@ export interface LegendItemProps extends LegendData {
   colorVisionType?: string;
   renderSeriesIcon?: () => ReactNode;
   theme?: string;
+  onDimensionChange?: ({width, height}: {width: number, height: number}) => void;
 }
 
 export function LegendItem({
@@ -35,8 +36,17 @@ export function LegendItem({
   shape,
   theme,
   value,
+  onDimensionChange,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    if (onDimensionChange && ref.current != null) {
+      const {width, height} = ref.current.getBoundingClientRect();
+      onDimensionChange({width, height});
+    }
+  }, [onDimensionChange, ref]);
 
   const colorBlindAttrs =
     colorVisionType == null
@@ -60,6 +70,7 @@ export function LegendItem({
         gap: LEGEND_ITEM_GAP,
       }}
       className={style.Legend}
+      ref={ref}
     >
       {renderSeriesIcon == null ? (
         <span
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss
index ea329e302c..c1668f2f6b 100644
--- a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss
+++ b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.scss
@@ -1,5 +1,11 @@
 .Container {
   display: flex;
   gap: 10px;
-  flex-wrap: wrap;
+}
+
+.MoreText {
+  color: white;
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
 }
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
index 628a41383e..69a9e997cb 100644
--- a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
+++ b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -1,5 +1,5 @@
 import type {CSSProperties, Dispatch, SetStateAction} from 'react';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import isEqual from 'fast-deep-equal';
 import {
   getColorVisionEventAttrs,
@@ -23,6 +23,10 @@ import {classNames} from '../../utilities';
 
 import style from './LegendContainer.scss';
 
+const MORE_TEXT_WIDTH = 50;
+const MAX_VERTICAL_LEGEND_ITEMS = 5;
+const LEGEND_GAP = 10;
+
 export interface LegendContainerProps {
   colorVisionType: string;
   data: LegendData[];
@@ -32,6 +36,8 @@ export interface LegendContainerProps {
   position?: LegendPosition;
   maxWidth?: number;
   renderLegendContent?: RenderLegendContent;
+  onItemDimensionChange?: any;
+  width: number;
 }
 
 export function LegendContainer({
@@ -43,6 +49,7 @@ export function LegendContainer({
   position = 'bottom-right',
   maxWidth,
   renderLegendContent,
+  width,
 }: LegendContainerProps) {
   const selectedTheme = useTheme();
   const {setRef, entry} = useResizeObserver();
@@ -57,6 +64,38 @@ export function LegendContainer({
   const {horizontalMargin} = selectedTheme.grid;
   const leftMargin = isPositionLeft ? 0 : horizontalMargin;
 
+  const cardDimensions = useRef([{width: 0, height: 0}]);
+
+  const truncatedLegend = useMemo(() => {
+    if (direction === 'vertical') {
+      return data.slice(0, MAX_VERTICAL_LEGEND_ITEMS);
+    } else {
+      let cutOffIndex = data.length;
+      const containerWidth =
+        width - leftMargin - horizontalMargin - MORE_TEXT_WIDTH;
+
+      cardDimensions.current.reduce((totalWidth, card, index) => {
+        if (totalWidth + card.width + index * LEGEND_GAP > containerWidth) {
+          cutOffIndex = index;
+        } else {
+          return totalWidth + card.width;
+        }
+      }, cutOffIndex);
+
+      return data.slice(0, cutOffIndex);
+    }
+  }, [
+    cardDimensions.current,
+    direction,
+    data,
+    width,
+    leftMargin,
+    horizontalMargin,
+  ]);
+
+  const shouldTruncateLegend =
+    truncatedLegend.length < data.length && data.length > 2;
+
   const styleMap: {[key: string]: CSSProperties} = {
     horizontal: {
       justifyContent: 'flex-end',
@@ -64,6 +103,7 @@ export function LegendContainer({
         ? `0 ${horizontalMargin}px ${LEGENDS_BOTTOM_MARGIN}px ${leftMargin}px`
         : `${LEGENDS_TOP_MARGIN}px ${horizontalMargin}px 0 ${leftMargin}px`,
       flexDirection: 'row',
+      flexWrap: shouldTruncateLegend ? 'nowrap' : 'wrap',
     },
     vertical: {
       alignItems: 'flex-start',
@@ -125,12 +165,20 @@ export function LegendContainer({
       style={{...styleMap[direction], ...shouldCenterTiles(position)}}
     >
       {renderLegendContent?.(colorVisionInteractionMethods) ?? (
-        <Legend
-          activeIndex={activeIndex}
-          colorVisionType={colorVisionType}
-          data={data}
-          theme={theme}
-        />
+        <>
+          <Legend
+            activeIndex={activeIndex}
+            colorVisionType={colorVisionType}
+            data={shouldTruncateLegend ? truncatedLegend : data}
+            theme={theme}
+            cardDimensions={cardDimensions}
+          />
+          {shouldTruncateLegend && (
+            <div className={style.MoreText}>
+              {`+${data.length - truncatedLegend.length} more`}
+            </div>
+          )}
+        </>
       )}
     </div>
   );
diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
index 2b2e6dd2ff..738593c859 100644
--- a/packages/polaris-viz/src/components/LineChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -424,6 +424,7 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
+          width={width}
         />
       )}
     </Fragment>
diff --git a/packages/polaris-viz/src/components/LineChart/stories/data.tsx b/packages/polaris-viz/src/components/LineChart/stories/data.tsx
index 1dec5b1970..04631ce947 100644
--- a/packages/polaris-viz/src/components/LineChart/stories/data.tsx
+++ b/packages/polaris-viz/src/components/LineChart/stories/data.tsx
@@ -51,7 +51,7 @@ export const DEFAULT_PROPS: Partial<LineChartProps> = {
 
 export const DEFAULT_DATA = [
   {
-    name: 'Apr 1 – Apr 14, 2020',
+    name: '1 a very very very very very very very long name',
     data: [
       {value: 333, key: '2020-04-01T12:00:00'},
       {value: 797, key: '2020-04-02T12:00:00'},
@@ -70,7 +70,207 @@ export const DEFAULT_DATA = [
     ],
   },
   {
-    name: 'Previous month',
+    name: '2 a very very very very very very very long name',
+    data: [
+      {value: 709, key: '2020-03-02T12:00:00'},
+      {value: 238, key: '2020-03-01T12:00:00'},
+      {value: 190, key: '2020-03-03T12:00:00'},
+      {value: 90, key: '2020-03-04T12:00:00'},
+      {value: 237, key: '2020-03-05T12:00:00'},
+      {value: 580, key: '2020-03-07T12:00:00'},
+      {value: 172, key: '2020-03-06T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 390, key: '2020-03-09T12:00:00'},
+      {value: 43, key: '2020-03-10T12:00:00'},
+      {value: 710, key: '2020-03-11T12:00:00'},
+      {value: 791, key: '2020-03-12T12:00:00'},
+      {value: 623, key: '2020-03-13T12:00:00'},
+      {value: 21, key: '2020-03-14T12:00:00'},
+    ],
+    color: 'red',
+    isComparison: true,
+  },
+  {
+    name: '3',
+    data: [
+      {value: 333, key: '2020-04-01T12:00:00'},
+      {value: 797, key: '2020-04-02T12:00:00'},
+      {value: 234, key: '2020-04-03T12:00:00'},
+      {value: 534, key: '2020-04-04T12:00:00'},
+      {value: 132, key: '2020-04-05T12:00:00'},
+      {value: 159, key: '2020-04-06T12:00:00'},
+      {value: 239, key: '2020-04-07T12:00:00'},
+      {value: 708, key: '2020-04-08T12:00:00'},
+      {value: 234, key: '2020-04-09T12:00:00'},
+      {value: 645, key: '2020-04-10T12:00:00'},
+      {value: 543, key: '2020-04-11T12:00:00'},
+      {value: 89, key: '2020-04-12T12:00:00'},
+      {value: 849, key: '2020-04-13T12:00:00'},
+      {value: 129, key: '2020-04-14T12:00:00'},
+    ],
+  },
+  {
+    name: '4',
+    data: [
+      {value: 709, key: '2020-03-02T12:00:00'},
+      {value: 238, key: '2020-03-01T12:00:00'},
+      {value: 190, key: '2020-03-03T12:00:00'},
+      {value: 90, key: '2020-03-04T12:00:00'},
+      {value: 237, key: '2020-03-05T12:00:00'},
+      {value: 580, key: '2020-03-07T12:00:00'},
+      {value: 172, key: '2020-03-06T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 390, key: '2020-03-09T12:00:00'},
+      {value: 43, key: '2020-03-10T12:00:00'},
+      {value: 710, key: '2020-03-11T12:00:00'},
+      {value: 791, key: '2020-03-12T12:00:00'},
+      {value: 623, key: '2020-03-13T12:00:00'},
+      {value: 21, key: '2020-03-14T12:00:00'},
+    ],
+    color: 'red',
+    isComparison: true,
+  },
+  {
+    name: '5',
+    data: [
+      {value: 333, key: '2020-04-01T12:00:00'},
+      {value: 797, key: '2020-04-02T12:00:00'},
+      {value: 234, key: '2020-04-03T12:00:00'},
+      {value: 534, key: '2020-04-04T12:00:00'},
+      {value: 132, key: '2020-04-05T12:00:00'},
+      {value: 159, key: '2020-04-06T12:00:00'},
+      {value: 239, key: '2020-04-07T12:00:00'},
+      {value: 708, key: '2020-04-08T12:00:00'},
+      {value: 234, key: '2020-04-09T12:00:00'},
+      {value: 645, key: '2020-04-10T12:00:00'},
+      {value: 543, key: '2020-04-11T12:00:00'},
+      {value: 89, key: '2020-04-12T12:00:00'},
+      {value: 849, key: '2020-04-13T12:00:00'},
+      {value: 129, key: '2020-04-14T12:00:00'},
+    ],
+  },
+  {
+    name: '6',
+    data: [
+      {value: 709, key: '2020-03-02T12:00:00'},
+      {value: 238, key: '2020-03-01T12:00:00'},
+      {value: 190, key: '2020-03-03T12:00:00'},
+      {value: 90, key: '2020-03-04T12:00:00'},
+      {value: 237, key: '2020-03-05T12:00:00'},
+      {value: 580, key: '2020-03-07T12:00:00'},
+      {value: 172, key: '2020-03-06T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 390, key: '2020-03-09T12:00:00'},
+      {value: 43, key: '2020-03-10T12:00:00'},
+      {value: 710, key: '2020-03-11T12:00:00'},
+      {value: 791, key: '2020-03-12T12:00:00'},
+      {value: 623, key: '2020-03-13T12:00:00'},
+      {value: 21, key: '2020-03-14T12:00:00'},
+    ],
+    color: 'red',
+    isComparison: true,
+  },
+  {
+    name: '7',
+    data: [
+      {value: 333, key: '2020-04-01T12:00:00'},
+      {value: 797, key: '2020-04-02T12:00:00'},
+      {value: 234, key: '2020-04-03T12:00:00'},
+      {value: 534, key: '2020-04-04T12:00:00'},
+      {value: 132, key: '2020-04-05T12:00:00'},
+      {value: 159, key: '2020-04-06T12:00:00'},
+      {value: 239, key: '2020-04-07T12:00:00'},
+      {value: 708, key: '2020-04-08T12:00:00'},
+      {value: 234, key: '2020-04-09T12:00:00'},
+      {value: 645, key: '2020-04-10T12:00:00'},
+      {value: 543, key: '2020-04-11T12:00:00'},
+      {value: 89, key: '2020-04-12T12:00:00'},
+      {value: 849, key: '2020-04-13T12:00:00'},
+      {value: 129, key: '2020-04-14T12:00:00'},
+    ],
+  },
+  {
+    name: '8',
+    data: [
+      {value: 709, key: '2020-03-02T12:00:00'},
+      {value: 238, key: '2020-03-01T12:00:00'},
+      {value: 190, key: '2020-03-03T12:00:00'},
+      {value: 90, key: '2020-03-04T12:00:00'},
+      {value: 237, key: '2020-03-05T12:00:00'},
+      {value: 580, key: '2020-03-07T12:00:00'},
+      {value: 172, key: '2020-03-06T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 390, key: '2020-03-09T12:00:00'},
+      {value: 43, key: '2020-03-10T12:00:00'},
+      {value: 710, key: '2020-03-11T12:00:00'},
+      {value: 791, key: '2020-03-12T12:00:00'},
+      {value: 623, key: '2020-03-13T12:00:00'},
+      {value: 21, key: '2020-03-14T12:00:00'},
+    ],
+    color: 'red',
+    isComparison: true,
+  },
+  {
+    name: '9',
+    data: [
+      {value: 333, key: '2020-04-01T12:00:00'},
+      {value: 797, key: '2020-04-02T12:00:00'},
+      {value: 234, key: '2020-04-03T12:00:00'},
+      {value: 534, key: '2020-04-04T12:00:00'},
+      {value: 132, key: '2020-04-05T12:00:00'},
+      {value: 159, key: '2020-04-06T12:00:00'},
+      {value: 239, key: '2020-04-07T12:00:00'},
+      {value: 708, key: '2020-04-08T12:00:00'},
+      {value: 234, key: '2020-04-09T12:00:00'},
+      {value: 645, key: '2020-04-10T12:00:00'},
+      {value: 543, key: '2020-04-11T12:00:00'},
+      {value: 89, key: '2020-04-12T12:00:00'},
+      {value: 849, key: '2020-04-13T12:00:00'},
+      {value: 129, key: '2020-04-14T12:00:00'},
+    ],
+  },
+  {
+    name: '10',
+    data: [
+      {value: 709, key: '2020-03-02T12:00:00'},
+      {value: 238, key: '2020-03-01T12:00:00'},
+      {value: 190, key: '2020-03-03T12:00:00'},
+      {value: 90, key: '2020-03-04T12:00:00'},
+      {value: 237, key: '2020-03-05T12:00:00'},
+      {value: 580, key: '2020-03-07T12:00:00'},
+      {value: 172, key: '2020-03-06T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 390, key: '2020-03-09T12:00:00'},
+      {value: 43, key: '2020-03-10T12:00:00'},
+      {value: 710, key: '2020-03-11T12:00:00'},
+      {value: 791, key: '2020-03-12T12:00:00'},
+      {value: 623, key: '2020-03-13T12:00:00'},
+      {value: 21, key: '2020-03-14T12:00:00'},
+    ],
+    color: 'red',
+    isComparison: true,
+  },
+  {
+    name: '11',
+    data: [
+      {value: 333, key: '2020-04-01T12:00:00'},
+      {value: 797, key: '2020-04-02T12:00:00'},
+      {value: 234, key: '2020-04-03T12:00:00'},
+      {value: 534, key: '2020-04-04T12:00:00'},
+      {value: 132, key: '2020-04-05T12:00:00'},
+      {value: 159, key: '2020-04-06T12:00:00'},
+      {value: 239, key: '2020-04-07T12:00:00'},
+      {value: 708, key: '2020-04-08T12:00:00'},
+      {value: 234, key: '2020-04-09T12:00:00'},
+      {value: 645, key: '2020-04-10T12:00:00'},
+      {value: 543, key: '2020-04-11T12:00:00'},
+      {value: 89, key: '2020-04-12T12:00:00'},
+      {value: 849, key: '2020-04-13T12:00:00'},
+      {value: 129, key: '2020-04-14T12:00:00'},
+    ],
+  },
+  {
+    name: '12',
     data: [
       {value: 709, key: '2020-03-02T12:00:00'},
       {value: 238, key: '2020-03-01T12:00:00'},
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx
index b962237da6..cca25dfbb1 100644
--- a/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx
+++ b/packages/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx
@@ -49,6 +49,7 @@ export function CustomLegend({
               name={name!}
               shape="Line"
               theme={theme}
+              onDimensionChange={() => {}}
             />
           </li>
         );
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/stories/data.tsx b/packages/polaris-viz/src/components/LineChartPredictive/stories/data.tsx
index 6e73af18e4..94d20af75e 100644
--- a/packages/polaris-viz/src/components/LineChartPredictive/stories/data.tsx
+++ b/packages/polaris-viz/src/components/LineChartPredictive/stories/data.tsx
@@ -144,4 +144,496 @@ export const DEFAULT_DATA: LineChartPredictiveDataSeries[] = [
       },
     },
   },
+  {
+    name: 'One',
+    data: [
+      {value: 88, key: '2020-03-01T12:00:00'},
+      {value: 559, key: '2020-03-02T12:00:00'},
+      {value: 40, key: '2020-03-03T12:00:00'},
+      {value: 0, key: '2020-03-04T12:00:00'},
+      {value: 87, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: null, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: 430, key: '2020-03-07T12:00:00'},
+      {value: 0, key: '2020-03-08T12:00:00'},
+      {value: 240, key: '2020-03-09T12:00:00'},
+      {value: 0, key: '2020-03-10T12:00:00'},
+      {value: 540, key: '2020-03-11T12:00:00'},
+      {value: 641, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 0,
+      isPredictive: true,
+      startKey: '2020-03-06T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two',
+    data: [
+      {value: 23, key: '2020-03-01T12:00:00'},
+      {value: 12, key: '2020-03-02T12:00:00'},
+      {value: 234, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: null, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: 23, key: '2020-03-05T12:00:00'},
+      {value: 57, key: '2020-03-06T12:00:00'},
+      {value: 43, key: '2020-03-07T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 23, key: '2020-03-09T12:00:00'},
+      {value: 152, key: '2020-03-10T12:00:00'},
+      {value: 300, key: '2020-03-11T12:00:00'},
+      {value: 500, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 2,
+      isPredictive: true,
+      startKey: '2020-03-04T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Comparison',
+    data: [
+      {value: 458, key: '2020-03-01T12:00:00'},
+      {value: 311, key: '2020-03-02T12:00:00'},
+      {value: 245, key: '2020-03-03T12:00:00'},
+      {value: 74, key: '2020-03-04T12:00:00'},
+      {value: 228, key: '2020-03-05T12:00:00'},
+      {value: 497, key: '2020-03-06T12:00:00'},
+      {value: 46, key: '2020-03-07T12:00:00'},
+      {value: 165, key: '2020-03-08T12:00:00'},
+      {value: 200, key: '2020-03-09T12:00:00'},
+      {value: 483, key: '2020-03-10T12:00:00'},
+      {value: 255, key: '2020-03-11T12:00:00'},
+      {value: 395, key: '2020-03-12T12:00:00'},
+    ],
+    isComparison: true,
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'One',
+    data: [
+      {value: 88, key: '2020-03-01T12:00:00'},
+      {value: 559, key: '2020-03-02T12:00:00'},
+      {value: 40, key: '2020-03-03T12:00:00'},
+      {value: 0, key: '2020-03-04T12:00:00'},
+      {value: 87, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: null, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: 430, key: '2020-03-07T12:00:00'},
+      {value: 0, key: '2020-03-08T12:00:00'},
+      {value: 240, key: '2020-03-09T12:00:00'},
+      {value: 0, key: '2020-03-10T12:00:00'},
+      {value: 540, key: '2020-03-11T12:00:00'},
+      {value: 641, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 0,
+      isPredictive: true,
+      startKey: '2020-03-06T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two',
+    data: [
+      {value: 23, key: '2020-03-01T12:00:00'},
+      {value: 12, key: '2020-03-02T12:00:00'},
+      {value: 234, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: null, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: 23, key: '2020-03-05T12:00:00'},
+      {value: 57, key: '2020-03-06T12:00:00'},
+      {value: 43, key: '2020-03-07T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 23, key: '2020-03-09T12:00:00'},
+      {value: 152, key: '2020-03-10T12:00:00'},
+      {value: 300, key: '2020-03-11T12:00:00'},
+      {value: 500, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 2,
+      isPredictive: true,
+      startKey: '2020-03-04T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Comparison',
+    data: [
+      {value: 458, key: '2020-03-01T12:00:00'},
+      {value: 311, key: '2020-03-02T12:00:00'},
+      {value: 245, key: '2020-03-03T12:00:00'},
+      {value: 74, key: '2020-03-04T12:00:00'},
+      {value: 228, key: '2020-03-05T12:00:00'},
+      {value: 497, key: '2020-03-06T12:00:00'},
+      {value: 46, key: '2020-03-07T12:00:00'},
+      {value: 165, key: '2020-03-08T12:00:00'},
+      {value: 200, key: '2020-03-09T12:00:00'},
+      {value: 483, key: '2020-03-10T12:00:00'},
+      {value: 255, key: '2020-03-11T12:00:00'},
+      {value: 395, key: '2020-03-12T12:00:00'},
+    ],
+    isComparison: true,
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'One',
+    data: [
+      {value: 88, key: '2020-03-01T12:00:00'},
+      {value: 559, key: '2020-03-02T12:00:00'},
+      {value: 40, key: '2020-03-03T12:00:00'},
+      {value: 0, key: '2020-03-04T12:00:00'},
+      {value: 87, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: null, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: 430, key: '2020-03-07T12:00:00'},
+      {value: 0, key: '2020-03-08T12:00:00'},
+      {value: 240, key: '2020-03-09T12:00:00'},
+      {value: 0, key: '2020-03-10T12:00:00'},
+      {value: 540, key: '2020-03-11T12:00:00'},
+      {value: 641, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 0,
+      isPredictive: true,
+      startKey: '2020-03-06T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two',
+    data: [
+      {value: 23, key: '2020-03-01T12:00:00'},
+      {value: 12, key: '2020-03-02T12:00:00'},
+      {value: 234, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: null, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: 23, key: '2020-03-05T12:00:00'},
+      {value: 57, key: '2020-03-06T12:00:00'},
+      {value: 43, key: '2020-03-07T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 23, key: '2020-03-09T12:00:00'},
+      {value: 152, key: '2020-03-10T12:00:00'},
+      {value: 300, key: '2020-03-11T12:00:00'},
+      {value: 500, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 2,
+      isPredictive: true,
+      startKey: '2020-03-04T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Comparison',
+    data: [
+      {value: 458, key: '2020-03-01T12:00:00'},
+      {value: 311, key: '2020-03-02T12:00:00'},
+      {value: 245, key: '2020-03-03T12:00:00'},
+      {value: 74, key: '2020-03-04T12:00:00'},
+      {value: 228, key: '2020-03-05T12:00:00'},
+      {value: 497, key: '2020-03-06T12:00:00'},
+      {value: 46, key: '2020-03-07T12:00:00'},
+      {value: 165, key: '2020-03-08T12:00:00'},
+      {value: 200, key: '2020-03-09T12:00:00'},
+      {value: 483, key: '2020-03-10T12:00:00'},
+      {value: 255, key: '2020-03-11T12:00:00'},
+      {value: 395, key: '2020-03-12T12:00:00'},
+    ],
+    isComparison: true,
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'One',
+    data: [
+      {value: 88, key: '2020-03-01T12:00:00'},
+      {value: 559, key: '2020-03-02T12:00:00'},
+      {value: 40, key: '2020-03-03T12:00:00'},
+      {value: 0, key: '2020-03-04T12:00:00'},
+      {value: 87, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: null, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: 22, key: '2020-03-06T12:00:00'},
+      {value: 430, key: '2020-03-07T12:00:00'},
+      {value: 0, key: '2020-03-08T12:00:00'},
+      {value: 240, key: '2020-03-09T12:00:00'},
+      {value: 0, key: '2020-03-10T12:00:00'},
+      {value: 540, key: '2020-03-11T12:00:00'},
+      {value: 641, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 0,
+      isPredictive: true,
+      startKey: '2020-03-06T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two',
+    data: [
+      {value: 23, key: '2020-03-01T12:00:00'},
+      {value: 12, key: '2020-03-02T12:00:00'},
+      {value: 234, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: null, key: '2020-03-05T12:00:00'},
+      {value: null, key: '2020-03-06T12:00:00'},
+      {value: null, key: '2020-03-07T12:00:00'},
+      {value: null, key: '2020-03-08T12:00:00'},
+      {value: null, key: '2020-03-09T12:00:00'},
+      {value: null, key: '2020-03-10T12:00:00'},
+      {value: null, key: '2020-03-11T12:00:00'},
+      {value: null, key: '2020-03-12T12:00:00'},
+    ],
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Two Predictive',
+    data: [
+      {value: null, key: '2020-03-01T12:00:00'},
+      {value: null, key: '2020-03-02T12:00:00'},
+      {value: null, key: '2020-03-03T12:00:00'},
+      {value: 29, key: '2020-03-04T12:00:00'},
+      {value: 23, key: '2020-03-05T12:00:00'},
+      {value: 57, key: '2020-03-06T12:00:00'},
+      {value: 43, key: '2020-03-07T12:00:00'},
+      {value: 12, key: '2020-03-08T12:00:00'},
+      {value: 23, key: '2020-03-09T12:00:00'},
+      {value: 152, key: '2020-03-10T12:00:00'},
+      {value: 300, key: '2020-03-11T12:00:00'},
+      {value: 500, key: '2020-03-12T12:00:00'},
+    ],
+    metadata: {
+      relatedIndex: 2,
+      isPredictive: true,
+      startKey: '2020-03-04T12:00:00',
+    },
+    styleOverride: {
+      line: {
+        strokeDasharray: '1 10 1',
+        hasArea: false,
+      },
+    },
+  },
+  {
+    name: 'Comparison',
+    data: [
+      {value: 458, key: '2020-03-01T12:00:00'},
+      {value: 311, key: '2020-03-02T12:00:00'},
+      {value: 245, key: '2020-03-03T12:00:00'},
+      {value: 74, key: '2020-03-04T12:00:00'},
+      {value: 228, key: '2020-03-05T12:00:00'},
+      {value: 497, key: '2020-03-06T12:00:00'},
+      {value: 46, key: '2020-03-07T12:00:00'},
+      {value: 165, key: '2020-03-08T12:00:00'},
+      {value: 200, key: '2020-03-09T12:00:00'},
+      {value: 483, key: '2020-03-10T12:00:00'},
+      {value: 255, key: '2020-03-11T12:00:00'},
+      {value: 395, key: '2020-03-12T12:00:00'},
+    ],
+    isComparison: true,
+    styleOverride: {
+      line: {
+        hasArea: false,
+      },
+    },
+  },
 ];
diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
index a1442a509c..e8f3da9e12 100644
--- a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
@@ -190,6 +190,7 @@ export function Chart({
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
           position={legendPosition}
+          width={width}
         />
       )}
     </ChartElements.Div>
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
index d40e801dd5..980615d587 100644
--- a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
@@ -397,6 +397,7 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
+          width={width}
         />
       )}
     </ChartElements.Div>
diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
index fdf249250c..9d522908b5 100644
--- a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
@@ -328,6 +328,7 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
+          width={width}
         />
       )}
     </ChartElements.Div>