diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae61ad8..6bd958a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Added Boxplot in Visual Editor (#327)
 - Updated Grafana 11.2 dependencies (#330)
+- Added Scatter to Visual editor and limit selection to supported charts (#332)
 
 ## 6.3.0 (2024-08-26)
 
diff --git a/echarts.volkovlabs.io/home.json b/echarts.volkovlabs.io/home.json
index dd0c905..587c659 100644
--- a/echarts.volkovlabs.io/home.json
+++ b/echarts.volkovlabs.io/home.json
@@ -1061,6 +1061,7 @@
     },
     {
       "datasource": {
+        "default": true,
         "type": "marcusolsson-static-datasource",
         "uid": "4ytGZmF4k"
       },
@@ -1080,7 +1081,7 @@
           "format": "auto",
           "height": 600
         },
-        "editorMode": "code",
+        "editorMode": "visual",
         "gaode": {
           "key": "",
           "plugin": "AMap.Scale,AMap.ToolBar"
@@ -1098,13 +1099,76 @@
           "name": "default"
         },
         "visualEditor": {
-          "code": "console.log(context);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "code": "context.panel.chart.on('click', (params) => {\n  context.grafana.locationService.replace('/d/U332C4K4z/scatter?orgId=1');\n});\n\n// See https://github.com/ecomfe/echarts-stat\ncontext.echarts.registerTransform(context.ecStat.transform.regression);\n\nreturn {\n  grid: {\n    bottom: \"3%\",\n    containLabel: true,\n    left: \"3%\",\n    right: \"4%\",\n    top: \"4%\"\n  },\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'cross'\n    }\n  },\n  xAxis: {\n    splitLine: {\n      lineStyle: {\n        type: 'dashed'\n      }\n    }\n  },\n  yAxis: {\n    splitLine: {\n      lineStyle: {\n        type: 'dashed'\n      }\n    }\n  },\n  graphic: [\n    {\n      type: 'group',\n      rotation: Math.PI / 4,\n      bounding: 'raw',\n      right: 110,\n      bottom: 110,\n      z: 100,\n      children: [\n        {\n          type: 'rect',\n          left: 'center',\n          top: 'center',\n          z: 100,\n          shape: {\n            width: 400,\n            height: 50\n          },\n          style: {\n            fill: 'rgba(0,0,0,0.3)'\n          }\n        },\n        {\n          type: 'text',\n          left: 'center',\n          top: 'center',\n          z: 100,\n          style: {\n            fill: '#fff',\n            text: 'CLICK FOR MORE',\n            font: 'bold 26px sans-serif'\n          }\n        }\n      ]\n    }]\n}\n",
           "codeHeight": 600,
-          "dataset": [],
-          "series": []
+          "dataset": [
+            {
+              "name": "xAxis",
+              "source": "A"
+            },
+            {
+              "name": "yAxis",
+              "source": "A"
+            }
+          ],
+          "series": [
+            {
+              "encode": {
+                "x": ["A:xAxis"],
+                "y": ["A:yAxis"]
+              },
+              "id": "Line",
+              "name": "Line",
+              "type": "line",
+              "uid": "a0096b03-9971-4890-835d-029716ec4521"
+            },
+            {
+              "encode": {
+                "tooltip": [],
+                "x": ["A:xAxis"],
+                "y": ["A:yAxis"]
+              },
+              "id": "Scatter",
+              "name": "",
+              "symbol": "circle",
+              "type": "scatter",
+              "uid": "4c88dedc-f52f-4eb9-bc10-6b3fcf67fbfc"
+            }
+          ]
         }
       },
       "pluginVersion": "6.4.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "4ytGZmF4k"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "xAxis",
+                "type": "number",
+                "values": []
+              },
+              {
+                "config": {},
+                "name": "yAxis",
+                "type": "number",
+                "values": []
+              }
+            ],
+            "meta": {
+              "custom": {
+                "customCode": "const points = Array.from({ length: 18 }, (_, index) => index + 1)\nconst result = {\n  ...frame,\n  fields: frame.fields.map((field) => {\n    \n    if (field.name === 'xAxis') {\n      return ({\n        ...field,\n        values: points\n      })\n    }\n\n    const start = 4000;\n    const end = 78000;\n    const count = 18;\n\n    const r = Math.pow(end / start, 1 / (count - 1));\n\n    const numbers = Array.from({ length: count }, (_, index) => {\n      return Math.round(start * Math.pow(r, index));\n    });\n\n    console.log(numbers);\n\n    return ({\n      ...field,\n      values: numbers\n    })\n  })\n}\n\nreturn Promise.resolve(result);",
+                "valuesEditor": "custom"
+              }
+            }
+          },
+          "refId": "A"
+        }
+      ],
       "title": "Scatter",
       "type": "volkovlabs-echarts-panel"
     },
