diff --git a/packages/grafana-schema/src/schema/graph.gen.ts b/packages/grafana-schema/src/schema/graph.gen.ts
index f055541e9ce..fac55f08ddd 100644
--- a/packages/grafana-schema/src/schema/graph.gen.ts
+++ b/packages/grafana-schema/src/schema/graph.gen.ts
@@ -272,6 +272,7 @@ export interface VizLegendOptions {
   placement: LegendPlacement;
   sortBy?: string;
   sortDesc?: boolean;
+  width?: number;
 }
 
 export enum BarGaugeDisplayMode {
diff --git a/packages/grafana-schema/src/schema/legend.cue b/packages/grafana-schema/src/schema/legend.cue
index 336ab2324b2..e5e71072b50 100644
--- a/packages/grafana-schema/src/schema/legend.cue
+++ b/packages/grafana-schema/src/schema/legend.cue
@@ -11,5 +11,6 @@ VizLegendOptions: {
 	isVisible?:   bool
   sortBy?:      string
   sortDesc?:    bool
+  width?:       number
 	calcs:        [...string]
 } @cuetsy(kind="interface")
diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
index 3f91557fc78..bae52e9001f 100644
--- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
+++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
@@ -68,6 +68,11 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
       if (legendMeasure) {
         size = { width: width - legendMeasure.width, height };
       }
+
+      if (legend.props.width) {
+        legendStyle.width = legend.props.width;
+        size = { width: width - legend.props.width, height };
+      }
       break;
   }
 
@@ -115,6 +120,7 @@ export interface VizLayoutLegendProps {
   children: React.ReactNode;
   maxHeight?: string;
   maxWidth?: string;
+  width?: number;
 }
 
 /**
diff --git a/packages/grafana-ui/src/options/builder/legend.tsx b/packages/grafana-ui/src/options/builder/legend.tsx
index c7cad82c20b..ef0d282eb07 100644
--- a/packages/grafana-ui/src/options/builder/legend.tsx
+++ b/packages/grafana-ui/src/options/builder/legend.tsx
@@ -36,6 +36,15 @@ export function addLegendOptions<T extends OptionsWithLegend>(
         ],
       },
       showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden,
+    })
+    .addNumberInput({
+      path: 'legend.width',
+      name: 'Width',
+      category: ['Legend'],
+      settings: {
+        placeholder: 'Auto',
+      },
+      showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden && c.legend.placement === 'right',
     });
 
   if (includeLegendCalcs) {
diff --git a/public/app/plugins/panel/timeseries/migrations.test.ts b/public/app/plugins/panel/timeseries/migrations.test.ts
index 1d4a553c40c..89c9835a71c 100644
--- a/public/app/plugins/panel/timeseries/migrations.test.ts
+++ b/public/app/plugins/panel/timeseries/migrations.test.ts
@@ -125,6 +125,23 @@ describe('Graph Migrations', () => {
       panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
+    test('with sideWidth', () => {
+      const old: any = {
+        angular: {
+          legend: {
+            alignAsTable: true,
+            rightSide: true,
+            show: true,
+            sideWidth: 200,
+            total: true,
+            values: true,
+          },
+        },
+      };
+      const panel = {} as PanelModel;
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
+      expect(panel.options.legend.width).toBe(200);
+    });
   });
 
   describe('stacking', () => {
diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts
index a19e7017cdb..18bbfdfa78e 100644
--- a/public/app/plugins/panel/timeseries/migrations.ts
+++ b/public/app/plugins/panel/timeseries/migrations.ts
@@ -345,6 +345,10 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
       const enabledLegendValues = pickBy(angular.legend);
       options.legend.calcs = getReducersFromLegend(enabledLegendValues);
     }
+
+    if (angular.legend.sideWidth) {
+      options.legend.width = angular.legend.sideWidth;
+    }
   }
 
   const tooltipConfig = angular.tooltip;