1) Keep the selected columns for the X and Y-axis.

2) Lighten the color of the stacked line chart.

web/pgadmin/static/js/chartjs/index.jsx

@@ -222,3 +222,37 @@ export function ConvertHexToRGBA(hex, opacity) {
 
   return `rgba(${r},${g},${b},${opacity / 100})`;
 }
+
+// This function is used to Lighten/Darken color.
+export function LightenDarkenColor(color, amount) {
+  let usePound = false;
+  if (color[0] == '#') {
+    color = color.slice(1);
+    usePound = true;
+  }
+
+  let num = parseInt(color, 16);
+
+  let r = (num >> 16) + amount;
+  if (r > 255) {
+    r = 255;
+  } else if (r < 0) {
+    r = 0;
+  }
+
+  let b = ((num >> 8) & 0x00FF) + amount;
+  if (b > 255) {
+    b = 255;
+  } else if (b < 0) {
+    b = 0;
+  }
+
+  let g = (num & 0x0000FF) + amount;
+  if (g > 255) {
+    g = 255;
+  } else if (g < 0) {
+    g = 0;
+  }
+
+  return (usePound?'#':'') + (g | (b << 8) | (r << 16)).toString(16);
+}

web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx

@@ -21,7 +21,7 @@ import SaveAltIcon from '@material-ui/icons/SaveAlt';
 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,
-  CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, ConvertHexToRGBA} from 'sources/chartjs';
+  CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, LightenDarkenColor} from 'sources/chartjs';
 import { QueryToolEventsContext, QueryToolContext } from '../QueryToolComponent';
 import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants';
 import { LayoutHelper } from '../../../../../../static/js/helpers/Layout';
@@ -160,7 +160,7 @@ function getLineChartData(graphType, rows, colName, colPosition, color, colorInd
   return {
     label: colName,
     data: rows.map((r)=>r[colPosition]),
-    backgroundColor: graphType == 'SL' ? ConvertHexToRGBA(color, 30) : color,
+    backgroundColor: graphType == 'SL' ? LightenDarkenColor(color, 135) : color,
     borderColor:color,
     pointHitRadius: DATA_POINT_SIZE,
     pointHoverRadius: 5,
@@ -300,8 +300,25 @@ export function GraphVisualiser({initColumns}) {
 
     const resetGraphVisualiser = (newColumns)=>{
       setGraphData([{'datasets': []}, 0]);
-      setXAxis(null);
+      // Check the previously selected X axis column is exist in the list of
-      setYAxis([]);
+      // new columns. If exists then set that as it is.
+      setXAxis((prevXAxis)=>{
+        if (prevXAxis === '<Row Number>') {
+          return prevXAxis;
+        } else if (newColumns.map((c)=>c.name).includes(prevXAxis)) {
+          return prevXAxis;
+        }
+        return null;
+      });
+
+      // Check the previously selected Y axis columns are exist in the list of
+      // new columns. If exists then set all those columns as it is.
+      setYAxis((prevYAxis)=>{
+        return newColumns.map((c)=>c.name).filter((colName)=>{
+          return prevYAxis.includes(colName);
+        });
+      });
+
       setColumns(newColumns);
     };