diff --git a/echarts.volkovlabs.io/scatter.json b/echarts.volkovlabs.io/scatter.json
index 4101f04..f112d45 100644
--- a/echarts.volkovlabs.io/scatter.json
+++ b/echarts.volkovlabs.io/scatter.json
@@ -24,7 +24,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 7,
+  "id": 11,
   "links": [
     {
       "asDropdown": false,
@@ -43,6 +43,7 @@
   "panels": [
     {
       "datasource": {
+        "default": true,
         "type": "marcusolsson-static-datasource",
         "uid": "4ytGZmF4k"
       },
@@ -62,7 +63,7 @@
           "format": "auto",
           "height": 600
         },
-        "editorMode": "code",
+        "editorMode": "visual",
         "gaode": {
           "key": "",
           "plugin": "AMap.Scale,AMap.ToolBar"
@@ -79,13 +80,141 @@
           "name": "default"
         },
         "visualEditor": {
-          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
-          "dataset": [],
-          "series": []
+          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  grid: {\n    bottom: \"3%\",\n    containLabel: true,\n    left: \"3%\",\n    right: \"4%\",\n    top: \"4%\"\n  },\n  /**\n   * Should be add to see tooltip\n   */\n  tooltip: {},\n  xAxis: {\n    type: \"category\"\n  },\n  yAxis: {\n    type: \"value\"\n  },\n}\n",
+          "dataset": [
+            {
+              "name": "Yaxis",
+              "source": "A"
+            },
+            {
+              "name": "Xaxis",
+              "source": "A"
+            },
+            {
+              "name": "Size",
+              "source": "A"
+            }
+          ],
+          "series": [
+            {
+              "encode": {
+                "tooltip": ["A:Size"],
+                "x": ["A:Xaxis"],
+                "y": ["A:Yaxis"]
+              },
+              "id": "Scatter",
+              "name": "Scatter",
+              "sizeField": "A:Size",
+              "symbol": "circle",
+              "type": "scatter",
+              "uid": "08dcc113-7054-459e-9d36-9375f41c5b21"
+            }
+          ]
         }
       },
-      "pluginVersion": "6.3.0",
-      "title": "Basic Scatter",
+      "pluginVersion": "6.4.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "4ytGZmF4k"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Yaxis",
+                "type": "string",
+                "values": [
+                  "10",
+                  "8.07",
+                  "13.0",
+                  "9.05",
+                  "11",
+                  "14",
+                  "13.4",
+                  "10",
+                  "14",
+                  "12.5",
+                  "9.15",
+                  "11.5",
+                  "3.03",
+                  "12.2",
+                  "2.02",
+                  "1.05",
+                  "4.06",
+                  "6.03",
+                  "12.0",
+                  "12.0",
+                  "7.08",
+                  "5.02"
+                ]
+              },
+              {
+                "config": {},
+                "name": "Xaxis",
+                "type": "string",
+                "values": [
+                  "8.04",
+                  "6.95",
+                  "7.58",
+                  "8.81",
+                  "8.33",
+                  "7.66",
+                  "6.81",
+                  "6.33",
+                  "8.96",
+                  "6.82",
+                  "7.20",
+                  "7.2",
+                  "4.23",
+                  "7.83",
+                  "4.47",
+                  "3.33",
+                  "4.96",
+                  "7.24",
+                  "8.84",
+                  "6.26",
+                  "5.82",
+                  "5.68"
+                ]
+              },
+              {
+                "config": {},
+                "name": "Size",
+                "type": "string",
+                "values": [
+                  "20",
+                  "21",
+                  "22",
+                  "23",
+                  "24",
+                  "25",
+                  "26",
+                  "27",
+                  "28",
+                  "29",
+                  "30",
+                  "29",
+                  "28",
+                  "27",
+                  "26",
+                  "25",
+                  "24",
+                  "23",
+                  "22",
+                  "21",
+                  "20",
+                  "19"
+                ]
+              }
+            ],
+            "meta": {}
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Basic Scatter Visual Editor ",
       "type": "volkovlabs-echarts-panel"
     },
     {
@@ -131,7 +260,7 @@
           "series": []
         }
       },
-      "pluginVersion": "6.3.0",
+      "pluginVersion": "6.4.0",
       "title": "Anscombe's quartet",
       "type": "volkovlabs-echarts-panel"
     },
@@ -178,7 +307,7 @@
           "series": []
         }
       },
-      "pluginVersion": "6.3.0",
+      "pluginVersion": "6.4.0",
       "title": "Clustering Process",
       "type": "volkovlabs-echarts-panel"
     },
@@ -225,12 +354,13 @@
           "series": []
         }
       },
-      "pluginVersion": "6.3.0",
+      "pluginVersion": "6.4.0",
       "title": "Clustering Process",
       "type": "volkovlabs-echarts-panel"
     },
     {
       "datasource": {
+        "default": true,
         "type": "marcusolsson-static-datasource",
         "uid": "4ytGZmF4k"
       },
@@ -250,7 +380,7 @@
           "format": "auto",
           "height": 600
         },
