diff --git a/public/app/features/panel/state/util.ts b/public/app/features/panel/state/util.ts
index 2a70e521864..5db12bc1534 100644
--- a/public/app/features/panel/state/util.ts
+++ b/public/app/features/panel/state/util.ts
@@ -27,6 +27,7 @@ export function filterPluginList(
   const query = searchQuery.toLowerCase();
   const first: PanelPluginMeta[] = [];
   const match: PanelPluginMeta[] = [];
+  const isGraphQuery = 'graph'.startsWith(query);
 
   for (const item of pluginsList) {
     if (item.state === PluginState.deprecated && current.id !== item.id) {
@@ -40,6 +41,8 @@ export function filterPluginList(
       first.push(item);
     } else if (idx > 0) {
       match.push(item);
+    } else if (isGraphQuery && item.id === 'timeseries') {
+      first.push(item);
     }
   }
 
diff --git a/public/app/features/panel/state/utils.test.ts b/public/app/features/panel/state/utils.test.ts
new file mode 100644
index 00000000000..bc664e0f572
--- /dev/null
+++ b/public/app/features/panel/state/utils.test.ts
@@ -0,0 +1,14 @@
+import { PanelPluginMeta } from '@grafana/data';
+import { filterPluginList } from './util';
+
+describe('panel state utils', () => {
+  it('should include timeseries in a graph query', async () => {
+    const pluginsList: PanelPluginMeta[] = [
+      { id: 'graph', name: 'Graph (old)' } as any,
+      { id: 'timeseries', name: 'Graph (old)' },
+      { id: 'timeline', name: 'Timeline' },
+    ];
+    const found = filterPluginList(pluginsList, 'gra', { id: 'xyz' } as any);
+    expect(found.map((v) => v.id)).toEqual(['graph', 'timeseries']);
+  });
+});
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 2e0a408eed5..fdc09d85613 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -356,6 +356,10 @@ export class GraphCtrl extends MetricsPanelCtrl {
   getDataFrameByRefId = (refId: string) => {
     return this.dataList.filter((dataFrame) => dataFrame.refId === refId)[0];
   };
+
+  migrateToReact() {
+    this.onPluginTypeChange(config.panels['timeseries']);
+  }
 }
 
 // Use new react style configuration
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
index 407c6a01bf0..c8d91f352f8 100644
--- a/public/app/plugins/panel/graph/tab_display.html
+++ b/public/app/plugins/panel/graph/tab_display.html
@@ -1,4 +1,17 @@
 <div class="gf-form-group">
+  <div class="grafana-info-box">
+    <h5>Migration</h5>
+    <p>
+      Consider switching to the Time series visualization type. It is a more capable and performant version of this panel.
+    </p>
+    <p>
+      <button class="btn btn-primary" ng-click="ctrl.migrateToReact()">
+        Migrate
+      </button>
+    </p>
+    <p>Some features like colored time regions and negative transforms are not supported in the new panel yet.</p>    
+  </div>
+
   <gf-form-switch
     class="gf-form"
     label="Bars"