diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/index.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/index.js
index b714be5dd3b6c..1b31acfd4468d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/index.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/index.js
@@ -52,7 +52,7 @@ const metadata = new ChartMetadata({
     t('Time'),
     t('Trend'),
     t('nvd3'),
-    t('Highly-used'),
+    t('Deprecated'),
   ],
   thumbnail,
   useLegacyApi: true,
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/index.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
index 8aa434d610e48..7e84fe48e5474 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
@@ -35,13 +35,13 @@ const metadata = new ChartMetadata({
   name: t('Time-series Bar Chart'),
   supportedAnnotationTypes: [ANNOTATION_TYPES.INTERVAL, ANNOTATION_TYPES.EVENT],
   tags: [
-    t('Advanced-Analytics'),
-    t('Percentages'),
-    t('Proportional'),
-    t('Stacked'),
     t('Time'),
     t('Trend'),
+    t('Stacked'),
     t('Vertical'),
+    t('Percentages'),
+    t('Proportional'),
+    t('Advanced-Analytics'),
   ],
   thumbnail,
   useLegacyApi: true,
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/index.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/index.js
index 2dde694685760..3ec8f2c7fd06b 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/index.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/index.js
@@ -42,7 +42,7 @@ const metadata = new ChartMetadata({
     ANNOTATION_TYPES.EVENT,
     ANNOTATION_TYPES.FORMULA,
   ],
-  tags: [t('Aesthetic'), t('Legacy'), t('nvd3')],
+  tags: [t('Aesthetic'), t('Legacy'), t('nvd3'), t('Deprecated')],
   thumbnail,
   useLegacyApi: true,
 });
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
index a96487c8eec1b..8929c4cb61215 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
@@ -55,7 +55,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
           AnnotationType.Interval,
           AnnotationType.Timeseries,
         ],
-        name: t('Mixed timeseries chart'),
+        name: t('Mixed Time-Series'),
         thumbnail,
         tags: [
           t('Advanced-Analytics'),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
new file mode 100644
index 0000000000000..1765f8c52f926
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -0,0 +1,445 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { legacyValidateInteger, legacyValidateNumber, t } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  ControlPanelsContainerProps,
+  D3_TIME_FORMAT_DOCS,
+  emitFilterControl,
+  sections,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+
+import {
+  DEFAULT_FORM_DATA,
+  EchartsTimeseriesContributionType,
+  EchartsTimeseriesSeriesType,
+} from '../types';
+import { legendSection } from '../../controls';
+
+const {
+  annotationLayers,
+  contributionMode,
+  forecastEnabled,
+  forecastInterval,
+  forecastPeriods,
+  forecastSeasonalityDaily,
+  forecastSeasonalityWeekly,
+  forecastSeasonalityYearly,
+  logAxis,
+  markerEnabled,
+  markerSize,
+  minorSplitLine,
+  opacity,
+  rowLimit,
+  seriesType,
+  stack,
+  tooltipTimeFormat,
+  truncateYAxis,
+  yAxisBounds,
+  zoomable,
+  xAxisLabelRotation,
+} = DEFAULT_FORM_DATA;
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyTimeseriesTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['metrics'],
+        ['groupby'],
+        [
+          {
+            name: 'contributionMode',
+            config: {
+              type: 'SelectControl',
+              label: t('Contribution Mode'),
+              default: contributionMode,
+              choices: [
+                [null, 'None'],
+                [EchartsTimeseriesContributionType.Row, 'Total'],
+                [EchartsTimeseriesContributionType.Column, 'Series'],
+              ],
+              description: t('Calculate contribution per series or total'),
+            },
+          },
+        ],
+        ['adhoc_filters'],
+        emitFilterControl,
+        ['limit'],
+        ['timeseries_limit_metric'],
+        [
+          {
+            name: 'order_desc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Descending'),
+              default: true,
+              description: t('Whether to sort descending or ascending'),
+            },
+          },
+        ],
+        ['row_limit'],
+      ],
+    },
+    {
+      label: t('Annotations and Layers'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'annotation_layers',
+            config: {
+              type: 'AnnotationLayerControl',
+              label: '',
+              default: annotationLayers,
+              description: t('Annotation Layers'),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Predictive Analytics'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'forecastEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Enable forecast'),
+              renderTrigger: false,
+              default: forecastEnabled,
+              description: t('Enable forecasting'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastPeriods',
+            config: {
+              type: 'TextControl',
+              label: t('Forecast periods'),
+              validators: [legacyValidateInteger],
+              default: forecastPeriods,
+              description: t('How many periods into the future do we want to predict'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastInterval',
+            config: {
+              type: 'TextControl',
+              label: t('Confidence interval'),
+              validators: [legacyValidateNumber],
+              default: forecastInterval,
+              description: t('Width of the confidence interval. Should be between 0 and 1'),
+            },
+          },
+          {
+            name: 'forecastSeasonalityYearly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Yearly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityYearly,
+              description: t(
+                'Should yearly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastSeasonalityWeekly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Weekly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityWeekly,
+              description: t(
+                'Should weekly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+          {
+            name: 'forecastSeasonalityDaily',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Daily seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityDaily,
+              description: t(
+                'Should daily seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['color_scheme', 'label_colors'],
+        [
+          {
+            name: 'seriesType',
+            config: {
+              type: 'SelectControl',
+              label: t('Series Style'),
+              renderTrigger: true,
+              default: seriesType,
+              choices: [
+                [EchartsTimeseriesSeriesType.Line, 'Line'],
+                [EchartsTimeseriesSeriesType.Smooth, 'Smooth Line'],
+                [EchartsTimeseriesSeriesType.Start, 'Step - start'],
+                [EchartsTimeseriesSeriesType.Middle, 'Step - middle'],
+                [EchartsTimeseriesSeriesType.End, 'Step - end'],
+              ],
+              description: t('Series chart type (line, bar etc)'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'opacity',
+            config: {
+              type: 'SliderControl',
+              label: t('Area chart opacity'),
+              renderTrigger: true,
+              min: 0,
+              max: 1,
+              step: 0.1,
+              default: opacity,
+              description: t('Opacity of Area Chart. Also applies to confidence band.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'stack',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Stack series'),
+              renderTrigger: true,
+              default: stack,
+              description: t('Stack series on top of each other'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Marker'),
+              renderTrigger: true,
+              default: markerEnabled,
+              description: t('Draw a marker on data points. Only applicable for line types.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerSize',
+            config: {
+              type: 'SliderControl',
+              label: t('Marker Size'),
+              renderTrigger: true,
+              min: 0,
+              max: 100,
+              default: markerSize,
+              description: t('Size of marker. Also applies to forecast observations.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.markerEnabled?.value),
+            },
+          },
+        ],
+        [
+          {
+            name: 'zoomable',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Data Zoom'),
+              default: zoomable,
+              renderTrigger: true,
+              description: t('Enable data zooming controls'),
+            },
+          },
+        ],
+        ...legendSection,
+        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [
+          {
+            name: 'x_axis_time_format',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              default: 'smart_date',
+              description: `${D3_TIME_FORMAT_DOCS}. ${t(
+                'When using other than adaptive formatting, labels may overlap.',
+              )}`,
+            },
+          },
+        ],
+        [
+          {
+            name: 'xAxisLabelRotation',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              clearable: false,
+              label: t('Rotate x axis label'),
+              choices: [
+                [0, '0°'],
+                [45, '45°'],
+              ],
+              default: xAxisLabelRotation,
+              renderTrigger: true,
+              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Tooltip')}</h1>],
+        [
+          {
+            name: 'rich_tooltip',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Rich tooltip'),
+              renderTrigger: true,
+              default: true,
+              description: t('Shows a list of all series available at that point in time'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'tooltipTimeFormat',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              label: t('Tooltip time format'),
+              default: tooltipTimeFormat,
+              clearable: false,
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        ['y_axis_format'],
+        [
+          {
+            name: 'logAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Logarithmic y-axis'),
+              renderTrigger: true,
+              default: logAxis,
+              description: t('Logarithmic y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'minorSplitLine',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Minor Split Line'),
+              renderTrigger: true,
+              default: minorSplitLine,
+              description: t('Draw split lines for minor y-axis ticks'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'yAxisTitle',
+            config: {
+              type: 'TextControl',
+              label: t('Primary y-axis title'),
+              renderTrigger: true,
+              default: '',
+              description: t('Title for y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'truncateYAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Truncate Y Axis'),
+              default: truncateYAxis,
+              renderTrigger: true,
+              description: t(
+                'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: t('Y Axis Bounds'),
+              renderTrigger: true,
+              default: yAxisBounds,
+              description: t(
+                'Bounds for the Y-axis. When left empty, the bounds are ' +
+                  'dynamically defined based on the min/max of the data. Note that ' +
+                  "this feature will only expand the axis range. It won't " +
+                  "narrow the data's extent.",
+              ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.truncateYAxis?.value),
+            },
+          },
+        ],
+      ],
+    },
+  ],
+  controlOverrides: {
+    row_limit: {
+      default: rowLimit,
+    },
+  },
+};
+
+export default config;
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1.png
new file mode 100644
index 0000000000000..212f9bf1e6713
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/Area1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail.png
new file mode 100644
index 0000000000000..2452c6a18f6b9
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
new file mode 100644
index 0000000000000..13bbe14ff7a22
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -0,0 +1,83 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../buildQuery';
+import controlPanel from './controlPanel';
+import transformProps from '../transformProps';
+import thumbnail from './images/thumbnail.png';
+import { EchartsTimeseriesChartProps, EchartsTimeseriesFormData } from '../types';
+import example1 from './images/Area1.png';
+
+const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
+  transformProps({
+    ...chartProps,
+    formData: { ...chartProps.formData, area: true },
+  });
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  /**
+   * The constructor is used to pass relevant metadata and callbacks that get
+   * registered in respective registries that are used throughout the library
+   * and application. A more thorough description of each property is given in
+   * the respective imported file.
+   *
+   * It is worth noting that `buildQuery` and is optional, and only needed for
+   * advanced visualizations that require either post processing operations
+   * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
+   */
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series Area chart are similar to line chart in that they represent variables with the same scale, but area charts stack the metrics on top of each other. An area chart in Superset can be stream, stack, or expand.',
+        ),
+        exampleGallery: [{ url: example1 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Area Chart'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Time'),
+          t('Line'),
+          t('Transformable'),
+          t('Stacked'),
+          t('Highly-used'),
+        ],
+        thumbnail,
+      }),
+      transformProps: areaTransformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1.png
new file mode 100644
index 0000000000000..94dd5c58600b6
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2.png
new file mode 100644
index 0000000000000..5c028c5d85daf
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar2.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3.png
new file mode 100644
index 0000000000000..84f826fc86e42
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/Bar3.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail.png
new file mode 100644
index 0000000000000..29eed8d1d407f
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
new file mode 100644
index 0000000000000..4766c54dc7b6b
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -0,0 +1,80 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../../buildQuery';
+import controlPanel from '../controlPanel';
+import transformProps from '../../transformProps';
+import thumbnail from './images/thumbnail.png';
+import {
+  EchartsTimeseriesChartProps,
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesSeriesType,
+} from '../../types';
+import example1 from './images/Bar1.png';
+import example2 from './images/Bar2.png';
+import example3 from './images/Bar3.png';
+
+const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
+  transformProps({
+    ...chartProps,
+    formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Bar },
+  });
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series Bar Charts are used to show the changes in a metric over time as a series of bars.',
+        ),
+        exampleGallery: [{ url: example1 }, { url: example2 }, { url: example3 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Bar Chart v2'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Time'),
+          t('Transformable'),
+          t('Stacked'),
+          t('Vertical'),
+          t('Bar'),
+          t('Highly-used'),
+        ],
+        thumbnail,
+      }),
+      transformProps: barTransformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1.png
new file mode 100644
index 0000000000000..d19150b1d5d4c
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2.png
new file mode 100644
index 0000000000000..30a44d9e57fed
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/Line2.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail.png
new file mode 100644
index 0000000000000..eb0cd50dbb055
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
new file mode 100644
index 0000000000000..d83ff0b57a1d3
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -0,0 +1,75 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../../buildQuery';
+import controlPanel from '../controlPanel';
+import transformProps from '../../transformProps';
+import thumbnail from './images/thumbnail.png';
+import {
+  EchartsTimeseriesChartProps,
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesSeriesType,
+} from '../../types';
+import example1 from './images/Line1.png';
+import example2 from './images/Line2.png';
+
+const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
+  transformProps({
+    ...chartProps,
+    formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Line },
+  });
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series line chart is used to visualize repeated measurements taken over regular time intervals. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
+        ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Line Chart'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Line'),
+          t('Highly-used'),
+        ],
+        thumbnail,
+      }),
+      transformProps: lineTransformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1.png
new file mode 100644
index 0000000000000..145b69a23d14d
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/Scatter1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail.png
new file mode 100644
index 0000000000000..1692f3bd9df12
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
new file mode 100644
index 0000000000000..9d6440c56100e
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -0,0 +1,76 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../../buildQuery';
+import controlPanel from '../controlPanel';
+import transformProps from '../../transformProps';
+import thumbnail from './images/thumbnail.png';
+import {
+  EchartsTimeseriesChartProps,
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesSeriesType,
+} from '../../types';
+import example1 from './images/Scatter1.png';
+
+const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
+  transformProps({
+    ...chartProps,
+    formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Scatter },
+  });
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series Scatter Plot has time on the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.',
+        ),
+        exampleGallery: [{ url: example1 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Scatter Plot'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Time'),
+          t('Transformable'),
+          t('Scatter'),
+          t('Highly-used'),
+        ],
+        thumbnail,
+      }),
+      transformProps: scatterTransformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1.png
new file mode 100644
index 0000000000000..d0f1cb9e34905
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/SmoothLine1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail.png
new file mode 100644
index 0000000000000..9105dd3ece382
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
new file mode 100644
index 0000000000000..da0c71e12916f
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -0,0 +1,75 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../../buildQuery';
+import controlPanel from '../controlPanel';
+import transformProps from '../../transformProps';
+import thumbnail from './images/thumbnail.png';
+import {
+  EchartsTimeseriesChartProps,
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesSeriesType,
+} from '../../types';
+import example1 from './images/SmoothLine1.png';
+
+const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
+  transformProps({
+    ...chartProps,
+    formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Smooth },
+  });
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series Smooth-line is a variation of line chart. Without angles and hard edges, Smooth-line looks more smarter and more professional.',
+        ),
+        exampleGallery: [{ url: example1 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Smooth Line'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Time'),
+          t('Line'),
+          t('Transformable'),
+        ],
+        thumbnail,
+      }),
+      transformProps: smoothTransformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
new file mode 100644
index 0000000000000..45b8ee221ca85
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx
@@ -0,0 +1,405 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { legacyValidateInteger, legacyValidateNumber, t } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  ControlPanelsContainerProps,
+  D3_TIME_FORMAT_DOCS,
+  emitFilterControl,
+  sections,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+
+import { DEFAULT_FORM_DATA, EchartsTimeseriesContributionType } from '../types';
+import { legendSection } from '../../controls';
+
+const {
+  annotationLayers,
+  contributionMode,
+  forecastEnabled,
+  forecastInterval,
+  forecastPeriods,
+  forecastSeasonalityDaily,
+  forecastSeasonalityWeekly,
+  forecastSeasonalityYearly,
+  logAxis,
+  markerEnabled,
+  markerSize,
+  minorSplitLine,
+  rowLimit,
+  stack,
+  tooltipTimeFormat,
+  truncateYAxis,
+  yAxisBounds,
+  zoomable,
+  xAxisLabelRotation,
+} = DEFAULT_FORM_DATA;
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyTimeseriesTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['metrics'],
+        ['groupby'],
+        [
+          {
+            name: 'contributionMode',
+            config: {
+              type: 'SelectControl',
+              label: t('Contribution Mode'),
+              default: contributionMode,
+              choices: [
+                [null, 'None'],
+                [EchartsTimeseriesContributionType.Row, 'Total'],
+                [EchartsTimeseriesContributionType.Column, 'Series'],
+              ],
+              description: t('Calculate contribution per series or total'),
+            },
+          },
+        ],
+        ['adhoc_filters'],
+        emitFilterControl,
+        ['limit'],
+        ['timeseries_limit_metric'],
+        [
+          {
+            name: 'order_desc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Descending'),
+              default: true,
+              description: t('Whether to sort descending or ascending'),
+            },
+          },
+        ],
+        ['row_limit'],
+      ],
+    },
+    {
+      label: t('Annotations and Layers'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'annotation_layers',
+            config: {
+              type: 'AnnotationLayerControl',
+              label: '',
+              default: annotationLayers,
+              description: t('Annotation Layers'),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Predictive Analytics'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'forecastEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Enable forecast'),
+              renderTrigger: false,
+              default: forecastEnabled,
+              description: t('Enable forecasting'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastPeriods',
+            config: {
+              type: 'TextControl',
+              label: t('Forecast periods'),
+              validators: [legacyValidateInteger],
+              default: forecastPeriods,
+              description: t('How many periods into the future do we want to predict'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastInterval',
+            config: {
+              type: 'TextControl',
+              label: t('Confidence interval'),
+              validators: [legacyValidateNumber],
+              default: forecastInterval,
+              description: t('Width of the confidence interval. Should be between 0 and 1'),
+            },
+          },
+          {
+            name: 'forecastSeasonalityYearly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Yearly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityYearly,
+              description: t(
+                'Should yearly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastSeasonalityWeekly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Weekly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityWeekly,
+              description: t(
+                'Should weekly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+          {
+            name: 'forecastSeasonalityDaily',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Daily seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityDaily,
+              description: t(
+                'Should daily seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['color_scheme', 'label_colors'],
+        [
+          {
+            name: 'stack',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Stack series'),
+              renderTrigger: true,
+              default: stack,
+              description: t('Stack series on top of each other'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Marker'),
+              renderTrigger: true,
+              default: markerEnabled,
+              description: t('Draw a marker on data points. Only applicable for line types.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerSize',
+            config: {
+              type: 'SliderControl',
+              label: t('Marker Size'),
+              renderTrigger: true,
+              min: 0,
+              max: 100,
+              default: markerSize,
+              description: t('Size of marker. Also applies to forecast observations.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.markerEnabled?.value),
+            },
+          },
+        ],
+        [
+          {
+            name: 'zoomable',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Data Zoom'),
+              default: zoomable,
+              renderTrigger: true,
+              description: t('Enable data zooming controls'),
+            },
+          },
+        ],
+        ...legendSection,
+        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [
+          {
+            name: 'x_axis_time_format',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              default: 'smart_date',
+              description: `${D3_TIME_FORMAT_DOCS}. ${t(
+                'When using other than adaptive formatting, labels may overlap.',
+              )}`,
+            },
+          },
+        ],
+        [
+          {
+            name: 'xAxisLabelRotation',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              clearable: false,
+              label: t('Rotate x axis label'),
+              choices: [
+                [0, '0°'],
+                [45, '45°'],
+              ],
+              default: xAxisLabelRotation,
+              renderTrigger: true,
+              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Tooltip')}</h1>],
+        [
+          {
+            name: 'rich_tooltip',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Rich tooltip'),
+              renderTrigger: true,
+              default: true,
+              description: t('Shows a list of all series available at that point in time'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'tooltipTimeFormat',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              label: t('Tooltip time format'),
+              default: tooltipTimeFormat,
+              clearable: false,
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        ['y_axis_format'],
+        [
+          {
+            name: 'logAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Logarithmic y-axis'),
+              renderTrigger: true,
+              default: logAxis,
+              description: t('Logarithmic y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'minorSplitLine',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Minor Split Line'),
+              renderTrigger: true,
+              default: minorSplitLine,
+              description: t('Draw split lines for minor y-axis ticks'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'yAxisTitle',
+            config: {
+              type: 'TextControl',
+              label: t('Primary y-axis title'),
+              renderTrigger: true,
+              default: '',
+              description: t('Title for y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'truncateYAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Truncate Y Axis'),
+              default: truncateYAxis,
+              renderTrigger: true,
+              description: t(
+                'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: t('Y Axis Bounds'),
+              renderTrigger: true,
+              default: yAxisBounds,
+              description: t(
+                'Bounds for the Y-axis. When left empty, the bounds are ' +
+                  'dynamically defined based on the min/max of the data. Note that ' +
+                  "this feature will only expand the axis range. It won't " +
+                  "narrow the data's extent.",
+              ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.truncateYAxis?.value),
+            },
+          },
+        ],
+      ],
+    },
+  ],
+  controlOverrides: {
+    row_limit: {
+      default: rowLimit,
+    },
+  },
+};
+
+export default config;
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
new file mode 100644
index 0000000000000..1aa41b87572ee
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -0,0 +1,460 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { legacyValidateInteger, legacyValidateNumber, t } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  ControlPanelsContainerProps,
+  D3_TIME_FORMAT_DOCS,
+  sections,
+  sharedControls,
+  emitFilterControl,
+} from '@superset-ui/chart-controls';
+
+import {
+  DEFAULT_FORM_DATA,
+  EchartsTimeseriesContributionType,
+  EchartsTimeseriesSeriesType,
+} from '../types';
+import { legendSection } from '../../controls';
+
+const {
+  area,
+  annotationLayers,
+  contributionMode,
+  forecastEnabled,
+  forecastInterval,
+  forecastPeriods,
+  forecastSeasonalityDaily,
+  forecastSeasonalityWeekly,
+  forecastSeasonalityYearly,
+  logAxis,
+  markerEnabled,
+  markerSize,
+  minorSplitLine,
+  opacity,
+  rowLimit,
+  stack,
+  tooltipTimeFormat,
+  truncateYAxis,
+  yAxisBounds,
+  zoomable,
+  xAxisLabelRotation,
+} = DEFAULT_FORM_DATA;
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyTimeseriesTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['metrics'],
+        ['groupby'],
+        [
+          {
+            name: 'contributionMode',
+            config: {
+              type: 'SelectControl',
+              label: t('Contribution Mode'),
+              default: contributionMode,
+              choices: [
+                [null, 'None'],
+                [EchartsTimeseriesContributionType.Row, 'Total'],
+                [EchartsTimeseriesContributionType.Column, 'Series'],
+              ],
+              description: t('Calculate contribution per series or total'),
+            },
+          },
+        ],
+        ['adhoc_filters'],
+        emitFilterControl,
+        ['limit'],
+        ['timeseries_limit_metric'],
+        [
+          {
+            name: 'order_desc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Descending'),
+              default: true,
+              description: t('Whether to sort descending or ascending'),
+            },
+          },
+        ],
+        ['row_limit'],
+      ],
+    },
+    sections.advancedAnalytics,
+    {
+      label: t('Annotations and Layers'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'annotation_layers',
+            config: {
+              type: 'AnnotationLayerControl',
+              label: '',
+              default: annotationLayers,
+              description: t('Annotation Layers'),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Predictive Analytics'),
+      expanded: false,
+      controlSetRows: [
+        [
+          {
+            name: 'forecastEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Enable forecast'),
+              renderTrigger: false,
+              default: forecastEnabled,
+              description: t('Enable forecasting'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastPeriods',
+            config: {
+              type: 'TextControl',
+              label: t('Forecast periods'),
+              validators: [legacyValidateInteger],
+              default: forecastPeriods,
+              description: t('How many periods into the future do we want to predict'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastInterval',
+            config: {
+              type: 'TextControl',
+              label: t('Confidence interval'),
+              validators: [legacyValidateNumber],
+              default: forecastInterval,
+              description: t('Width of the confidence interval. Should be between 0 and 1'),
+            },
+          },
+          {
+            name: 'forecastSeasonalityYearly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Yearly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityYearly,
+              description: t(
+                'Should yearly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'forecastSeasonalityWeekly',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Weekly seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityWeekly,
+              description: t(
+                'Should weekly seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+          {
+            name: 'forecastSeasonalityDaily',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: 'Daily seasonality',
+              choices: [
+                [null, 'default'],
+                [true, 'Yes'],
+                [false, 'No'],
+              ],
+              default: forecastSeasonalityDaily,
+              description: t(
+                'Should daily seasonality be applied. An integer value will specify Fourier order of seasonality.',
+              ),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['color_scheme', 'label_colors'],
+        [
+          {
+            name: 'seriesType',
+            config: {
+              type: 'SelectControl',
+              label: t('Step type'),
+              renderTrigger: true,
+              default: EchartsTimeseriesSeriesType.Start,
+              choices: [
+                [EchartsTimeseriesSeriesType.Start, 'Start'],
+                [EchartsTimeseriesSeriesType.Middle, 'Middle'],
+                [EchartsTimeseriesSeriesType.End, 'End'],
+              ],
+              description: t(
+                'Defines whether the step should appear at the beginning, middle or end between two data points',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'stack',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Stack series'),
+              renderTrigger: true,
+              default: stack,
+              description: t('Stack series on top of each other'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'area',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Area Chart'),
+              renderTrigger: true,
+              default: area,
+              description: t('Draw area under curves. Only applicable for line types.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'opacity',
+            config: {
+              type: 'SliderControl',
+              label: t('Area chart opacity'),
+              renderTrigger: true,
+              min: 0,
+              max: 1,
+              step: 0.1,
+              default: opacity,
+              description: t('Opacity of Area Chart. Also applies to confidence band.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.area?.value),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerEnabled',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Marker'),
+              renderTrigger: true,
+              default: markerEnabled,
+              description: t('Draw a marker on data points. Only applicable for line types.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'markerSize',
+            config: {
+              type: 'SliderControl',
+              label: t('Marker Size'),
+              renderTrigger: true,
+              min: 0,
+              max: 100,
+              default: markerSize,
+              description: t('Size of marker. Also applies to forecast observations.'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.markerEnabled?.value),
+            },
+          },
+        ],
+        [
+          {
+            name: 'zoomable',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Data Zoom'),
+              default: zoomable,
+              renderTrigger: true,
+              description: t('Enable data zooming controls'),
+            },
+          },
+        ],
+        ...legendSection,
+        [<h1 className="section-header">{t('X Axis')}</h1>],
+        [
+          {
+            name: 'x_axis_time_format',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              default: 'smart_date',
+              description: `${D3_TIME_FORMAT_DOCS}. ${t(
+                'When using other than adaptive formatting, labels may overlap.',
+              )}`,
+            },
+          },
+        ],
+        [
+          {
+            name: 'xAxisLabelRotation',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              clearable: false,
+              label: t('Rotate x axis label'),
+              choices: [
+                [0, '0°'],
+                [45, '45°'],
+              ],
+              default: xAxisLabelRotation,
+              renderTrigger: true,
+              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Tooltip')}</h1>],
+        [
+          {
+            name: 'rich_tooltip',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Rich tooltip'),
+              renderTrigger: true,
+              default: true,
+              description: t('Shows a list of all series available at that point in time'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'tooltipTimeFormat',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              label: t('Tooltip time format'),
+              default: tooltipTimeFormat,
+              clearable: false,
+            },
+          },
+        ],
+        // eslint-disable-next-line react/jsx-key
+        [<h1 className="section-header">{t('Y Axis')}</h1>],
+        ['y_axis_format'],
+        [
+          {
+            name: 'logAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Logarithmic y-axis'),
+              renderTrigger: true,
+              default: logAxis,
+              description: t('Logarithmic y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'minorSplitLine',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Minor Split Line'),
+              renderTrigger: true,
+              default: minorSplitLine,
+              description: t('Draw split lines for minor y-axis ticks'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'yAxisTitle',
+            config: {
+              type: 'TextControl',
+              label: t('Primary y-axis title'),
+              renderTrigger: true,
+              default: '',
+              description: t('Title for y-axis'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'truncateYAxis',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Truncate Y Axis'),
+              default: truncateYAxis,
+              renderTrigger: true,
+              description: t(
+                'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
+              ),
+            },
+          },
+        ],
+        [
+          {
+            name: 'y_axis_bounds',
+            config: {
+              type: 'BoundsControl',
+              label: t('Y Axis Bounds'),
+              renderTrigger: true,
+              default: yAxisBounds,
+              description: t(
+                'Bounds for the Y-axis. When left empty, the bounds are ' +
+                  'dynamically defined based on the min/max of the data. Note that ' +
+                  "this feature will only expand the axis range. It won't " +
+                  "narrow the data's extent.",
+              ),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.truncateYAxis?.value),
+            },
+          },
+        ],
+      ],
+    },
+  ],
+  controlOverrides: {
+    row_limit: {
+      default: rowLimit,
+    },
+  },
+};
+
+export default config;
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1.png
new file mode 100644
index 0000000000000..18256cfde482f
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step1.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2.png
new file mode 100644
index 0000000000000..2a2633a451f3e
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/Step2.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail.png
new file mode 100644
index 0000000000000..3bb060b9c26a2
Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/images/thumbnail.png differ
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
new file mode 100644
index 0000000000000..4e4f6fbec186a
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
@@ -0,0 +1,66 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin, AnnotationType, Behavior } from '@superset-ui/core';
+import buildQuery from '../buildQuery';
+import controlPanel from './controlPanel';
+import transformProps from '../transformProps';
+import thumbnail from './images/thumbnail.png';
+import { EchartsTimeseriesChartProps, EchartsTimeseriesFormData } from '../types';
+import example1 from './images/Step1.png';
+import example2 from './images/Step2.png';
+
+export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+  EchartsTimeseriesFormData,
+  EchartsTimeseriesChartProps
+> {
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../EchartsTimeseries'),
+      metadata: new ChartMetadata({
+        behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Evolution'),
+        credits: ['https://echarts.apache.org'],
+        description: t(
+          'Time-series Stepped-line graph (also called step chart) is a variation of line chart but with the line forming a series of steps between data points. A step chart can be useful when you want to show the changes that occur at irregular intervals.',
+        ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
+        supportedAnnotationTypes: [
+          AnnotationType.Event,
+          AnnotationType.Formula,
+          AnnotationType.Interval,
+          AnnotationType.Timeseries,
+        ],
+        name: t('Time-series Stepped Line'),
+        tags: [
+          t('ECharts'),
+          t('Predictive'),
+          t('Advanced-Analytics'),
+          t('Aesthetic'),
+          t('Time'),
+          t('Transformable'),
+          t('Stacked'),
+        ],
+        thumbnail,
+      }),
+      transformProps,
+    });
+  }
+}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/index.ts
index 50d1ec10d5bfa..4e5d38364a5f9 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/index.ts
@@ -61,12 +61,10 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
         tags: [
           t('Advanced-Analytics'),
           t('Aesthetic'),
-          t('ECharts'),
           t('Line'),
           t('Predictive'),
           t('Time'),
           t('Transformable'),
-          t('Highly-used'),
         ],
         thumbnail,
       }),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/index.ts
index b33f4c1b5d7a4..1f39843bebf18 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/index.ts
@@ -18,6 +18,12 @@
  */
 export { default as EchartsBoxPlotChartPlugin } from './BoxPlot';
 export { default as EchartsTimeseriesChartPlugin } from './Timeseries';
+export { default as EchartsAreaChartPlugin } from './Timeseries/Area';
+export { default as EchartsTimeseriesBarChartPlugin } from './Timeseries/Regular/Bar';
+export { default as EchartsTimeseriesLineChartPlugin } from './Timeseries/Regular/Line';
+export { default as EchartsTimeseriesScatterChartPlugin } from './Timeseries/Regular/Scatter';
+export { default as EchartsTimeseriesSmoothLineChartPlugin } from './Timeseries/Regular/SmoothLine';
+export { default as EchartsTimeseriesStepChartPlugin } from './Timeseries/Step';
 export { default as EchartsMixedTimeseriesChartPlugin } from './MixedTimeseries';
 export { default as EchartsPieChartPlugin } from './Pie';
 export { default as EchartsGraphChartPlugin } from './Graph';