-        "editorMode": "code",
+        "editorMode": "visual",
         "gaode": {
           "key": "",
           "plugin": "AMap.Scale,AMap.ToolBar"
@@ -267,13 +397,87 @@
           "name": "default"
         },
         "visualEditor": {
-          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
-          "dataset": [],
-          "series": []
+          "code": "// See https://github.com/ecomfe/echarts-stat\ncontext.echarts.registerTransform(context.ecStat.transform.regression);\nreturn {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  grid: {\n    bottom: \"3%\",\n    containLabel: true,\n    left: \"3%\",\n    right: \"4%\",\n    top: \"4%\"\n  },\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'cross'\n    }\n  },\n  xAxis: {\n    splitLine: {\n      lineStyle: {\n        type: 'dashed'\n      }\n    }\n  },\n  yAxis: {\n    splitLine: {\n      lineStyle: {\n        type: 'dashed'\n      }\n    }\n  },\n};\n\n",
+          "dataset": [
+            {
+              "name": "xAxis",
+              "source": "A"
+            },
+            {
+              "name": "yAxis",
+              "source": "A"
+            },
+            {
+              "name": "size",
+              "source": "A"
+            }
+          ],
+          "series": [
+            {
+              "encode": {
+                "x": ["A:xAxis"],
+                "y": ["A:yAxis"]
+              },
+              "id": "Line",
+              "name": "Line",
+              "type": "line",
+              "uid": "b03da6d0-fa2a-463f-ae6c-d559a4807084"
+            },
+            {
+              "encode": {
+                "tooltip": [],
+                "x": ["A:xAxis"],
+                "y": ["A:yAxis"]
+              },
+              "id": "Scatter",
+              "name": "Scatter",
+              "sizeField": "A:size",
+              "symbol": "pin",
+              "type": "scatter",
+              "uid": "ff7205b9-9724-47a4-9bb4-84d959b1cdb9"
+            }
+          ]
         }
       },
-      "pluginVersion": "6.3.0",
-      "title": "Exponential Regression",
+      "pluginVersion": "6.4.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "4ytGZmF4k"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "xAxis",
+                "type": "number",
+                "values": []
+              },
+              {
+                "config": {},
+                "name": "yAxis",
+                "type": "number",
+                "values": []
+              },
+              {
+                "config": {},
+                "name": "size",
+                "type": "number",
+                "values": []
+              }
+            ],
+            "meta": {
+              "custom": {
+                "customCode": "const points = Array.from({ length: 18 }, (_, index) => index + 1)\nconst sizes = Array.from({ length: 18 }, (_, index) => index + 3)\nconst result = {\n  ...frame,\n  fields: frame.fields.map((field) => {\n\n    if (field.name === 'xAxis') {\n      return ({\n        ...field,\n        values: points\n      })\n    }\n\n    if (field.name === 'size') {\n      return ({\n        ...field,\n        values: sizes\n      })\n    }\n\n    const start = 4000;\n    const end = 78000;\n    const count = 18;\n\n    const r = Math.pow(end / start, 1 / (count - 1));\n\n    const numbers = Array.from({ length: count }, (_, index) => {\n      return Math.round(start * Math.pow(r, index));\n    });\n\n    console.log(numbers);\n\n    return ({\n      ...field,\n      values: numbers\n    })\n  })\n}\n\nreturn Promise.resolve(result);",
+                "valuesEditor": "custom"
+              }
+            }
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Exponential Regression Vvisual editor",
       "type": "volkovlabs-echarts-panel"
     },
     {
@@ -319,7 +523,7 @@
           "series": []
         }
       },
-      "pluginVersion": "6.3.0",
+      "pluginVersion": "6.4.0",
       "title": "Effect Scatter",
       "type": "volkovlabs-echarts-panel"
     },
@@ -355,8 +559,18 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "6.4.0",
       "title": "Linear Regression",
       "type": "volkovlabs-echarts-panel"
     },
@@ -392,8 +606,18 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "6.4.0",
       "title": "Polynomial Regression",
       "type": "volkovlabs-echarts-panel"
     },
@@ -429,8 +653,18 @@
           "key": ""
         },
         "map": "json",
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "themeEditor": {
+          "config": "{}",
+          "name": "default"
+        },
+        "visualEditor": {
+          "code": "return {\n  dataset: context.editor.dataset,\n  series: context.editor.series,\n  xAxis: {\n    type: 'time',\n  },\n  yAxis: {\n    type: 'value',\n    min: 'dataMin',\n  },\n}\n",
+          "dataset": [],
+          "series": []
+        }
       },
+      "pluginVersion": "6.4.0",
       "title": "Punch Card of Github",
       "type": "volkovlabs-echarts-panel"
     }
@@ -450,6 +684,6 @@
   "timezone": "",
   "title": "Scatter",
   "uid": "U332C4K4z",
-  "version": 1,
+  "version": 3,
   "weekStart": ""
 }
diff --git a/src/components/EchartsPanel/EchartsPanel.tsx b/src/components/EchartsPanel/EchartsPanel.tsx
index ac937d6..4956b4e 100644
--- a/src/components/EchartsPanel/EchartsPanel.tsx
+++ b/src/components/EchartsPanel/EchartsPanel.tsx
@@ -214,7 +214,7 @@ export const EchartsPanel: React.FC<Props> = ({ options, data, width, height, re
                   dataset: {
                     source: getDatasetSource(data.series, options.visualEditor.dataset),
                   },
-                  series: getDataSeries(options.visualEditor.series, data.series),
+                  series: getDataSeries(options.visualEditor.series, data.series, options.visualEditor.dataset),
                   radar: getRadarOptions(options.visualEditor, data.series),
                 },
               })
