diff --git a/docs/en_US/images/query_bar_chart.png b/docs/en_US/images/query_bar_chart.png
index bf35601ca..e5a3bd11a 100644
Binary files a/docs/en_US/images/query_bar_chart.png and b/docs/en_US/images/query_bar_chart.png differ
diff --git a/docs/en_US/images/query_graph_toolbar.png b/docs/en_US/images/query_graph_toolbar.png
index e252b5a86..76b91065f 100644
Binary files a/docs/en_US/images/query_graph_toolbar.png and b/docs/en_US/images/query_graph_toolbar.png differ
diff --git a/docs/en_US/images/query_graph_type.png b/docs/en_US/images/query_graph_type.png
index b0087b33a..a92e9dc38 100644
Binary files a/docs/en_US/images/query_graph_type.png and b/docs/en_US/images/query_graph_type.png differ
diff --git a/docs/en_US/images/query_graph_visualiser_panel.png b/docs/en_US/images/query_graph_visualiser_panel.png
index 0e61e7892..820e4c5c5 100644
Binary files a/docs/en_US/images/query_graph_visualiser_panel.png and b/docs/en_US/images/query_graph_visualiser_panel.png differ
diff --git a/docs/en_US/images/query_graph_xaxis.png b/docs/en_US/images/query_graph_xaxis.png
index 0926ca6d9..eef1f0cee 100644
Binary files a/docs/en_US/images/query_graph_xaxis.png and b/docs/en_US/images/query_graph_xaxis.png differ
diff --git a/docs/en_US/images/query_graph_yaxis.png b/docs/en_US/images/query_graph_yaxis.png
index 9d08a7a22..ce0f9d00c 100644
Binary files a/docs/en_US/images/query_graph_yaxis.png and b/docs/en_US/images/query_graph_yaxis.png differ
diff --git a/docs/en_US/images/query_line_chart.png b/docs/en_US/images/query_line_chart.png
index 4be3d419b..c5922daaa 100644
Binary files a/docs/en_US/images/query_line_chart.png and b/docs/en_US/images/query_line_chart.png differ
diff --git a/docs/en_US/images/query_pie_chart.png b/docs/en_US/images/query_pie_chart.png
index 2c8a1ef95..e566f2a87 100644
Binary files a/docs/en_US/images/query_pie_chart.png and b/docs/en_US/images/query_pie_chart.png differ
diff --git a/docs/en_US/images/query_stacked_bar_chart.png b/docs/en_US/images/query_stacked_bar_chart.png
index 728703f50..7c161c6bf 100644
Binary files a/docs/en_US/images/query_stacked_bar_chart.png and b/docs/en_US/images/query_stacked_bar_chart.png differ
diff --git a/docs/en_US/images/query_stacked_line_chart.png b/docs/en_US/images/query_stacked_line_chart.png
index e4a4c4243..bd89d657c 100644
Binary files a/docs/en_US/images/query_stacked_line_chart.png and b/docs/en_US/images/query_stacked_line_chart.png differ
diff --git a/docs/en_US/query_tool.rst b/docs/en_US/query_tool.rst
index f9689462c..27aa951c2 100644
--- a/docs/en_US/query_tool.rst
+++ b/docs/en_US/query_tool.rst
@@ -338,6 +338,14 @@ Bar Charts, Stacked Bar Charts, and Pie Charts.
     :alt: Query tool graph visualiser panel
     :align: center
 
+* Graph Type
+
+Choose the type of the graph that you would like to generate.
+
+.. image:: images/query_graph_type.png
+    :alt: Query tool graph visualiser graph type
+    :align: center
+
 * X Axis
 
 Choose the column whose value you wish to display on X-axis from the *X Axis*
@@ -358,14 +366,6 @@ from the drop-down menu to select all the columns.
     :alt: Query tool graph visualiser yaxis
     :align: center
 
