diff --git a/packages/web/src/charts/ChartEditor.js b/packages/web/src/charts/ChartEditor.js
index 4ed6b439d..38b288203 100644
--- a/packages/web/src/charts/ChartEditor.js
+++ b/packages/web/src/charts/ChartEditor.js
@@ -7,7 +7,7 @@ import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 import { FormCheckboxField, FormSelectField } from '../utility/forms';
 import DataChart from './DataChart';
-import { FormProvider } from '../utility/FormProvider';
+import { FormProviderCore } from '../utility/FormProvider';
 
 const LeftContainer = styled.div`
   background-color: ${(props) => props.theme.manager_background};
@@ -15,13 +15,13 @@ const LeftContainer = styled.div`
   flex: 1;
 `;
 
-export default function ChartEditor({ data }) {
+export default function ChartEditor({ data, config, setConfig }) {
   const [managerSize, setManagerSize] = React.useState(0);
   const theme = useTheme();
   const availableColumnNames = data ? data.structure.columns.map((x) => x.columnName) : [];
 
   return (
-    <FormProvider initialValues={{ chartType: 'bar' }}>
+    <FormProviderCore values={config} setValues={setConfig}>
       <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
         <LeftContainer theme={theme}>
           <WidgetColumnBar>
@@ -49,6 +49,6 @@ export default function ChartEditor({ data }) {
 
         <DataChart data={data} />
       </HorizontalSplitter>
-    </FormProvider>
+    </FormProviderCore>
   );
 }
diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js
index 15aadf5d1..e6630165c 100644
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/packages/web/src/datagrid/DataGridCore.js
@@ -356,6 +356,7 @@ export default function DataGridCore(props) {
       },
       {
         data: getSelectedFreeData(),
+        config: { chartType: 'bar' },
       }
     );
   };
diff --git a/packages/web/src/tabs/ChartTab.js b/packages/web/src/tabs/ChartTab.js
index 6348c2521..a7c5ea9c6 100644
--- a/packages/web/src/tabs/ChartTab.js
+++ b/packages/web/src/tabs/ChartTab.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 import { createFreeTableModel } from 'dbgate-datalib';
 import useUndoReducer from '../utility/useUndoReducer';
 import { useSetOpenedTabs } from '../utility/globalState';
@@ -15,7 +16,6 @@ import SaveTabModal from '../modals/SaveTabModal';
 import ChartEditor from '../charts/ChartEditor';
 
 export default function ChartTab({ tabVisible, toolbarPortalRef, tabid }) {
-  const [config, setConfig] = useGridConfig(tabid);
   const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
   const saveFileModalState = useModalState();
   const { initialData, setEditorData, errorMessage, isLoading } = useEditorData({
@@ -31,6 +31,16 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, tabid }) {
     setEditorData(modelState.value);
   }, [modelState]);
 
+  const setConfig = React.useCallback(
+    (config) =>
+      // @ts-ignore
+      dispatchModel({
+        type: 'compute',
+        compute: (v) => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }),
+      }),
+    [dispatchModel]
+  );
+
   if (isLoading) {
     return <LoadingInfo wrapper message="Loading data" />;
   }
@@ -40,7 +50,11 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, tabid }) {
 
   return (
     <>
-      <ChartEditor data={modelState.value && modelState.value.data} />
+      <ChartEditor
+        data={modelState.value && modelState.value.data}
+        config={modelState.value ? modelState.value.config || {} : {}}
+        setConfig={setConfig}
+      />
       <SaveTabModal
         modalState={saveFileModalState}
         data={modelState.value}
diff --git a/packages/web/src/utility/FormProvider.js b/packages/web/src/utility/FormProvider.js
index 142f2adbc..2b6fa6078 100644
--- a/packages/web/src/utility/FormProvider.js
+++ b/packages/web/src/utility/FormProvider.js
@@ -5,6 +5,14 @@ const FormContext = React.createContext(null);
 
 export function FormProvider({ children, initialValues = {} }) {
   const [values, setValues] = React.useState(initialValues);
+  return (
+    <FormProviderCore values={values} setValues={setValues}>
+      {children}
+    </FormProviderCore>
+  );
+}
+
+export function FormProviderCore({ children, values, setValues }) {
   const [submitAction, setSubmitAction] = React.useState(null);
   const handleEnter = React.useCallback(
     (e) => {
diff --git a/packages/web/src/utility/useUndoReducer.js b/packages/web/src/utility/useUndoReducer.js
index c4c787149..5a996cb3d 100644
--- a/packages/web/src/utility/useUndoReducer.js
+++ b/packages/web/src/utility/useUndoReducer.js
@@ -1,9 +1,9 @@
+import _ from 'lodash';
 import React from 'react';
 
 function reducer(state, action) {
   switch (action.type) {
     case 'set':
-      // console.log('SET', state.history, action.value);
       return {
         history: [...state.history.slice(0, state.current + 1), action.value],
         current: state.current + 1,
@@ -11,6 +11,16 @@ function reducer(state, action) {
         canUndo: true,
         canRedo: false,
       };
+    case 'compute': {
+      const newValue = action.compute(state.history[state.current]);
+      return {
+        history: [...state.history.slice(0, state.current + 1), newValue],
+        current: state.current + 1,
+        value: newValue,
+        canUndo: true,
+        canRedo: false,
+      };
+    }
     case 'undo':
       if (state.current > 0)
         return {