diff --git a/src/components/GraphEditors/ScatterEditor/ScatterEditor.tsx b/src/components/GraphEditors/ScatterEditor/ScatterEditor.tsx
new file mode 100644
index 0000000..831a623
--- /dev/null
+++ b/src/components/GraphEditors/ScatterEditor/ScatterEditor.tsx
@@ -0,0 +1,157 @@
+import { SelectableValue } from '@grafana/data';
+import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
+import React from 'react';
+
+import { SCATTER_SYMBOL_OPTIONS, TEST_IDS } from '../../../constants';
+import { DatasetItem, SeriesByType, SeriesItem, SeriesType } from '../../../types';
+import { getDatasetItemUniqueName } from '../../../utils';
+
+/**
+ * Label Width
+ */
+const labelWidth = 10;
+
+/**
+ * Scatter Item
+ */
+type ScatterSeriesItem = SeriesByType<SeriesItem, SeriesType.SCATTER>;
+
+/**
+ * Properties
+ */
+interface Props {
+  /**
+   * Value
+   *
+   * @type {ScatterSeriesItem}
+   */
+  value: ScatterSeriesItem;
+
+  /**
+   * On Change
+   */
+  onChange: (value: SeriesItem) => void;
+
+  /**
+   * Dataset
+   */
+  dataset: DatasetItem[];
+}
+
+/**
+ * Scatter editor
+ */
+export const ScatterEditor: React.FC<Props> = ({ value, onChange, dataset }) => {
+  return (
+    <>
+      <InlineFieldRow>
+        <InlineField label="Encode Y" labelWidth={labelWidth} grow={true}>
+          <Select
+            value={value.encode?.y}
+            options={dataset.map((item) => ({
+              value: getDatasetItemUniqueName(item),
+              label: getDatasetItemUniqueName(item),
+            }))}
+            isMulti={true}
+            isClearable={true}
+            onChange={(event) => {
+              const values = event as SelectableValue[];
+              onChange({
+                ...value,
+                encode: {
+                  ...value.encode,
+                  y: values.map((item) => item.value),
+                },
+              });
+            }}
+            aria-label={TEST_IDS.seriesEditor.scatterFieldEncodeY}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField label="Encode X" labelWidth={labelWidth} grow={true}>
+          <Select
+            value={value.encode?.x}
+            options={dataset.map((item) => ({
+              value: getDatasetItemUniqueName(item),
+              label: getDatasetItemUniqueName(item),
+            }))}
+            isMulti={true}
+            isClearable={true}
+            onChange={(event) => {
+              const values = event as SelectableValue[];
+              onChange({
+                ...value,
+                encode: {
+                  ...value.encode,
+                  x: values.map((item) => item.value),
+                },
+              });
+            }}
+            aria-label={TEST_IDS.seriesEditor.scatterFieldEncodeX}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField label="Size" labelWidth={labelWidth} grow={true}>
+          <Select
+            value={value.sizeField}
+            options={dataset.map((item) => ({
+              value: getDatasetItemUniqueName(item),
+              label: getDatasetItemUniqueName(item),
+            }))}
+            isClearable={true}
+            onChange={(event) => {
+              const values = event as SelectableValue;
+              onChange({
+                ...value,
+                sizeField: values?.value,
+              });
+            }}
+            aria-label={TEST_IDS.seriesEditor.scatterFieldSize}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField label="Symbol Type" labelWidth={25} grow={true}>
+          <Select
+            value={value.symbol}
+            options={SCATTER_SYMBOL_OPTIONS}
+            onChange={(event) => {
+              const values = event as SelectableValue;
+              onChange({
+                ...value,
+                symbol: values.value,
+              });
+            }}
+            aria-label={TEST_IDS.seriesEditor.scatterFieldSymbolType}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField label="Tooltip" labelWidth={labelWidth} grow={true}>
+          <Select
+            value={value.encode?.tooltip}
+            options={dataset.map((item) => ({
+              value: getDatasetItemUniqueName(item),
+              label: getDatasetItemUniqueName(item),
+            }))}
+            isMulti={true}
+            isClearable={true}
+            onChange={(event) => {
+              const values = event as SelectableValue[];
+              onChange({
+                ...value,
+                encode: {
+                  ...value.encode,
+                  tooltip: values.map((item) => item.value),
+                },
+              });
+            }}
+            aria-label={TEST_IDS.seriesEditor.scatterFieldTooltip}
+          />
+        </InlineField>
+      </InlineFieldRow>
+    </>
+  );
+};
diff --git a/src/components/GraphEditors/ScatterEditor/index.ts b/src/components/GraphEditors/ScatterEditor/index.ts
new file mode 100644
index 0000000..d73521c
--- /dev/null
+++ b/src/components/GraphEditors/ScatterEditor/index.ts
@@ -0,0 +1 @@
+export * from './ScatterEditor';
diff --git a/src/components/GraphEditors/index.ts b/src/components/GraphEditors/index.ts
index ba0d74d..1cc8eed 100644
--- a/src/components/GraphEditors/index.ts
+++ b/src/components/GraphEditors/index.ts
@@ -3,4 +3,5 @@ export * from './BoxplotEditor';
 export * from './LineEditor';
 export * from './RadarEditor';
 export * from './RadarOptionsEditor';
+export * from './ScatterEditor';
 export * from './SunburstEditor';