-* Graph Type
-
-Choose the type of the graph that you would like to generate.
-
-.. image:: images/query_graph_type.png
-    :alt: Query tool graph visualiser graph type
-    :align: center
-
 * Download and Zoom button
 
 Zooming is performed by clicking and selecting an area over the chart with the
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
index 58aabfdee..59fa6330d 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -18,6 +18,8 @@ import { Box } from '@material-ui/core';
 import ShowChartRoundedIcon from '@material-ui/icons/ShowChartRounded';
 import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
 import SaveAltIcon from '@material-ui/icons/SaveAlt';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
 import { InputSelect } from '../../../../../../static/js/components/FormComponents';
 import { DefaultButton, PgButtonGroup, PgIconButton} from '../../../../../../static/js/components/Buttons';
 import { LineChart, BarChart, PieChart, DATA_POINT_STYLE, DATA_POINT_SIZE,
@@ -55,11 +57,16 @@ const useStyles = makeStyles((theme)=>({
   },
   spanLabel: {
     alignSelf: 'center',
-    marginRight: '4px',
+    minWidth: '5%',
+    whiteSpace: 'nowrap',
   },
   selectCtrl: {
     minWidth: '200px',
   },
+  axisSelectCtrl: {
+    minWidth: '200px',
+    marginTop: '2px',
+  },
 }));
 
 // This function is used to generate the appropriate graph based on the graphType.
@@ -255,6 +262,7 @@ export function GraphVisualiser({initColumns}) {
   const [loaderText, setLoaderText] = useState('');
   const [columns, setColumns] = useState(initColumns);
   const [graphHeight, setGraphHeight] = useState();
+  const [expandedState, setExpandedState] = useState(true);
 
 
   // Create X axis options for drop down.
@@ -390,32 +398,41 @@ export function GraphVisualiser({initColumns}) {
       <Loader message={loaderText} />
       <Box className={classes.topContainer}>
         <Box className={classes.displayFlex}>
-          <Box className={classes.displayFlex}>
-            <span className={classes.spanLabel}>{graphType != 'P' ? gettext('X Axis') : gettext('Label')}</span>
-            <InputSelect className={classes.selectCtrl} options={xAxisOptions}
-              onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
-          </Box>
-          <Box className={classes.displayFlex} marginLeft="auto">
-            <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
-            <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
-              options={[
-                {label: gettext('Line Chart'), value: 'L'},
-                {label: gettext('Stacked Line Chart'), value: 'SL'},
-                {label: gettext('Bar Chart'), value: 'B'},
-                {label: gettext('Stacked Bar Chart'), value: 'SB'},
-                {label: gettext('Pie Chart'), value: 'P'},
-              ]} onChange={(v)=>setGraphType(v)} value={graphType} />
-          </Box>
-          <DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
+          <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
+          <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
+            options={[
+              {label: gettext('Line Chart'), value: 'L'},
+              {label: gettext('Stacked Line Chart'), value: 'SL'},
+              {label: gettext('Bar Chart'), value: 'B'},
+              {label: gettext('Stacked Bar Chart'), value: 'SB'},
+              {label: gettext('Pie Chart'), value: 'P'},
+            ]} onChange={(v)=>{
+              setGraphType(v);
+              if (graphType === 'P' || v === 'P') {
+                setExpandedState(true);
+              }
+            }} value={graphType} />
+          <DefaultButton style={{marginLeft: 'auto'}} onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
             disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
             {gettext('Generate')}
           </DefaultButton>
+          <PgIconButton title={expandedState ? gettext('Collapse') : gettext('Expand')}
+            icon={expandedState ? <ExpandLessRoundedIcon style={{height: '1.2rem'}}/> : <ExpandMoreRoundedIcon style={{height: '1.2rem'}}/>}
+            onClick={()=>{setExpandedState(!expandedState);}}/>
         </Box>
-        <Box className={classes.displayFlex}>
-          <span className={classes.spanLabel}>{graphType != 'P' ? gettext('Y Axis') : gettext('Value')}</span>
-          <InputSelect className={classes.selectCtrl} controlProps={{'multiple': graphType != 'P', allowSelectAll: graphType != 'P'}}
-            options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
-        </Box>
+        { expandedState && <>
+          <Box className={classes.displayFlex}>
+            <span className={classes.spanLabel}>{graphType != 'P' ? gettext('X Axis') : gettext('Label')}</span>
+            <InputSelect className={classes.axisSelectCtrl} options={xAxisOptions}
+              onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
+          </Box>
+          <Box className={classes.displayFlex}>
+            <span className={classes.spanLabel}>{graphType != 'P' ? gettext('Y Axis') : gettext('Value')}</span>
+            <InputSelect className={classes.axisSelectCtrl} controlProps={{'multiple': graphType != 'P', allowSelectAll: graphType != 'P'}}
+              options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
+          </Box>
+        </>
+        }
       </Box>
       <Box display="flex" marginLeft="3px" marginTop="3px">
         <PgButtonGroup size="small">