diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
index 62600d1132e..a56bbcc1206 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx
@@ -26,6 +26,22 @@ describe('PromQueryBuilderOptions', () => {
     });
   });
 
+  it('Can set query type to "Both" on render for PanelEditor', async () => {
+    setup({ instant: true, range: true });
+
+    screen.getByTitle('Click to edit options').click();
+
+    expect(screen.getByLabelText('Both')).toBeChecked();
+  });
+
+  it('Can set query type to "Both" on render for Explorer', async () => {
+    setup({ instant: true, range: true }, CoreApp.Explore);
+
+    screen.getByTitle('Click to edit options').click();
+
+    expect(screen.getByLabelText('Both')).toBeChecked();
+  });
+
   it('Legend format default to Auto', async () => {
     setup();
     expect(screen.getByText('Legend: Auto')).toBeInTheDocument();
@@ -85,8 +101,9 @@ describe('PromQueryBuilderOptions', () => {
   });
 });
 
-function setup(queryOverrides: Partial<PromQuery> = {}) {
+function setup(queryOverrides: Partial<PromQuery> = {}, app: CoreApp = CoreApp.PanelEditor) {
   const props = {
+    app,
     query: {
       ...getQueryWithDefaults({ refId: 'A' } as PromQuery, CoreApp.PanelEditor),
       ...queryOverrides,
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index 84663f7ac43..f97dc32069d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -37,7 +37,7 @@ export const PromQueryBuilderOptions = React.memo<Props>(({ query, app, onChange
     onRunQuery();
   };
 
-  const queryTypeOptions = getQueryTypeOptions(app === CoreApp.Explore);
+  const queryTypeOptions = getQueryTypeOptions(app === CoreApp.Explore || app === CoreApp.PanelEditor);
   const onQueryTypeChange = getQueryTypeChangeHandler(query, onChange);
 
   const onExemplarChange = (event: SyntheticEvent<HTMLInputElement>) => {