diff --git a/src/components/SeriesEditor/SeriesEditor.test.tsx b/src/components/SeriesEditor/SeriesEditor.test.tsx
index 6870458..7216d11 100644
--- a/src/components/SeriesEditor/SeriesEditor.test.tsx
+++ b/src/components/SeriesEditor/SeriesEditor.test.tsx
@@ -635,6 +635,156 @@ describe('Series Editor', () => {
       });
     });
 
+    describe('Scatter', () => {
+      const scatter = {
+        uid: 'scatter-1',
+        id: 'scatter-1',
+        name: 'scatter-1-1',
+        type: SeriesType.SCATTER,
+        encode: {
+          x: ['A:Time'],
+          y: ['A:Value'],
+        },
+      };
+      const items = [
+        scatter,
+        {
+          uid: 'other',
+          id: 'other',
+          name: 'Other',
+        },
+      ];
+
+      it('Should update encode Y', () => {
+        const { value, onChange } = createOnChangeHandler(items);
+
+        const { rerender } = render(
+          getComponent({
+            value,
+            onChange,
+            dataset,
+          })
+        );
+
+        const item = openItem(scatter.id);
+
+        fireEvent.change(item.scatterFieldEncodeY(), { target: { values: ['A:Value'] } });
+
+        rerender(
+          getComponent({
+            value,
+            onChange,
+          })
+        );
+
+        expect(item.scatterFieldEncodeY()).toHaveValue(['A:Value']);
+      });
+
+      it('Should update encode X', () => {
+        const { value, onChange } = createOnChangeHandler(items);
+
+        const { rerender } = render(
+          getComponent({
+            value,
+            onChange,
+            dataset,
+          })
+        );
+
+        const item = openItem(scatter.id);
+
+        fireEvent.change(item.scatterFieldEncodeX(), { target: { values: ['A:Value'] } });
+
+        rerender(
+          getComponent({
+            value,
+            onChange,
+          })
+        );
+
+        expect(item.scatterFieldEncodeX()).toHaveValue(['A:Value']);
+      });
+
+      it('Should update field size', () => {
+        const { value, onChange } = createOnChangeHandler(items);
+
+        const { rerender } = render(
+          getComponent({
+            value,
+            onChange,
+            dataset,
+          })
+        );
+
+        const item = openItem(scatter.id);
+
+        fireEvent.change(item.scatterFieldSize(), { target: { value: 'A:Value' } });
+
+        rerender(
+          getComponent({
+            value,
+            onChange,
+          })
+        );
+
+        expect(item.scatterFieldSize()).toHaveValue('A:Value');
+      });
+
+      it('Should update symbol type', () => {
+        const { value, onChange } = createOnChangeHandler(items);
+
+        const { rerender } = render(
+          getComponent({
+            value,
+            onChange,
+            dataset,
+          })
+        );
+
+        const item = openItem(scatter.id);
+
+        expect(item.scatterFieldSymbolType()).toHaveValue('circle');
+
+        fireEvent.change(item.scatterFieldSymbolType(), { target: { value: 'triangle' } });
+
+        rerender(
+          getComponent({
+            value,
+            onChange,
+          })
+        );
+
+        expect(item.scatterFieldSymbolType()).toHaveValue('triangle');
+      });
+
+      it('Should update encode tooltip', () => {
+        const { value, onChange } = createOnChangeHandler(items);
+
+        const { rerender } = render(
+          getComponent({
+            value,
+            onChange,
+            dataset,
+          })
+        );
+
+        const item = openItem(scatter.id);
+
+        expect(item.scatterFieldTooltip()).toHaveValue(['']);
+
+        fireEvent.change(item.scatterFieldTooltip(), { target: { values: ['A:Value'] } });
+
+        rerender(
+          getComponent({
+            value,
+            onChange,
+          })
+        );
+
+        expect(item.scatterFieldTooltip()).toHaveValue(['A:Value']);
+      });
+    });
+
     describe('Sunburst', () => {
       const sunburstItem = {
         ...SUNBURST_DEFAULT,
diff --git a/src/components/SeriesItemEditor/SeriesItemEditor.tsx b/src/components/SeriesItemEditor/SeriesItemEditor.tsx
index 4ba9041..6523434 100644
--- a/src/components/SeriesItemEditor/SeriesItemEditor.tsx
+++ b/src/components/SeriesItemEditor/SeriesItemEditor.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { SERIES_TYPE_OPTIONS, TEST_IDS } from '../../constants';
 import { DatasetItem, SeriesItem, SeriesType } from '../../types';
 import { getSeriesWithNewType } from '../../utils';
-import { BarEditor, BoxplotEditor, LineEditor, RadarEditor, SunburstEditor } from '../GraphEditors';
+import { BarEditor, BoxplotEditor, LineEditor, RadarEditor, ScatterEditor, SunburstEditor } from '../GraphEditors';
 /**
  * Label Width
  */
@@ -38,21 +38,25 @@ export const SeriesItemEditor: React.FC<Props> = ({ value, onChange, dataset })
    */
   const renderElement = (value: SeriesItem) => {
     switch (value.type) {
+      case SeriesType.BAR: {
+        return <BarEditor value={value} onChange={onChange} dataset={dataset} />;
+      }
+      case SeriesType.BOXPLOT: {
+        return <BoxplotEditor value={value} onChange={onChange} dataset={dataset} />;
+      }
       case SeriesType.LINE: {
         return <LineEditor value={value} onChange={onChange} dataset={dataset} />;
       }
       case SeriesType.RADAR: {
         return <RadarEditor value={value} onChange={onChange} dataset={dataset} />;
       }
-      case SeriesType.BAR: {
-        return <BarEditor value={value} onChange={onChange} dataset={dataset} />;
+      case SeriesType.SCATTER: {
+        return <ScatterEditor value={value} onChange={onChange} dataset={dataset} />;
       }
       case SeriesType.SUNBURST: {
         return <SunburstEditor value={value} onChange={onChange} dataset={dataset} />;
       }
-      case SeriesType.BOXPLOT: {
-        return <BoxplotEditor value={value} onChange={onChange} dataset={dataset} />;
-      }
+
       default: {
         return <></>;
       }
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e447dd7..afd8aae 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -3,6 +3,7 @@ export * from './echarts';
 export * from './editor';
 export * from './maps';
 export * from './radar';
+export * from './scatter';
 export * from './sunburst';
 export * from './tests';
 export * from './visual-editor';
diff --git a/src/constants/scatter.ts b/src/constants/scatter.ts
new file mode 100644
index 0000000..4307e5c
--- /dev/null
+++ b/src/constants/scatter.ts
@@ -0,0 +1,46 @@
+/**
+ * Symbol Options
+ */
+export enum SymbolOptions {
+  CIRCLE = 'circle',
+  RECT = 'rect',
+  ROUNDRECT = 'roundRect',
+  TRIANGLE = 'triangle',
+  DIAMOND = 'diamond',
+  PIN = 'pin',
+  NONE = 'none',
+}
+
+/**
+ * Scatter symbol options Options
+ */
+export const SCATTER_SYMBOL_OPTIONS = [
+  {
+    value: SymbolOptions.CIRCLE,
+    label: 'Circle',
+  },
+  {
+    value: SymbolOptions.RECT,
+    label: 'Rectangle',
+  },
+  {
+    value: SymbolOptions.ROUNDRECT,
+    label: 'Round Rectangle',
+  },
+  {
+    value: SymbolOptions.TRIANGLE,
+    label: 'Triangle',
+  },
+  {
+    value: SymbolOptions.DIAMOND,
+    label: 'Diamond',
+  },
+  {
+    value: SymbolOptions.PIN,
+    label: 'Pin',
+  },
+  {
+    value: SymbolOptions.NONE,
+    label: 'None',
+  },
+];
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index 24c7936..597e42f 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -52,6 +52,11 @@ export const TEST_IDS = {
     emphasisFocusOption: (name: string) => `series-editor emphasis-focus-option-${name}`,
     boxplotFieldEncodeX: 'series-editor boxplot-field-encode-x',
     boxplotFieldEncodeY: 'series-editor boxplot-field-encode-y',
+    scatterFieldEncodeX: 'series-editor scatter-field-encode-x',
+    scatterFieldEncodeY: 'series-editor scatter-field-encode-y',
+    scatterFieldSize: 'series-editor scatter-field-size',
+    scatterFieldSymbolType: 'series-editor scatter-field-symbol-type',
+    scatterFieldTooltip: 'series-editor scatter-field-tooltip',
   },
   datasetEditor: {
     buttonAddNew: 'data-testid dataset-editor button-add-new',
diff --git a/src/constants/visual-editor.ts b/src/constants/visual-editor.ts
index f37306b..59acc70 100644
--- a/src/constants/visual-editor.ts
+++ b/src/constants/visual-editor.ts
@@ -1,6 +1,37 @@
 import { SeriesType } from '../types';
 
-export const SERIES_TYPE_OPTIONS = Object.values(SeriesType).map((type) => ({
-  label: type.charAt(0).toUpperCase() + type.slice(1),
-  value: type,
-}));
+const UNSUPPORTED_TYPES = [
+  'pie',
+  'effectScatter',
+  'tree',
+  'treemap',
+  'candlestick',
+  'heatmap',
+  'map',
+  'parallel',
+  'lines',
+  'graph',
+  'sankey',
+  'funnel',
+  'gauge',
+  'pictorialBar',
+  'themeRiver',
+  'custom',
+];
+
+export const SERIES_TYPE_OPTIONS = Object.values(SeriesType)
+  .sort()
+  .map((type) => {
+    if (UNSUPPORTED_TYPES.includes(type)) {
+      return {
+        label: type.charAt(0).toUpperCase() + type.slice(1),
+        value: type,
+        isDisabled: true,
+        description: 'In development',
+      };
+    }
+    return {
+      label: type.charAt(0).toUpperCase() + type.slice(1),
+      value: type,
+    };
+  });
diff --git a/src/types/index.ts b/src/types/index.ts
index bb8e2a6..47c619a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,6 +5,7 @@ export * from './gaode';
 export * from './google';
 export * from './panel';
 export * from './radar';
+export * from './scatter';
 export * from './sunburst';
 export * from './theme-editor';
 export * from './visual-editor';
diff --git a/src/types/scatter.ts b/src/types/scatter.ts
new file mode 100644
index 0000000..73dccc6
--- /dev/null
+++ b/src/types/scatter.ts
@@ -0,0 +1,46 @@
+import { EChartOption } from 'echarts';
+
+/**
+ * Scatter Series Options
+ */
+export interface ScatterSeriesOptions extends EChartOption.SeriesScatter {
+  /**
+   * Encode
+   */
+  encode: {
+    /**
+     * Y
+     *
+     * @type {string[]}
+     */
+    y: string[];
+
+    /**
+     * X
+     *
+     * @type {string[]}
+     */
+    x: string[];
+
+    /**
+     * X
+     *
+     * @type {string[]}
+     */
+    tooltip: string[];
+  };
+
+  /**
+   * Size field
+   *
+   * @type {string}
+   */
+  sizeField?: string;
+
+  /**
+   * Symbol
+   *
+   * @type {string}
+   */
+  symbol: string;
+}
diff --git a/src/types/visual-editor.ts b/src/types/visual-editor.ts
index 83acd02..0676e45 100644
--- a/src/types/visual-editor.ts
+++ b/src/types/visual-editor.ts
@@ -3,6 +3,7 @@ import { EChartOption } from 'echarts';
 import { BarSeriesOptions } from './bar';
 import { BoxplotSeriesOptions } from './boxplot';
 import { RadarConfigOptions, RadarSeriesOptions } from './radar';
+import { ScatterSeriesOptions } from './scatter';
 import { SunburstSeriesOptions } from './sunburst';
 
 /**
@@ -117,7 +118,7 @@ export type SeriesItem = BaseSeriesOptions &
     | { type: SeriesType.GRAPH }
     | { type: SeriesType.GAUGE }
     | { type: SeriesType.PIE }
-    | { type: SeriesType.SCATTER }
+    | ({ type: SeriesType.SCATTER } & ScatterSeriesOptions)
     | { type: SeriesType.EFFECTSCATTER }
     | ({ type: SeriesType.RADAR } & RadarSeriesOptions)
     | { type: SeriesType.TREE }
diff --git a/src/utils/convert-scatter-options.test.ts b/src/utils/convert-scatter-options.test.ts
new file mode 100644
index 0000000..93d0aaa
--- /dev/null
+++ b/src/utils/convert-scatter-options.test.ts
@@ -0,0 +1,46 @@
+import { convertScatterOptions } from './convert-scatter-options';
+
+/**
+ * Convert Scatter Options
+ */
+describe('Convert Scatter options', () => {
+  const dataset = [
+    { name: 'size1', source: 'source1' },
+    { name: 'size2', source: 'source2' },
+    { name: 'size3', source: 'source1' },
+  ] as any;
+
+  it('Should return the original item when sizeField is not defined', () => {
+    const item = { type: 'scatter' } as any;
+    const result = convertScatterOptions(item, dataset);
+    expect(result).toEqual(item);
+  });
+
+  it('Should return the item with symbolSize function when sizeField is defined', () => {
+    const item = {
+      type: 'scatter',
+      sizeField: 'source1:size1',
+    } as any;
+
+    const result = convertScatterOptions(item, dataset);
+
+    expect(result).toHaveProperty('symbolSize');
+    expect(typeof result.symbolSize).toBe('function');
+  });
+
+  it('should return the correct size for symbolSize function', () => {
+    const item = {
+      type: 'scatter',
+      sizeField: 'source1:size1',
+    } as any;
+
+    const result = convertScatterOptions(item, dataset);
+
+    const { symbolSize } = result;
+    if (symbolSize && typeof result.symbolSize === 'function') {
+      const datasetValues = [10, 20, 30] as any;
+      const sizeValue = result.symbolSize(datasetValues);
+      expect(sizeValue).toBe(10);
+    }
+  });
+});
diff --git a/src/utils/convert-scatter-options.ts b/src/utils/convert-scatter-options.ts
new file mode 100644
index 0000000..f9700d0
--- /dev/null
+++ b/src/utils/convert-scatter-options.ts
@@ -0,0 +1,33 @@
+import { DatasetItem, SeriesByType, SeriesItem, SeriesType } from '../types';
+
+/**
+ * Convert Scatter Options
+ * @param item
+ * @param dataset
+ */
+export const convertScatterOptions = (item: SeriesByType<SeriesItem, SeriesType.SCATTER>, dataset: DatasetItem[]) => {
+  if (item.sizeField) {
+    /**
+     * Split field string
+     */
+    const currentField = item.sizeField.split(':');
+
+    /**
+     * Get position for size field in data set array
+     */
+    const sizeIndex = Object.values(dataset).findIndex(
+      (item) => item.name === currentField[1] && item.source === currentField[0]
+    );
+
+    if (sizeIndex !== -1) {
+      return {
+        ...item,
+        /**
+         * Return for symbolSize value from field by position
+         */
+        symbolSize: (value: unknown[]) => value[sizeIndex],
+      };
+    }
+  }
+  return item;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index df0fa4f..8dc4c58 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './code-parameters';
+export * from './convert-scatter-options';
 export * from './visual-editor';
diff --git a/src/utils/visual-editor.test.ts b/src/utils/visual-editor.test.ts
index 7673b38..d384d79 100644
--- a/src/utils/visual-editor.test.ts
+++ b/src/utils/visual-editor.test.ts
@@ -185,6 +185,25 @@ describe('Visual Editor Utils', () => {
       });
     });
 
+    it('Should return a Scatter series', () => {
+      const item = { id: 1, name: 'Scatter Series', uid: 'scatter-1' } as any;
+      const newType = SeriesType.SCATTER;
+      const result = getSeriesWithNewType(item, newType);
+
+      expect(result).toEqual({
+        id: 1,
+        name: 'Scatter Series',
+        uid: 'scatter-1',
+        type: SeriesType.SCATTER,
+        encode: {
+          x: [],
+          y: [],
+          tooltip: [],
+        },
+        symbol: 'circle',
+      });
+    });
+
     it('Should return a Sunburst series', () => {
       const item = { id: 1, name: 'Sunburst Series', uid: 'sunburst-1' } as any;
       const newType = SeriesType.SUNBURST;
@@ -259,7 +278,7 @@ describe('Visual Editor Utils', () => {
         },
       ] as any;
 
-      const result = convertSeriesToChartOption(item, series);
+      const result = convertSeriesToChartOption(item, series, []);
 
       expect(result).toEqual({
         id: 'RadarSeries',
@@ -315,7 +334,7 @@ describe('Visual Editor Utils', () => {
         },
       ] as any;
 
-      const result = convertSeriesToChartOption(item, series);
+      const result = convertSeriesToChartOption(item, series, []);
 
       expect(result).toEqual({
         id: 1,
@@ -339,6 +358,40 @@ describe('Visual Editor Utils', () => {
       });
     });
 
+    it('Should convert a scatter series to chart option', () => {
+      const item = {
+        data: [],
+        id: 'ScatterSeries',
+        uid: 'scatter-set',
+        name: 'Scatter Series',
+        type: SeriesType.SCATTER,
+        encode: {
+          tooltip: ['A:Size'],
+          x: ['A:X'],
+          y: ['A:Y'],
+        },
+        symbol: 'rect',
+      } as any;
+
+      const series = [] as any;
+
+      const result = convertSeriesToChartOption(item, series, []);
+
+      expect(result).toEqual({
+        id: 'ScatterSeries',
+        name: 'Scatter Series',
+        type: SeriesType.SCATTER,
+        uid: 'scatter-set',
+        data: [],
+        encode: {
+          tooltip: ['A:Size'],
+          x: ['A:X'],
+          y: ['A:Y'],
+        },
+        symbol: 'rect',
+      });
+    });
+
     it('Should convert a radar series to chart option with empty values if no appropriate fields ', () => {
       const item = {
         data: [],
@@ -370,7 +423,7 @@ describe('Visual Editor Utils', () => {
         },
       ] as any;
 
-      const result = convertSeriesToChartOption(item, series);
+      const result = convertSeriesToChartOption(item, series, []);
 
       expect(result).toEqual({
         id: 'RadarSeries',
diff --git a/src/utils/visual-editor.ts b/src/utils/visual-editor.ts
index b31a861..0ad5881 100644
--- a/src/utils/visual-editor.ts
+++ b/src/utils/visual-editor.ts
@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { SUNBURST_DEFAULT } from '../constants';
 import { DatasetItem, RadarChartOptions, SeriesByType, SeriesItem, SeriesType, VisualEditorOptions } from '../types';
+import { convertScatterOptions } from './convert-scatter-options';
 import { convertSunburstOptions } from './convert-sunburst-options';
 import { getFieldValues } from './data-frame';
 
@@ -137,6 +138,18 @@ export const getSeriesWithNewType = <TItem extends Pick<SeriesItem, 'id' | 'name
         type: newType,
       };
     }
+    case SeriesType.SCATTER: {
+      return {
+        ...commonValues,
+        encode: {
+          x: [],
+          y: [],
+          tooltip: [],
+        },
+        symbol: 'circle',
+        type: newType,
+      };
+    }
     default: {
       return {
         ...commonValues,
@@ -150,8 +163,9 @@ export const getSeriesWithNewType = <TItem extends Pick<SeriesItem, 'id' | 'name
  * Convert Series to chart option
  * @param item
  * @param series
+ * @param dataset
  */
-export const convertSeriesToChartOption = (item: SeriesItem, series: DataFrame[]) => {
+export const convertSeriesToChartOption = (item: SeriesItem, series: DataFrame[], dataset: DatasetItem[]) => {
   switch (item.type) {
     case SeriesType.RADAR: {
       const currentData = item.radarDimensions.map((dimension) => {
@@ -178,6 +192,9 @@ export const convertSeriesToChartOption = (item: SeriesItem, series: DataFrame[]
         data: currentData,
       };
     }
+    case SeriesType.SCATTER: {
+      return convertScatterOptions(item, dataset);
+    }
     case SeriesType.SUNBURST: {
       return convertSunburstOptions(item, series);
     }
@@ -196,10 +213,11 @@ export const getSeriesUniqueId = () => uuidv4();
  * Data Series
  * @param visualEditorSeries
  * @param series
+ * @param dataset
  */
-export const getDataSeries = (visualEditorSeries: SeriesItem[], series: DataFrame[]) => {
+export const getDataSeries = (visualEditorSeries: SeriesItem[], series: DataFrame[], dataset: DatasetItem[]) => {
   return visualEditorSeries.map((item) => {
-    return convertSeriesToChartOption(item, series);
+    return convertSeriesToChartOption(item, series, dataset);
   });
 };