diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts
index ae205100c139..260ff78df763 100644
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -1,8 +1,9 @@
 import { ComponentClass } from 'react';
 import { TimeSeries, LoadingState, TableData } from './data';
 import { TimeRange } from './time';
+import { ScopedVars } from './datasource';
 
-export type InterpolateFunction = (value: string, format?: string | Function) => string;
+export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
 export interface PanelProps<T = any> {
   panelData: PanelData;
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
new file mode 100644
index 000000000000..d6242b9db22a
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
@@ -0,0 +1,35 @@
+import { PanelChrome } from './PanelChrome';
+
+jest.mock('sass/_variables.generated.scss', () => ({
+  panelhorizontalpadding: 10,
+  panelVerticalPadding: 10,
+}));
+
+describe('PanelChrome', () => {
+  let chrome: PanelChrome;
+
+  beforeEach(() => {
+    chrome = new PanelChrome({
+      panel: {
+        scopedVars: {
+          aaa: { value: 'AAA', text: 'upperA' },
+          bbb: { value: 'BBB', text: 'upperB' },
+        },
+      },
+      dashboard: {},
+      plugin: {},
+      isFullscreen: false,
+    });
+  });
+
+  it('Should replace a panel variable', () => {
+    const out = chrome.replaceVariables('hello $aaa');
+    expect(out).toBe('hello AAA');
+  });
+
+  it('It should prefer the diret variables', () => {
+    const extra = { aaa: { text: '???', value: 'XXX' } };
+    const out = chrome.replaceVariables('hello $aaa and $bbb', extra);
+    expect(out).toBe('hello XXX and BBB');
+  });
+});
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 80ce2f39b70e..149d0f3deee7 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -19,6 +19,7 @@ import { profiler } from 'app/core/profiler';
 import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
+import { ScopedVars } from '@grafana/ui';
 
 import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
@@ -85,8 +86,13 @@ export class PanelChrome extends PureComponent<Props, State> {
     });
   };
 
-  replaceVariables = (value: string, format?: string) => {
-    return templateSrv.replace(value, this.props.panel.scopedVars, format);
+  replaceVariables = (value: string, extraVars?: ScopedVars, format?: string) => {
+    let vars = this.props.panel.scopedVars;
+    if (extraVars) {
+      vars = vars ? { ...vars, ...extraVars } : extraVars;
+    }
+    console.log('VARiables', vars);
+    return templateSrv.replace(value, vars, format);
   };
 
   onDataResponse = (dataQueryResponse: DataQueryResponse) => {