diff --git a/public/app/plugins/panel/timeseries/migrations.test.ts b/public/app/plugins/panel/timeseries/migrations.test.ts
index 14310ce9fb6..6daee162a78 100644
--- a/public/app/plugins/panel/timeseries/migrations.test.ts
+++ b/public/app/plugins/panel/timeseries/migrations.test.ts
@@ -127,6 +127,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 e27b75fc8b1..d49cca16649 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;