diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts
index 2bc353b7e3c3b..544bb8cb54909 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { QueryObject, SqlaFormData } from '@superset-ui/core';
+import { QueryObject, SqlaFormData, VizType } from '@superset-ui/core';
 import { boxplotOperator } from '@superset-ui/chart-controls';
 
 const formData: SqlaFormData = {
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   time_grain_sqla: 'P1Y',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts
index 2f571836fcdce..5ae935367527c 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { QueryObject, SqlaFormData } from '@superset-ui/core';
+import { QueryObject, SqlaFormData, VizType } from '@superset-ui/core';
 import { contributionOperator } from '@superset-ui/chart-controls';
 
 const formData: SqlaFormData = {
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts
index 94a9b0068705a..1f1a731914ce5 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/histogramOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/histogramOperator.test.ts
index b05f12aa9adba..b4c6eacc94190 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/histogramOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/histogramOperator.test.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { histogramOperator } from '@superset-ui/chart-controls';
-import { SqlaFormData } from '@superset-ui/core';
+import { SqlaFormData, VizType } from '@superset-ui/core';
 import { omit } from 'lodash';
 
 const formData: SqlaFormData = {
@@ -26,7 +26,7 @@ const formData: SqlaFormData = {
   cumulative: true,
   normalize: true,
   groupby: ['country', 'region'],
-  viz_type: 'histogram',
+  viz_type: VizType.LegacyHistogram,
   datasource: 'foo',
 };
 
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts
index 6101fc19e54c6..cfac407baec70 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   show_empty_columns: true,
 };
 const queryObject: QueryObject = {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts
index 9613584f8e7b6..cca25fc5ecf1d 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   time_grain_sqla: 'P1Y',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/rankOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rankOperator.test.ts
index 91d67b59a281d..986ac1012b52b 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/rankOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rankOperator.test.ts
@@ -26,7 +26,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   truncate_metric: true,
 };
 const queryObject: QueryObject = {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts
index af9ebfebb3f00..2369df348d2f8 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts
@@ -26,7 +26,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   truncate_metric: true,
 };
 const queryObject: QueryObject = {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts
index 271e63b01277d..20e7d45795eae 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts
index 374f5c620208c..08b368de37ae1 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts
index bf9b6e28645e2..dd7e5aa693677 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts
index e775780b3ee75..d4a4524db113c 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts
@@ -27,7 +27,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const queryObject: QueryObject = {
   metrics: [
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts
index c41bcdd208ea5..8c3f5a6786117 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts
@@ -30,7 +30,7 @@ const formData: SqlaFormData = {
   time_range: '2015 : 2016',
   granularity: 'month',
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   show_empty_columns: true,
 };
 const queryObject: QueryObject = {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/extractExtraMetrics.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/extractExtraMetrics.test.ts
index 75d7bd2248834..e499b79c0532e 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/extractExtraMetrics.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/extractExtraMetrics.test.ts
@@ -21,7 +21,7 @@ import { extractExtraMetrics } from '@superset-ui/chart-controls';
 
 const baseFormData: QueryFormData = {
   datasource: 'dummy',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   metrics: ['a', 'b'],
   columns: ['foo', 'bar'],
   limit: 100,
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts
index 29c8c658672ec..41b1a1c602481 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts
@@ -21,7 +21,7 @@ import { SqlaFormData, ComparisonType } from '@superset-ui/core';
 
 const formData: SqlaFormData = {
   datasource: 'foo',
-  viz_type: 'table',
+  viz_type: VizType.Table,
 };
 const series = {
   id: 'metric__1 month ago',
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/displayTimeRelatedControls.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/displayTimeRelatedControls.test.ts
index f96049293fbfc..2a5a0a3e5b230 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/displayTimeRelatedControls.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/displayTimeRelatedControls.test.ts
@@ -35,7 +35,7 @@ const mockData = {
   exportState: {},
   form_data: {
     datasource: '22__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
   },
 };
 
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getStandardizedControls.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getStandardizedControls.test.ts
index 8aaed01d7dd6c..52a92ca782585 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getStandardizedControls.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getStandardizedControls.test.ts
@@ -21,7 +21,7 @@ import { getStandardizedControls } from '../../src';
 
 const formData: QueryFormData = {
   datasource: '30__table',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   standardizedFormData: {
     controls: {
       metrics: ['count(*)', 'sum(sales)'],
@@ -34,7 +34,7 @@ const formData: QueryFormData = {
 test('without standardizedFormData', () => {
   getStandardizedControls().setStandardizedControls({
     datasource: '30__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
   });
   expect(getStandardizedControls().controls).toEqual({
     metrics: [],
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/index.ts b/superset-frontend/packages/superset-ui-core/src/chart/index.ts
index f0245febc0a19..09b2edc5e0134 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/index.ts
@@ -41,6 +41,7 @@ export { default as ChartDataProvider } from './components/ChartDataProvider';
 export * from './types/Base';
 export * from './types/TransformFunction';
 export * from './types/QueryResponse';
+export * from './types/VizType';
 
 export { default as __hack_reexport_chart_Base } from './types/Base';
 export { default as __hack_reexport_chart_TransformFunction } from './types/TransformFunction';
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts
new file mode 100644
index 0000000000000..58e17e787e9df
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-core/src/chart/types/VizType.ts
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+export enum VizType {
+  Area = 'echarts_area',
+  Bar = 'echarts_timeseries_bar',
+  BigNumber = 'big_number',
+  BigNumberTotal = 'big_number_total',
+  BigNumberPeriodOverPeriod = 'pop_kpi',
+  BoxPlot = 'box_plot',
+  Bubble = 'bubble_v2',
+  Bullet = 'bullet',
+  Calendar = 'cal_heatmap',
+  Chord = 'chord',
+  Compare = 'compare',
+  CountryMap = 'country_map',
+  DistBar = 'dist_bar',
+  EventFlow = 'event_flow',
+  Funnel = 'funnel',
+  Gauge = 'gauge_chart',
+  Graph = 'graph_chart',
+  Handlebars = 'handlebars',
+  Heatmap = 'heatmap_v2',
+  Histogram = 'histogram_v2',
+  Horizon = 'horizon',
+  LegacyArea = 'area',
+  LegacyBar = 'bar',
+  LegacyBubble = 'bubble',
+  LegacyHeatmap = 'heatmap',
+  LegacyHistogram = 'histogram',
+  LegacyLine = 'line',
+  LegacySankey = 'sankey',
+  Line = 'echarts_timeseries_line',
+  MapBox = 'mapbox',
+  MixedTimeseries = 'mixed_timeseries',
+  PairedTTest = 'paired_ttest',
+  ParallelCoordinates = 'para',
+  Partition = 'partition',
+  Pie = 'pie',
+  PivotTable = 'pivot_table_v2',
+  Radar = 'radar',
+  Rose = 'rose',
+  Sankey = 'sankey_v2',
+  Scatter = 'echarts_timeseries_scatter',
+  SmoothLine = 'echarts_timeseries_smooth',
+  Step = 'echarts_timeseries_step',
+  Sunburst = 'sunburst_v2',
+  Table = 'table',
+  TimePivot = 'time_pivot',
+  TimeTable = 'time_table',
+  Timeseries = 'echarts_timeseries',
+  Tree = 'tree_chart',
+  Treemap = 'treemap_v2',
+  Waterfall = 'waterfall',
+  WordCloud = 'word_cloud',
+  WorldMap = 'world_map',
+}
diff --git a/superset-frontend/packages/superset-ui-core/test/chart/clients/ChartClient.test.ts b/superset-frontend/packages/superset-ui-core/test/chart/clients/ChartClient.test.ts
index c82755374d3e7..50238d3d7dc47 100644
--- a/superset-frontend/packages/superset-ui-core/test/chart/clients/ChartClient.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/chart/clients/ChartClient.test.ts
@@ -28,6 +28,7 @@ import {
   getChartBuildQueryRegistry,
   getChartMetadataRegistry,
   ChartMetadata,
+  VizType,
 } from '@superset-ui/core';
 
 import { LOGIN_GLOB } from '../fixtures/constants';
@@ -86,13 +87,13 @@ describe('ChartClient', () => {
           sliceId,
           formData: {
             granularity: 'second',
-            viz_type: 'bar',
+            viz_type: VizType.LegacyBar,
           },
         }),
       ).resolves.toEqual({
         ...sankeyFormData,
         granularity: 'second',
-        viz_type: 'bar',
+        viz_type: VizType.LegacyBar,
       });
     });
     it('returns promise of formData if only formData was given', () =>
@@ -101,13 +102,13 @@ describe('ChartClient', () => {
           formData: {
             datasource: '1__table',
             granularity: 'minute',
-            viz_type: 'line',
+            viz_type: VizType.LegacyLine,
           },
         }),
       ).resolves.toEqual({
         datasource: '1__table',
         granularity: 'minute',
-        viz_type: 'line',
+        viz_type: VizType.LegacyLine,
       }));
     it('rejects if none of sliceId or formData is specified', () =>
       expect(
@@ -120,12 +121,12 @@ describe('ChartClient', () => {
   describe('.loadQueryData(formData, options)', () => {
     it('returns a promise of query data for known chart type', () => {
       getChartMetadataRegistry().registerValue(
-        'word_cloud',
+        VizType.WordCloud,
         new ChartMetadata({ name: 'Word Cloud', thumbnail: '' }),
       );
 
       getChartBuildQueryRegistry().registerValue(
-        'word_cloud',
+        VizType.WordCloud,
         (formData: QueryFormData) => buildQueryContext(formData),
       );
       fetchMock.post('glob:*/api/v1/chart/data', [
@@ -138,7 +139,7 @@ describe('ChartClient', () => {
       return expect(
         chartClient.loadQueryData({
           granularity: 'minute',
-          viz_type: 'word_cloud',
+          viz_type: VizType.WordCloud,
           datasource: '1__table',
         }),
       ).resolves.toEqual([
@@ -255,7 +256,7 @@ describe('ChartClient', () => {
     it('loadAllDataNecessaryForAChart', () => {
       fetchMock.get(`glob:*/api/v1/form_data/?slice_id=${sliceId}`, {
         granularity: 'minute',
-        viz_type: 'line',
+        viz_type: VizType.LegacyLine,
         datasource: '1__table',
         color: 'living-coral',
       });
@@ -275,12 +276,12 @@ describe('ChartClient', () => {
       });
 
       getChartMetadataRegistry().registerValue(
-        'line',
+        VizType.LegacyLine,
         new ChartMetadata({ name: 'Line', thumbnail: '.gif' }),
       );
 
       getChartBuildQueryRegistry().registerValue(
-        'line',
+        VizType.LegacyLine,
         (formData: QueryFormData) => buildQueryContext(formData),
       );
 
@@ -296,7 +297,7 @@ describe('ChartClient', () => {
         },
         formData: {
           granularity: 'minute',
-          viz_type: 'line',
+          viz_type: VizType.LegacyLine,
           datasource: '1__table',
           color: 'living-coral',
         },
diff --git a/superset-frontend/packages/superset-ui-core/test/chart/fixtures/formData.ts b/superset-frontend/packages/superset-ui-core/test/chart/fixtures/formData.ts
index 88a78c6017c4e..85bfd238ec6e8 100644
--- a/superset-frontend/packages/superset-ui-core/test/chart/fixtures/formData.ts
+++ b/superset-frontend/packages/superset-ui-core/test/chart/fixtures/formData.ts
@@ -19,11 +19,11 @@
 
 /* eslint sort-keys: 'off' */
 /** The form data defined here is based on default visualizations packaged with Apache Superset */
-import { TimeGranularity } from '@superset-ui/core';
+import { TimeGranularity, VizType } from '@superset-ui/core';
 
 export const bigNumberFormData = {
   datasource: '3__table',
-  viz_type: 'big_number',
+  viz_type: VizType.BigNumber,
   slice_id: 54,
   granularity_sqla: 'ds',
   time_grain_sqla: TimeGranularity.DAY,
@@ -39,7 +39,7 @@ export const bigNumberFormData = {
 
 export const wordCloudFormData = {
   datasource: '3__table',
-  viz_type: 'word_cloud',
+  viz_type: VizType.WordCloud,
   slice_id: 60,
   url_params: {},
   granularity_sqla: 'ds',
@@ -56,7 +56,7 @@ export const wordCloudFormData = {
 
 export const sunburstFormData = {
   datasource: '2__table',
-  viz_type: 'sunburst_v2',
+  viz_type: VizType.Sunburst,
   slice_id: 47,
   url_params: {},
   granularity_sqla: 'year',
@@ -71,7 +71,7 @@ export const sunburstFormData = {
 
 export const sankeyFormData = {
   datasource: '1__table',
-  viz_type: 'sankey',
+  viz_type: VizType.LegacySankey,
   slice_id: 1,
   url_params: {},
   granularity_sqla: null,
diff --git a/superset-frontend/packages/superset-ui-core/test/chart/models/ChartPlugin.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart/models/ChartPlugin.test.tsx
index 9a38b0f24acdf..838ba615e20e3 100644
--- a/superset-frontend/packages/superset-ui-core/test/chart/models/ChartPlugin.test.tsx
+++ b/superset-frontend/packages/superset-ui-core/test/chart/models/ChartPlugin.test.tsx
@@ -59,7 +59,7 @@ describe('ChartPlugin', () => {
     const FORM_DATA = {
       datasource: '1__table',
       granularity: 'day',
-      viz_type: 'table',
+      viz_type: VizType.Table,
     };
 
     it('creates a new plugin', () => {
diff --git a/superset-frontend/packages/superset-ui-core/test/query/api/legacy/getFormData.test.ts b/superset-frontend/packages/superset-ui-core/test/query/api/legacy/getFormData.test.ts
index 8bb3fb2979b0a..5d46f1a35ccf4 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/api/legacy/getFormData.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/api/legacy/getFormData.test.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
+import { VizType } from '@superset-ui/core';
 import { getFormData } from '../../../../src/query/api/legacy';
 
 import setupClientForTest from '../setupClientForTest';
@@ -28,7 +29,7 @@ describe('getFormData()', () => {
 
   const mockData = {
     datasource: '1__table',
-    viz_type: 'sankey',
+    viz_type: VizType.LegacySankey,
     slice_id: 1,
     url_params: {},
     granularity_sqla: null,
diff --git a/superset-frontend/packages/superset-ui-core/test/query/api/v1/getChartData.test.ts b/superset-frontend/packages/superset-ui-core/test/query/api/v1/getChartData.test.ts
index 1f6b3ce429951..f88c44a2312f7 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/api/v1/getChartData.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/api/v1/getChartData.test.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
-import { buildQueryContext, ApiV1 } from '@superset-ui/core';
+import { buildQueryContext, ApiV1, VizType } from '@superset-ui/core';
 import setupClientForTest from '../setupClientForTest';
 
 describe('API v1 > getChartData()', () => {
@@ -39,7 +39,7 @@ describe('API v1 > getChartData()', () => {
     const result = await ApiV1.getChartData(
       buildQueryContext({
         granularity: 'minute',
-        viz_type: 'word_cloud',
+        viz_type: VizType.WordCloud,
         datasource: '1__table',
       }),
     );
diff --git a/superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts b/superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts
index 4918da15866c0..8f20b03e74a62 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { buildQueryContext } from '@superset-ui/core';
+import { buildQueryContext, VizType } from '@superset-ui/core';
 import * as queryModule from '../../src/query/normalizeTimeColumn';
 
 describe('buildQueryContext', () => {
@@ -24,7 +24,7 @@ describe('buildQueryContext', () => {
     const queryContext = buildQueryContext({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
     });
     expect(queryContext.datasource.id).toBe(5);
     expect(queryContext.datasource.type).toBe('table');
@@ -37,7 +37,7 @@ describe('buildQueryContext', () => {
       {
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         source: 'source_column',
         source_category: 'source_category_column',
         target: 'target_column',
@@ -75,7 +75,7 @@ describe('buildQueryContext', () => {
       {
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         source: 'source_column',
         source_category: 'source_category_column',
         target: 'target_column',
@@ -103,7 +103,7 @@ describe('buildQueryContext', () => {
     const queryContext = buildQueryContext(
       {
         datasource: '5__table',
-        viz_type: 'table',
+        viz_type: VizType.Table,
       },
       () => [
         {
@@ -133,7 +133,7 @@ describe('buildQueryContext', () => {
     buildQueryContext(
       {
         datasource: '5__table',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         x_axis: 'axis',
       },
       () => [{}],
diff --git a/superset-frontend/packages/superset-ui-core/test/query/buildQueryObject.test.ts b/superset-frontend/packages/superset-ui-core/test/query/buildQueryObject.test.ts
index 187fb22a7496a..fa4858efcb84e 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/buildQueryObject.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/buildQueryObject.test.ts
@@ -25,6 +25,7 @@ import {
   AnnotationType,
   buildQueryObject,
   QueryObject,
+  VizType,
 } from '@superset-ui/core';
 
 describe('buildQueryObject', () => {
@@ -34,7 +35,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
     });
     expect(query.granularity).toEqual('ds');
   });
@@ -43,7 +44,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       metric: 'sum__num',
       secondary_metric: 'avg__num',
     });
@@ -54,7 +55,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       extra_filters: [{ col: 'abc', op: '==', val: 'qwerty' }],
       adhoc_filters: [
         {
@@ -88,7 +89,7 @@ describe('buildQueryObject', () => {
       {
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         my_custom_metric_control: 'sum__num',
       },
       { my_custom_metric_control: 'metrics' },
@@ -101,7 +102,7 @@ describe('buildQueryObject', () => {
       {
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         metrics: ['sum__num'],
         my_custom_metric_control: 'avg__num',
       },
@@ -115,7 +116,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       limit: series_limit,
     });
     expect(query.series_limit).toEqual(series_limit);
@@ -126,7 +127,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       series_limit,
     });
     expect(query.series_limit).toEqual(series_limit);
@@ -137,7 +138,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       order_desc: orderDesc,
     });
     expect(query.order_desc).toEqual(orderDesc);
@@ -148,7 +149,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       timeseries_limit_metric: metric,
     });
     expect(query.series_limit_metric).toEqual(metric);
@@ -159,7 +160,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'pivot_table_v2',
+      viz_type: VizType.PivotTable,
       series_limit_metric: metric,
     });
     expect(query.series_limit_metric).toEqual(metric);
@@ -170,7 +171,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'pivot_table_v2',
+      viz_type: VizType.PivotTable,
       series_limit_metric: metric,
     });
     expect(query.series_limit_metric).toEqual(undefined);
@@ -180,7 +181,7 @@ describe('buildQueryObject', () => {
     const baseQuery = {
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       row_limit: null,
     };
 
@@ -267,7 +268,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       annotation_layers: annotationLayers,
     });
     expect(query.annotation_layers).toEqual(annotationLayers);
@@ -278,7 +279,7 @@ describe('buildQueryObject', () => {
       buildQueryObject({
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         url_params: { abc: '123' },
       }).url_params,
     ).toEqual({ abc: '123' });
@@ -286,7 +287,7 @@ describe('buildQueryObject', () => {
       buildQueryObject({
         datasource: '5__table',
         granularity_sqla: 'ds',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         // @ts-expect-error
         url_params: null,
       }).url_params,
@@ -298,7 +299,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity,
-      viz_type: 'table',
+      viz_type: VizType.Table,
     });
     expect(query.granularity).toEqual(granularity);
   });
@@ -308,7 +309,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: granularity,
-      viz_type: 'table',
+      viz_type: VizType.Table,
     });
     expect(query.granularity).toEqual(granularity);
   });
@@ -320,7 +321,7 @@ describe('buildQueryObject', () => {
     query = buildQueryObject({
       datasource: '5__table',
       granularity_sqla: 'ds',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       custom_params: customParams,
     });
     expect(query.custom_params).toEqual(customParams);
diff --git a/superset-frontend/packages/superset-ui-core/test/query/getAxis.test.ts b/superset-frontend/packages/superset-ui-core/test/query/getAxis.test.ts
index 010bd9fc67591..9f2d2846142dd 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/getAxis.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/getAxis.test.ts
@@ -16,11 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { isXAxisSet } from '@superset-ui/core';
+import { isXAxisSet, VizType } from '@superset-ui/core';
 
 test('isXAxisSet', () => {
-  expect(isXAxisSet({ datasource: '123', viz_type: 'table' })).not.toBeTruthy();
   expect(
-    isXAxisSet({ datasource: '123', viz_type: 'table', x_axis: 'axis' }),
+    isXAxisSet({ datasource: '123', viz_type: VizType.Table }),
+  ).not.toBeTruthy();
+  expect(
+    isXAxisSet({ datasource: '123', viz_type: VizType.Table, x_axis: 'axis' }),
   ).toBeTruthy();
 });
diff --git a/superset-frontend/packages/superset-ui-core/test/query/normalizeOrderBy.test.ts b/superset-frontend/packages/superset-ui-core/test/query/normalizeOrderBy.test.ts
index 564d4aa815bbd..57f234ebc85c8 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/normalizeOrderBy.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/normalizeOrderBy.test.ts
@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { normalizeOrderBy, QueryObject } from '@superset-ui/core';
+import { normalizeOrderBy, QueryObject, VizType } from '@superset-ui/core';
 
 describe('normalizeOrderBy', () => {
   it('should not change original queryObject when orderby populated', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       orderby: [['count(*)', true]],
     };
@@ -32,7 +32,7 @@ describe('normalizeOrderBy', () => {
   it('has series_limit_metric in queryObject', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       series_limit_metric: {
@@ -50,7 +50,7 @@ describe('normalizeOrderBy', () => {
     expect(expectedQueryObject).not.toHaveProperty('order_desc');
     expect(expectedQueryObject).toEqual({
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       orderby: [
@@ -72,7 +72,7 @@ describe('normalizeOrderBy', () => {
   it('should transform legacy_order_by in queryObject', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       legacy_order_by: {
@@ -90,7 +90,7 @@ describe('normalizeOrderBy', () => {
     expect(expectedQueryObject).not.toHaveProperty('order_desc');
     expect(expectedQueryObject).toEqual({
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       orderby: [
@@ -112,7 +112,7 @@ describe('normalizeOrderBy', () => {
   it('has metrics in queryObject', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       order_desc: true,
@@ -122,7 +122,7 @@ describe('normalizeOrderBy', () => {
     expect(expectedQueryObject).not.toHaveProperty('order_desc');
     expect(expectedQueryObject).toEqual({
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       metrics: ['count(*)'],
       orderby: [['count(*)', false]],
@@ -132,7 +132,7 @@ describe('normalizeOrderBy', () => {
   it('should not change', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
     };
     expect(normalizeOrderBy(query)).toEqual(query);
@@ -141,7 +141,7 @@ describe('normalizeOrderBy', () => {
   it('remove empty orderby', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       orderby: [],
     };
@@ -151,7 +151,7 @@ describe('normalizeOrderBy', () => {
   it('remove orderby with an empty array', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       orderby: [[]],
     };
@@ -161,7 +161,7 @@ describe('normalizeOrderBy', () => {
   it('remove orderby with an empty metric', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       orderby: [['', true]],
     };
@@ -171,7 +171,7 @@ describe('normalizeOrderBy', () => {
   it('remove orderby with an empty adhoc metric', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       orderby: [[{}, true]],
     };
@@ -181,7 +181,7 @@ describe('normalizeOrderBy', () => {
   it('remove orderby with an non-boolean type', () => {
     const query: QueryObject = {
       datasource: '5__table',
-      viz_type: 'table',
+      viz_type: VizType.Table,
       time_range: '1 year ago : 2013',
       // @ts-ignore
       orderby: [['count(*)', 'true']],
diff --git a/superset-frontend/packages/superset-ui-core/test/query/normalizeTimeColumn.test.ts b/superset-frontend/packages/superset-ui-core/test/query/normalizeTimeColumn.test.ts
index 59419bda650d6..e00fa683c0284 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/normalizeTimeColumn.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/normalizeTimeColumn.test.ts
@@ -20,12 +20,13 @@ import {
   normalizeTimeColumn,
   QueryObject,
   SqlaFormData,
+  VizType,
 } from '@superset-ui/core';
 
 test('should return original QueryObject if x_axis is empty', () => {
   const formData: SqlaFormData = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     time_grain_sqla: 'P1Y',
     time_range: '1 year ago : 2013',
@@ -34,7 +35,7 @@ test('should return original QueryObject if x_axis is empty', () => {
   };
   const query: QueryObject = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: {
       time_grain_sqla: 'P1Y',
@@ -51,7 +52,7 @@ test('should return original QueryObject if x_axis is empty', () => {
 test('should support different columns for x-axis and granularity', () => {
   const formData: SqlaFormData = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     time_grain_sqla: 'P1Y',
     time_range: '1 year ago : 2013',
@@ -61,7 +62,7 @@ test('should support different columns for x-axis and granularity', () => {
   };
   const query: QueryObject = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: {
       time_grain_sqla: 'P1Y',
@@ -76,7 +77,7 @@ test('should support different columns for x-axis and granularity', () => {
   };
   expect(normalizeTimeColumn(formData, query)).toEqual({
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: { where: '', having: '', time_grain_sqla: 'P1Y' },
     time_range: '1 year ago : 2013',
@@ -98,7 +99,7 @@ test('should support different columns for x-axis and granularity', () => {
 test('should support custom SQL in x-axis', () => {
   const formData: SqlaFormData = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     time_grain_sqla: 'P1Y',
     time_range: '1 year ago : 2013',
@@ -112,7 +113,7 @@ test('should support custom SQL in x-axis', () => {
   };
   const query: QueryObject = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: {
       time_grain_sqla: 'P1Y',
@@ -134,7 +135,7 @@ test('should support custom SQL in x-axis', () => {
   };
   expect(normalizeTimeColumn(formData, query)).toEqual({
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: { where: '', having: '', time_grain_sqla: 'P1Y' },
     time_range: '1 year ago : 2013',
@@ -156,7 +157,7 @@ test('should support custom SQL in x-axis', () => {
 test('fallback and invalid columns value', () => {
   const formData: SqlaFormData = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     time_grain_sqla: 'P1Y',
     time_range: '1 year ago : 2013',
@@ -170,7 +171,7 @@ test('fallback and invalid columns value', () => {
   };
   const query: QueryObject = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity: 'time_column',
     extras: {
       time_grain_sqla: 'P1Y',
diff --git a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonFilters.test.ts b/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonFilters.test.ts
index 449fe5c492869..7bdbc16c4ee61 100644
--- a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonFilters.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonFilters.test.ts
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { getComparisonFilters } from '@superset-ui/core';
+import { getComparisonFilters, VizType } from '@superset-ui/core';
 
 const form_data = {
   datasource: '22__table',
-  viz_type: 'pop_kpi',
+  viz_type: VizType.BigNumberPeriodOverPeriod,
   slice_id: 97,
   url_params: {
     form_data_key:
diff --git a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts b/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts
index 1af9cc9e4e379..9540badf3342f 100644
--- a/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/time-comparison/getComparisonInfo.test.ts
@@ -17,11 +17,15 @@
  * under the License.
  */
 
-import { getComparisonInfo, ComparisonTimeRangeType } from '@superset-ui/core';
+import {
+  getComparisonInfo,
+  ComparisonTimeRangeType,
+  VizType,
+} from '@superset-ui/core';
 
 const form_data = {
   datasource: '22__table',
-  viz_type: 'pop_kpi',
+  viz_type: VizType.BigNumberPeriodOverPeriod,
   slice_id: 97,
   url_params: {
     form_data_key:
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/LegacyPluginChartChord.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/LegacyPluginChartChord.stories.tsx
index d1acdedd672f7..0f9a639f63b70 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/LegacyPluginChartChord.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord/LegacyPluginChartChord.stories.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
 import data from './data';
 import { withResizableChartDemo } from '../../../shared/components/ResizableChartDemo';
 
-new ChordChartPlugin().configure({ key: 'chord' }).register();
+new ChordChartPlugin().configure({ key: VizType.Chord }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-chord',
@@ -31,7 +31,7 @@ export default {
 
 export const basic = ({ width, height }) => (
   <SuperChart
-    chartType="chord"
+    chartType={VizType.Chord}
     width={width}
     height={height}
     queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-heatmap/Heatmap.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-heatmap/Heatmap.stories.tsx
index ad47acc04ce6d..c45ea21a503ea 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-heatmap/Heatmap.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-heatmap/Heatmap.stories.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
 import ResizableChartDemo from '../../../shared/components/ResizableChartDemo';
 import data from './data';
 
-new HeatmapChartPlugin().configure({ key: 'heatmap' }).register();
+new HeatmapChartPlugin().configure({ key: VizType.LegacyHeatmap }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-heatmap',
@@ -30,7 +30,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="heatmap"
+    chartType={VizType.LegacyHeatmap}
     width={500}
     height={500}
     formData={{
@@ -67,7 +67,7 @@ export const resizable = () => (
   <ResizableChartDemo>
     {({ width, height }) => (
       <SuperChart
-        chartType="heatmap"
+        chartType={VizType.LegacyHeatmap}
         width={width}
         height={height}
         formData={{
@@ -104,7 +104,7 @@ export const resizable = () => (
 
 export const withNullData = () => (
   <SuperChart
-    chartType="heatmap"
+    chartType={VizType.LegacyHeatmap}
     width={500}
     height={500}
     formData={{
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram/Histogram.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram/Histogram.stories.tsx
index 8e57adc7b0787..c6f3badcd7ba6 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram/Histogram.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram/Histogram.stories.tsx
@@ -18,11 +18,13 @@
  */
 
 /* eslint-disable no-magic-numbers */
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import HistogramChartPlugin from '@superset-ui/legacy-plugin-chart-histogram';
 import data from './data';
 
-new HistogramChartPlugin().configure({ key: 'histogram' }).register();
+new HistogramChartPlugin()
+  .configure({ key: VizType.LegacyHistogram })
+  .register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-histogram',
@@ -30,7 +32,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="histogram"
+    chartType={VizType.LegacyHistogram}
     width={400}
     height={400}
     queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-horizon/Horizon.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-horizon/Horizon.stories.tsx
index d4a6736db13bb..ed779caaff89c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-horizon/Horizon.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-horizon/Horizon.stories.tsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon';
 import data from './data';
 
-new HorizonChartPlugin().configure({ key: 'horizon' }).register();
+new HorizonChartPlugin().configure({ key: VizType.Horizon }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-horizon',
@@ -29,7 +29,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="horizon"
+    chartType={VizType.Horizon}
     width={400}
     height={400}
     queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-partition/Partition.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-partition/Partition.stories.tsx
index 3963d0b95fc27..1b22d2ac7126c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-partition/Partition.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-partition/Partition.stories.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import PartitionChartPlugin from '@superset-ui/legacy-plugin-chart-partition';
 import data from './data';
 import dummyDatasource from '../../../shared/dummyDatasource';
 
-new PartitionChartPlugin().configure({ key: 'partition' }).register();
+new PartitionChartPlugin().configure({ key: VizType.Partition }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-partition',
@@ -30,7 +30,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="partition"
+    chartType={VizType.Partition}
     width={400}
     height={400}
     datasource={dummyDatasource}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose/Rose.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose/Rose.stories.tsx
index c683d433b40b6..8137e79dbbef1 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose/Rose.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose/Rose.stories.tsx
@@ -18,11 +18,11 @@
  */
 
 /* eslint-disable no-magic-numbers, sort-keys */
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';
 import data from './data';
 
-new RoseChartPlugin().configure({ key: 'rose' }).register();
+new RoseChartPlugin().configure({ key: VizType.Rose }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-rose',
@@ -30,7 +30,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="rose"
+    chartType={VizType.Rose}
     width={400}
     height={400}
     queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey/Sankey.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey/Sankey.stories.tsx
index 0b1881c4cf01a..dcc9f5c448f51 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey/Sankey.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey/Sankey.stories.tsx
@@ -18,12 +18,12 @@
  */
 
 /* eslint-disable no-magic-numbers */
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey';
 import ResizableChartDemo from '../../../shared/components/ResizableChartDemo';
 import data from './data';
 
-new SankeyChartPlugin().configure({ key: 'sankey' }).register();
+new SankeyChartPlugin().configure({ key: VizType.LegacySankey }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-plugin-chart-sankey',
@@ -31,7 +31,7 @@ export default {
 
 export const basic = () => (
   <SuperChart
-    chartType="sankey"
+    chartType={VizType.LegacySankey}
     width={400}
     height={400}
     queriesData={[{ data }]}
@@ -45,7 +45,7 @@ export const resizable = () => (
   <ResizableChartDemo>
     {({ width, height }) => (
       <SuperChart
-        chartType="sankey"
+        chartType={VizType.LegacySankey}
         width={width}
         height={height}
         queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx
index 1bf730f3168f0..285f7cea08e0d 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumber.stories.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import { BigNumberChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import testData from './data';
 
@@ -37,7 +37,7 @@ const formData = {
   showTrendLine: true,
   startYAxisAtZero: true,
   timeGrainSqla: 'P1Y',
-  vizType: 'big_number',
+  vizType: VizType.BigNumber,
   yAxisFormat: '.3s',
 };
 
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumberTotal/BigNumberTotal.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumberTotal/BigNumberTotal.stories.tsx
index 448c2cab33634..ec6132d7fd51e 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumberTotal/BigNumberTotal.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumberTotal/BigNumberTotal.stories.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import { BigNumberTotalChartPlugin } from '@superset-ui/plugin-chart-echarts';
 import data from './data';
 
@@ -37,7 +37,7 @@ export const totalBasic = () => (
     formData={{
       metric: 'sum__num',
       subheader: 'total female participants',
-      vizType: 'big_number_total',
+      vizType: VizType.BigNumberTotal,
       yAxisFormat: '.3s',
     }}
   />
@@ -52,7 +52,7 @@ export const totalNoData = () => (
     formData={{
       metric: 'sum__num',
       subheader: 'total female participants',
-      vizType: 'big_number_total',
+      vizType: VizType.BigNumberTotal,
       yAxisFormat: '.3s',
     }}
   />
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/NVD3Area.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/NVD3Area.stories.tsx
index 86d2306125ffe..b1f4a9ebeb660 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/NVD3Area.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/NVD3Area.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { AreaChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new AreaChartPlugin().configure({ key: 'area' }).register();
+new AreaChartPlugin().configure({ key: VizType.LegacyArea }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Area',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/controlsShown.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/controlsShown.tsx
index ccbb68a0280a0..659b1636a6d2c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/controlsShown.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/controlsShown.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const controlsShown = () => (
   <SuperChart
-    chartType="area"
+    chartType={VizType.LegacyArea}
     datasource={dummyDatasource}
     width={400}
     height={400}
@@ -40,7 +40,7 @@ export const controlsShown = () => (
       showControls: true,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'area',
+      vizType: VizType.LegacyArea,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/expanded.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/expanded.tsx
index af6994216c995..980d4360eb200 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/expanded.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/expanded.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const expanded = () => (
   <SuperChart
-    chartType="area"
+    chartType={VizType.LegacyArea}
     datasource={dummyDatasource}
     width={400}
     height={400}
@@ -40,7 +40,7 @@ export const expanded = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'expand',
-      vizType: 'area',
+      vizType: VizType.LegacyArea,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stacked.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stacked.tsx
index c10e83e90f962..a161ed68fab0c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stacked.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stacked.tsx
@@ -17,14 +17,14 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const stacked = () => (
   <SuperChart
     id="stacked-area-chart"
-    chartType="area"
+    chartType={VizType.LegacyArea}
     datasource={dummyDatasource}
     width={400}
     height={400}
@@ -41,7 +41,7 @@ export const stacked = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'area',
+      vizType: VizType.LegacyArea,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stackedWithBounds.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stackedWithBounds.tsx
index ca3f896dbd7aa..a7104b60aa6b4 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stackedWithBounds.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories/stackedWithBounds.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const stackedWithYAxisBounds = () => (
   <SuperChart
-    chartType="area"
+    chartType={VizType.LegacyArea}
     datasource={dummyDatasource}
     width={400}
     height={400}
@@ -40,7 +40,7 @@ export const stackedWithYAxisBounds = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'area',
+      vizType: VizType.LegacyArea,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
@@ -56,7 +56,7 @@ stackedWithYAxisBounds.storyName = 'Stacked with yAxisBounds';
 
 export const stackedWithYAxisBoundsMinOnly = () => (
   <SuperChart
-    chartType="area"
+    chartType={VizType.LegacyArea}
     datasource={dummyDatasource}
     width={400}
     height={400}
@@ -73,7 +73,7 @@ export const stackedWithYAxisBoundsMinOnly = () => (
       showControls: true,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'area',
+      vizType: VizType.LegacyArea,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/NVD3Bar.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/NVD3Bar.stories.tsx
index c0f65a185f727..5da1177c33942 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/NVD3Bar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/NVD3Bar.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { BarChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new BarChartPlugin().configure({ key: 'bar' }).register();
+new BarChartPlugin().configure({ key: VizType.LegacyBar }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Bar',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithPositiveAndNegativeValues.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithPositiveAndNegativeValues.tsx
index 01ed7f20c64fa..449a54f6c3f04 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithPositiveAndNegativeValues.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithPositiveAndNegativeValues.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const barWithPositiveAndNegativeValues = () => (
   <SuperChart
-    chartType="bar"
+    chartType={VizType.LegacyBar}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -51,7 +51,7 @@ export const barWithPositiveAndNegativeValues = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'bar',
+      vizType: VizType.LegacyBar,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithValues.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithValues.tsx
index 2cc95b04e01da..5679050f65f3f 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithValues.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/barWithValues.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const barWithValues = () => (
   <SuperChart
-    chartType="bar"
+    chartType={VizType.LegacyBar}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -41,7 +41,7 @@ export const barWithValues = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'bar',
+      vizType: VizType.LegacyBar,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/basic.tsx
index 46b2e00ca1663..00ad09b51f16b 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/basic.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const basic = () => (
   <SuperChart
-    chartType="bar"
+    chartType={VizType.LegacyBar}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -41,7 +41,7 @@ export const basic = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'bar',
+      vizType: VizType.LegacyBar,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/stackedBarWithValues.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/stackedBarWithValues.tsx
index 6dbb104dec467..fb931e39601fd 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/stackedBarWithValues.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories/stackedBarWithValues.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const stackedBarWithValues = () => (
   <SuperChart
-    chartType="bar"
+    chartType={VizType.LegacyBar}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -42,7 +42,7 @@ export const stackedBarWithValues = () => (
       showControls: false,
       showLegend: true,
       stackedStyle: 'stack',
-      vizType: 'bar',
+      vizType: VizType.LegacyBar,
       xAxisFormat: '%Y',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot/stories/basic.tsx
index cf0bd8f656edf..bcd839f57375a 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot/stories/basic.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
@@ -30,7 +30,7 @@ export const basic = () => (
     queriesData={[{ data }]}
     formData={{
       colorScheme: 'd3Category10',
-      vizType: 'box_plot',
+      vizType: VizType.BoxPlot,
       whiskerOptions: 'Min/max (no outliers)',
     }}
   />
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/NVD3Bubble.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/NVD3Bubble.stories.tsx
index 7fe96241e2d9b..1835057887318 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/NVD3Bubble.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/NVD3Bubble.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { BubbleChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new BubbleChartPlugin().configure({ key: 'bubble' }).register();
+new BubbleChartPlugin().configure({ key: VizType.LegacyBubble }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Bubble',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/stories/basic.tsx
index 3549b524f80ee..838160971e66d 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/stories/basic.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const basic = () => (
   <SuperChart
-    chartType="bubble"
+    chartType={VizType.LegacyBubble}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -38,7 +38,7 @@ export const basic = () => (
       series: 'region',
       showLegend: true,
       size: 'sum__SP_POP_TOTL',
-      vizType: 'bubble',
+      vizType: VizType.LegacyBubble,
       x: 'sum__SP_RUR_TOTL_ZS',
       xAxisFormat: '.3s',
       xAxisLabel: 'x-axis label',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/NVD3Bullet.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/NVD3Bullet.stories.tsx
index acaed121d42e6..ed8e03cf389ca 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/NVD3Bullet.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/NVD3Bullet.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { BulletChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new BulletChartPlugin().configure({ key: 'bullet' }).register();
+new BulletChartPlugin().configure({ key: VizType.Bullet }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Bullet',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/stories/basic.tsx
index 7be4070549c62..650d90acce20c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/stories/basic.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const basic = () => (
   <SuperChart
-    chartType="bullet"
+    chartType={VizType.Bullet}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -35,7 +35,7 @@ export const basic = () => (
       markers: '',
       rangeLabels: '',
       ranges: '',
-      vizType: 'bullet',
+      vizType: VizType.Bullet,
     }}
   />
 );
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/NVD3Compare.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/NVD3Compare.stories.tsx
index 14dbf04a0fd7f..e28260251a09c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/NVD3Compare.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/NVD3Compare.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { CompareChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new CompareChartPlugin().configure({ key: 'compare' }).register();
+new CompareChartPlugin().configure({ key: VizType.Compare }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Compare',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/basic.tsx
index 9dbc789df0349..29d533f7d2881 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/basic.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
@@ -33,7 +33,7 @@ export const basic = () => (
       colorScheme: 'd3Category10',
       contribution: false,
       leftMargin: 'auto',
-      vizType: 'compare',
+      vizType: VizType.Compare,
       xAxisFormat: 'smart_date',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/timeFormat.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/timeFormat.tsx
index 026b9707f8fec..a5f116df3fbe1 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/timeFormat.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories/timeFormat.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 
 export const timeFormat = () => (
@@ -208,7 +208,7 @@ export const timeFormat = () => (
     ]}
     formData={{
       datasource: '24771__table',
-      vizType: 'compare',
+      vizType: VizType.Compare,
       urlParams: {},
       timeRangeEndpoints: ['inclusive', 'exclusive'],
       granularitySqla: '__time',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/basic.tsx
index 3db0f2ade403b..c262c2cc2b29a 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/basic.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
@@ -38,7 +38,7 @@ export const basic = () => (
       showBarValue: false,
       showControls: false,
       showLegend: true,
-      vizType: 'dist_bar',
+      vizType: VizType.DistBar,
       xAxisLabel: 'ddd',
       xTicksLayout: 'auto',
       yAxisFormat: '.3s',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/manyBars.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/manyBars.tsx
index 0ed157ab00eb2..246b590c02b9e 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/manyBars.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories/manyBars.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart, seedRandom } from '@superset-ui/core';
+import { SuperChart, VizType, seedRandom } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 
 const data: {
@@ -51,7 +51,7 @@ export const manyBars = () => (
       colorScheme: 'd3Category10',
       showBarValue: false,
       showLegend: true,
-      vizType: 'dist_bar',
+      vizType: VizType.DistBar,
       xTicksLayout: 'auto',
     }}
   />
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/NVD3Line.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/NVD3Line.stories.tsx
index 27bd366997778..0ba739c1f3a4a 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/NVD3Line.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/NVD3Line.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { LineChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new LineChartPlugin().configure({ key: 'line' }).register();
+new LineChartPlugin().configure({ key: VizType.LegacyLine }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Line',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/basic.tsx
index fb032bdca6fc3..3aea91e7f40d8 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/basic.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const basic = () => (
   <SuperChart
-    chartType="line"
+    chartType={VizType.LegacyLine}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -37,7 +37,7 @@ export const basic = () => (
       showBrush: 'auto',
       showLegend: true,
       showMarkers: false,
-      vizType: 'line',
+      vizType: VizType.LegacyLine,
       xAxisFormat: 'smart_date',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/logScale.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/logScale.tsx
index b94fa9e179e20..f93109f73e53e 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/logScale.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/logScale.tsx
@@ -17,20 +17,20 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const logScale = () => (
   <SuperChart
-    chartType="line"
+    chartType={VizType.LegacyLine}
     width={400}
     height={400}
     datasource={dummyDatasource}
     queriesData={[{ data }]}
     formData={{
       richTooltip: true,
-      vizType: 'line',
+      vizType: VizType.LegacyLine,
       yAxisBounds: [1, 60000],
       yAxisFormat: ',d',
       yLogScale: true,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/markers.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/markers.tsx
index 19ecf7be53c03..c2a83b8eb457c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/markers.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/markers.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const markers = () => (
   <SuperChart
-    chartType="line"
+    chartType={VizType.LegacyLine}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -37,7 +37,7 @@ export const markers = () => (
       showBrush: 'auto',
       showLegend: true,
       showMarkers: true,
-      vizType: 'line',
+      vizType: VizType.LegacyLine,
       xAxisFormat: 'smart_date',
       xAxisLabel: '',
       xAxisShowminmax: false,
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/yAxisBounds.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/yAxisBounds.tsx
index aaab26e0c9b01..c705c0b2b45e7 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/yAxisBounds.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories/yAxisBounds.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
@@ -26,7 +26,7 @@ export const yAxisBounds = () => (
     <h2>yAxisBounds</h2>
     <pre>yAxisBounds=undefined</pre>
     <SuperChart
-      chartType="line"
+      chartType={VizType.LegacyLine}
       width={400}
       height={200}
       datasource={dummyDatasource}
@@ -34,12 +34,12 @@ export const yAxisBounds = () => (
       formData={{
         richTooltip: true,
         showLegend: false,
-        vizType: 'line',
+        vizType: VizType.LegacyLine,
       }}
     />
     <pre>yAxisBounds=[0, 60000]</pre>
     <SuperChart
-      chartType="line"
+      chartType={VizType.LegacyLine}
       width={400}
       height={200}
       datasource={dummyDatasource}
@@ -47,13 +47,13 @@ export const yAxisBounds = () => (
       formData={{
         richTooltip: true,
         showLegend: false,
-        vizType: 'line',
+        vizType: VizType.LegacyLine,
         yAxisBounds: [0, 60000],
       }}
     />
     <pre>yAxisBounds=[null, 60000]</pre>
     <SuperChart
-      chartType="line"
+      chartType={VizType.LegacyLine}
       width={400}
       height={200}
       datasource={dummyDatasource}
@@ -61,13 +61,13 @@ export const yAxisBounds = () => (
       formData={{
         richTooltip: true,
         showLegend: false,
-        vizType: 'line',
+        vizType: VizType.LegacyLine,
         yAxisBounds: [null, 60000],
       }}
     />
     <pre>yAxisBounds=[40000, null]</pre>
     <SuperChart
-      chartType="line"
+      chartType={VizType.LegacyLine}
       width={400}
       height={200}
       datasource={dummyDatasource}
@@ -75,13 +75,13 @@ export const yAxisBounds = () => (
       formData={{
         richTooltip: true,
         showLegend: false,
-        vizType: 'line',
+        vizType: VizType.LegacyLine,
         yAxisBounds: [40000, null],
       }}
     />
     <pre>yAxisBounds=[40000, null] with Legend</pre>
     <SuperChart
-      chartType="line"
+      chartType={VizType.LegacyLine}
       width={400}
       height={200}
       datasource={dummyDatasource}
@@ -89,7 +89,7 @@ export const yAxisBounds = () => (
       formData={{
         richTooltip: true,
         showLegend: true,
-        vizType: 'line',
+        vizType: VizType.LegacyLine,
         yAxisBounds: [40000, null],
       }}
     />
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/NVD3Pie.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/NVD3Pie.stories.tsx
index 4b7517b5aff17..5fcfa870204c7 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/NVD3Pie.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/NVD3Pie.stories.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { PieChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';
 
-new PieChartPlugin().configure({ key: 'pie' }).register();
+new PieChartPlugin().configure({ key: VizType.Pie }).register();
 
 export default {
   title: 'Legacy Chart Plugins/legacy-preset-chart-nvd3/Pie',
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/basic.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/basic.tsx
index 7d5e55bb536f9..0fd34b6ec60f9 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/basic.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/basic.tsx
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 import data from '../data';
 
 export const basic = () => (
   <SuperChart
-    chartType="pie"
+    chartType={VizType.Pie}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -36,7 +36,7 @@ export const basic = () => (
       pieLabelType: 'key',
       showLabels: true,
       showLegend: true,
-      vizType: 'pie',
+      vizType: VizType.Pie,
     }}
   />
 );
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/noData.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/noData.tsx
index 98b63b0a85064..028305901a6cf 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/noData.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories/noData.tsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import dummyDatasource from '../../../../../shared/dummyDatasource';
 
 export const noData = () => (
   <SuperChart
-    chartType="pie"
+    chartType={VizType.Pie}
     width={400}
     height={400}
     datasource={dummyDatasource}
@@ -35,7 +35,7 @@ export const noData = () => (
       pieLabelType: 'key',
       showLabels: true,
       showLegend: true,
-      vizType: 'pie',
+      vizType: VizType.Pie,
     }}
   />
 );
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaSeries/AreaSeries.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaSeries/AreaSeries.stories.tsx
index d6cf90952ef18..e74566e3325ed 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaSeries/AreaSeries.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/AreaSeries/AreaSeries.stories.tsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  getChartTransformPropsRegistry,
+  VizType,
+} from '@superset-ui/core';
 import {
   EchartsAreaChartPlugin,
   TimeseriesTransformProps,
@@ -25,10 +29,10 @@ import {
 import data from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
-new EchartsAreaChartPlugin().configure({ key: 'echarts_area' }).register();
+new EchartsAreaChartPlugin().configure({ key: VizType.Area }).register();
 
 getChartTransformPropsRegistry().registerValue(
-  'echarts_area',
+  VizType.Area,
   TimeseriesTransformProps,
 );
 
@@ -169,7 +173,7 @@ export const AreaSeries = (
     .filter(row => forecastEnabled || !!row.Boston);
   return (
     <SuperChart
-      chartType="echarts_area"
+      chartType={VizType.Area}
       width={width}
       height={height}
       queriesData={[{ data: queryData }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/BubbleChart.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/BubbleChart.stories.tsx
index 2b9f8cc3a1461..631c599719d00 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/BubbleChart.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Bubble/BubbleChart.stories.tsx
@@ -20,14 +20,18 @@ import {
   EchartsBubbleChartPlugin,
   BubbleTransformProps,
 } from '@superset-ui/plugin-chart-echarts';
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
 import { simpleBubbleData } from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
-new EchartsBubbleChartPlugin().configure({ key: 'bubble_v2' }).register();
+new EchartsBubbleChartPlugin().configure({ key: VizType.Bubble }).register();
 
 getChartTransformPropsRegistry().registerValue(
-  'bubble_v2',
+  VizType.Bubble,
   BubbleTransformProps,
 );
 
@@ -104,7 +108,7 @@ export const BubbleChart = (
   { width, height }: { width: number; height: number },
 ) => (
   <SuperChart
-    chartType="bubble_v2"
+    chartType={VizType.Bubble}
     width={width}
     height={height}
     queriesData={[{ data: simpleBubbleData }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Funnel/Funnel.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Funnel/Funnel.stories.tsx
index 84065a5a01beb..bcb99986cf8e1 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Funnel/Funnel.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Funnel/Funnel.stories.tsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
 import {
   EchartsFunnelChartPlugin,
   FunnelTransformProps,
@@ -25,10 +29,10 @@ import {
 import { dataSource } from './constants';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
-new EchartsFunnelChartPlugin().configure({ key: 'echarts-funnel' }).register();
+new EchartsFunnelChartPlugin().configure({ key: VizType.Funnel }).register();
 
 getChartTransformPropsRegistry().registerValue(
-  'echarts-funnel',
+  VizType.Funnel,
   FunnelTransformProps,
 );
 
@@ -88,7 +92,7 @@ export const Funnel = (
   { width, height }: { width: number; height: number },
 ) => (
   <SuperChart
-    chartType="echarts-funnel"
+    chartType={VizType.Funnel}
     width={width}
     height={height}
     queriesData={[{ data: dataSource }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/Pie.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/Pie.stories.tsx
index 6a752ac94003c..1736e45f0ca24 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/Pie.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/Pie.stories.tsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
 import {
   EchartsPieChartPlugin,
   PieTransformProps,
@@ -25,12 +29,9 @@ import {
 import { weekday, population, sales } from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
-new EchartsPieChartPlugin().configure({ key: 'echarts-pie' }).register();
+new EchartsPieChartPlugin().configure({ key: VizType.Pie }).register();
 
-getChartTransformPropsRegistry().registerValue(
-  'echarts-pie',
-  PieTransformProps,
-);
+getChartTransformPropsRegistry().registerValue(VizType.Pie, PieTransformProps);
 
 export default {
   title: 'Chart Plugins/plugin-chart-echarts/Pie',
@@ -60,7 +61,7 @@ export const WeekdayPie = (
   { width, height }: { width: number; height: number },
 ) => (
   <SuperChart
-    chartType="echarts-pie"
+    chartType={VizType.Pie}
     width={width}
     height={height}
     queriesData={[{ data: weekday }]}
@@ -138,7 +139,7 @@ export const PopulationPie = (
   { width, height }: { width: number; height: number },
 ) => (
   <SuperChart
-    chartType="echarts-pie"
+    chartType={VizType.Pie}
     width={width}
     height={height}
     queriesData={[{ data: population }]}
@@ -218,7 +219,7 @@ export const SalesPie = (
   { width, height }: { width: number; height: number },
 ) => (
   <SuperChart
-    chartType="echarts-pie"
+    chartType={VizType.Pie}
     width={width}
     height={height}
     queriesData={[{ data: sales }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Radar.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Radar.stories.tsx
index 637193a80224b..d570a7bc5e2de 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Radar.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar/Radar.stories.tsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
 import {
   EchartsRadarChartPlugin,
   RadarTransformProps,
@@ -25,10 +29,10 @@ import {
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 import { basic } from './data';
 
-new EchartsRadarChartPlugin().configure({ key: 'echarts-radar' }).register();
+new EchartsRadarChartPlugin().configure({ key: VizType.Radar }).register();
 
 getChartTransformPropsRegistry().registerValue(
-  'echarts-radar',
+  VizType.Radar,
   RadarTransformProps,
 );
 
@@ -39,7 +43,7 @@ export default {
 
 export const Radar = ({ width, height }) => (
   <SuperChart
-    chartType="echarts-radar"
+    chartType={VizType.Radar}
     width={width}
     height={height}
     queriesData={[{ data: basic }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Waterfall.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Waterfall.stories.tsx
index f2f732a2908d2..ec8989009e91d 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Waterfall.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Waterfall.stories.tsx
@@ -16,7 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import {
+  SuperChart,
+  VizType,
+  getChartTransformPropsRegistry,
+} from '@superset-ui/core';
 import {
   EchartsWaterfallChartPlugin,
   WaterfallTransformProps,
@@ -25,11 +29,11 @@ import data from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
 new EchartsWaterfallChartPlugin()
-  .configure({ key: 'echarts-waterfall' })
+  .configure({ key: VizType.Waterfall })
   .register();
 
 getChartTransformPropsRegistry().registerValue(
-  'echarts-waterfall',
+  VizType.Waterfall,
   WaterfallTransformProps,
 );
 
@@ -40,7 +44,7 @@ export default {
 
 export const Waterfall = ({ width, height }) => (
   <SuperChart
-    chartType="echarts-waterfall"
+    chartType={VizType.Waterfall}
     width={width}
     height={height}
     queriesData={[{ data }]}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/PivotTable.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/PivotTable.stories.tsx
index ba12b4054e169..7cb2629bfd299 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/PivotTable.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/PivotTable.stories.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import { PivotTableChartPlugin } from '@superset-ui/plugin-chart-pivot-table';
 import { basicFormData, basicData } from './testData';
 import { withResizableChartDemo } from '../../../shared/components/ResizableChartDemo';
@@ -27,11 +27,11 @@ export default {
   decorators: [withResizableChartDemo],
 };
 
-new PivotTableChartPlugin().configure({ key: 'pivot_table_v2' }).register();
+new PivotTableChartPlugin().configure({ key: VizType.PivotTable }).register();
 
 export const Basic = ({ width, height }) => (
   <SuperChart
-    chartType="pivot_table_v2"
+    chartType={VizType.PivotTable}
     datasource={{
       columnFormats: {},
     }}
@@ -50,7 +50,7 @@ Basic.parameters = {
 
 export const MaximumAggregation = ({ width, height }) => (
   <SuperChart
-    chartType="pivot_table_v2"
+    chartType={VizType.PivotTable}
     datasource={{
       columnFormats: {},
     }}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/testData.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/testData.ts
index e29d6ba09c27c..a8a4a0cb2a45b 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/testData.ts
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-pivot-table/testData.ts
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { VizType } from '@superset-ui/core';
+
 export const basicFormData = {
   datasource: '1__table',
-  viz_type: 'pivot_table_v2',
+  viz_type: VizType.PivotTable,
   granularity_sqla: 'ts',
   groupbyColumns: ['location'],
   groupbyRows: ['program_language'],
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/Table.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/Table.stories.tsx
index 78264b0ec90bd..02ddc4a7f0f8e 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/Table.stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/Table.stories.tsx
@@ -18,7 +18,7 @@
  */
 
 import memoizeOne from 'memoize-one';
-import { SuperChart } from '@superset-ui/core';
+import { SuperChart, VizType } from '@superset-ui/core';
 import TableChartPlugin, {
   TableChartProps,
 } from '@superset-ui/plugin-chart-table';
@@ -75,7 +75,7 @@ export default {
   },
 };
 
-new TableChartPlugin().configure({ key: 'table' }).register();
+new TableChartPlugin().configure({ key: VizType.Table }).register();
 
 function expandArray<T>(input: T[], targetSize: number) {
   if (!input || input.length === 0) {
@@ -138,7 +138,7 @@ function loadData(
 
 export const Basic = ({ width, height }) => (
   <SuperChart
-    chartType="table"
+    chartType={VizType.Table}
     datasource={{
       columnFormats: {},
     }}
@@ -186,7 +186,7 @@ export const BigTable = (
   });
   return (
     <SuperChart
-      chartType="table"
+      chartType={VizType.Table}
       {...chartProps}
       width={width}
       height={height}
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
index 0ae466efd1ad4..bdd35e596e59c 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
@@ -29,7 +29,7 @@ export const birthNames = birthNamesJson as TableChartProps;
 
 export const basicFormData: TableChartFormData = {
   datasource: '1__table',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   align_pn: false,
   color_pn: false,
   include_search: true,
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
index a454fe28b4644..4bd9a2a94dd82 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -31,6 +31,7 @@ import {
   NumberFormats,
   SMART_DATE_VERBOSE_ID,
   t,
+  VizType,
 } from '@superset-ui/core';
 
 import 'nvd3-fork/build/nv.d3.css';
@@ -125,7 +126,13 @@ const BREAKPOINTS = {
   small: 340,
 };
 
-const TIMESERIES_VIZ_TYPES = ['line', 'area', 'compare', 'bar', 'time_pivot'];
+const TIMESERIES_VIZ_TYPES = [
+  VizType.LegacyLine,
+  VizType.LegacyArea,
+  VizType.Compare,
+  VizType.LegacyBar,
+  VizType.TimePivot,
+];
 
 const CHART_ID_PREFIX = 'chart-id-';
 
@@ -165,7 +172,6 @@ const propTypes = {
         }),
       ]),
     ),
-    // bullet
     bulletDataType,
   ]),
   width: PropTypes.number,
@@ -182,16 +188,16 @@ const propTypes = {
   showMarkers: PropTypes.bool,
   useRichTooltip: PropTypes.bool,
   vizType: PropTypes.oneOf([
-    'area',
-    'bar',
-    'box_plot',
+    VizType.LegacyArea,
+    VizType.LegacyBar,
+    VizType.BoxPlot,
     'bubble',
-    'bullet',
-    'compare',
+    VizType.Bullet,
+    VizType.Compare,
     'column',
-    'dist_bar',
-    'line',
-    'time_pivot',
+    VizType.DistBar,
+    VizType.LegacyLine,
+    VizType.TimePivot,
     'pie',
   ]),
   xAxisFormat: PropTypes.string,
@@ -341,13 +347,14 @@ function nvd3Vis(element, props) {
     if (svg.empty()) {
       svg = d3Element.append('svg');
     }
-    const height = vizType === 'bullet' ? Math.min(maxHeight, 50) : maxHeight;
+    const height =
+      vizType === VizType.Bullet ? Math.min(maxHeight, 50) : maxHeight;
     const isTimeSeries = isVizTypes(TIMESERIES_VIZ_TYPES);
 
     // Handling xAxis ticks settings
     const staggerLabels = xTicksLayout === 'staggered';
     const xLabelRotation =
-      (xTicksLayout === 'auto' && isVizTypes(['column', 'dist_bar'])) ||
+      (xTicksLayout === 'auto' && isVizTypes(['column', VizType.DistBar])) ||
       xTicksLayout === '45°'
         ? 45
         : 0;
@@ -367,7 +374,7 @@ function nvd3Vis(element, props) {
     const numberFormatter = getNumberFormatter(numberFormat);
 
     switch (vizType) {
-      case 'line':
+      case VizType.LegacyLine:
         if (canShowBrush) {
           chart = nv.models.lineWithFocusChart();
           if (staggerLabels) {
@@ -384,13 +391,13 @@ function nvd3Vis(element, props) {
         chart.clipEdge(false);
         break;
 
-      case 'time_pivot':
+      case VizType.TimePivot:
         chart = nv.models.lineChart();
         chart.xScale(d3.time.scale.utc());
         chart.interpolate(lineInterpolation);
         break;
 
-      case 'bar':
+      case VizType.LegacyBar:
         chart = nv.models
           .multiBarChart()
           .showControls(showControls)
@@ -404,7 +411,7 @@ function nvd3Vis(element, props) {
         chart.stacked(isBarStacked);
         break;
 
-      case 'dist_bar':
+      case VizType.DistBar:
         chart = nv.models
           .multiBarChart()
           .showControls(showControls)
@@ -429,7 +436,7 @@ function nvd3Vis(element, props) {
         chart.width(width);
         break;
 
-      case 'pie':
+      case VizType.Pie:
         chart = nv.models.pieChart();
         colorKey = 'x';
         chart.valueFormat(numberFormatter);
@@ -478,14 +485,14 @@ function nvd3Vis(element, props) {
         chart = nv.models.multiBarChart().reduceXTicks(false);
         break;
 
-      case 'compare':
+      case VizType.Compare:
         chart = nv.models.cumulativeLineChart();
         chart.xScale(d3.time.scale.utc());
         chart.useInteractiveGuideline(true);
         chart.xAxis.showMaxMin(false);
         break;
 
-      case 'bubble':
+      case VizType.LegacyBubble:
         chart = nv.models.scatterChart();
         chart.showDistX(false);
         chart.showDistY(false);
@@ -508,21 +515,21 @@ function nvd3Vis(element, props) {
         ]);
         break;
 
-      case 'area':
+      case VizType.LegacyArea:
         chart = nv.models.stackedAreaChart();
         chart.showControls(showControls);
         chart.style(areaStackedStyle);
         chart.xScale(d3.time.scale.utc());
         break;
 
-      case 'box_plot':
+      case VizType.BoxPlot:
         colorKey = 'label';
         chart = nv.models.boxPlotChart();
         chart.x(d => d.label);
         chart.maxBoxWidth(75); // prevent boxes from being incredibly wide
         break;
 
-      case 'bullet':
+      case VizType.Bullet:
         chart = nv.models.bulletChart();
         data.rangeLabels = rangeLabels;
         data.ranges = ranges;
@@ -572,7 +579,7 @@ function nvd3Vis(element, props) {
     }
 
     if ('showLegend' in chart && typeof showLegend !== 'undefined') {
-      if (width < BREAKPOINTS.small && vizType !== 'pie') {
+      if (width < BREAKPOINTS.small && vizType !== VizType.Pie) {
         chart.showLegend(false);
       } else {
         chart.showLegend(showLegend);
@@ -598,7 +605,7 @@ function nvd3Vis(element, props) {
       chart.x2Axis.tickFormat(xAxisFormatter);
     }
     if (chart.xAxis && chart.xAxis.tickFormat) {
-      const isXAxisString = isVizTypes(['dist_bar', 'box_plot']);
+      const isXAxisString = isVizTypes([VizType.DistBar, VizType.BoxPlot]);
       if (isXAxisString) {
         chart.xAxis.tickFormat(d =>
           d.length > MAX_NO_CHARACTERS_IN_LABEL
@@ -641,7 +648,7 @@ function nvd3Vis(element, props) {
     setAxisShowMaxMin(chart.yAxis, yAxisShowMinMax);
     setAxisShowMaxMin(chart.y2Axis, yAxis2ShowMinMax || yAxisShowMinMax);
 
-    if (vizType === 'time_pivot') {
+    if (vizType === VizType.TimePivot) {
       if (baseColor) {
         const { r, g, b } = baseColor;
         chart.color(d => {
@@ -655,16 +662,24 @@ function nvd3Vis(element, props) {
       chart.interactiveLayer.tooltip.contentGenerator(d =>
         generateTimePivotTooltip(d, xAxisFormatter, yAxisFormatter),
       );
-    } else if (vizType !== 'bullet') {
+    } else if (vizType !== VizType.Bullet) {
       const colorFn = getScale(colorScheme);
       chart.color(
         d => d.color || colorFn(cleanColorInput(d[colorKey]), sliceId),
       );
     }
 
-    if (isVizTypes(['line', 'area', 'bar', 'dist_bar']) && useRichTooltip) {
+    if (
+      isVizTypes([
+        VizType.LegacyLine,
+        VizType.LegacyArea,
+        VizType.LegacyBar,
+        VizType.DistBar,
+      ]) &&
+      useRichTooltip
+    ) {
       chart.useInteractiveGuideline(true);
-      if (vizType === 'line' || vizType === 'bar') {
+      if (vizType === VizType.LegacyLine || vizType === VizType.LegacyBar) {
         chart.interactiveLayer.tooltip.contentGenerator(d =>
           generateRichLineTooltipContent(
             d,
@@ -672,7 +687,7 @@ function nvd3Vis(element, props) {
             yAxisFormatter,
           ),
         );
-      } else if (vizType === 'dist_bar') {
+      } else if (vizType === VizType.DistBar) {
         chart.interactiveLayer.tooltip.contentGenerator(d =>
           generateCompareTooltipContent(d, yAxisFormatter),
         );
@@ -689,7 +704,7 @@ function nvd3Vis(element, props) {
       }
     }
 
-    if (isVizTypes(['compare'])) {
+    if (isVizTypes([VizType.Compare])) {
       chart.interactiveLayer.tooltip.contentGenerator(d =>
         generateCompareTooltipContent(d, yAxisFormatter),
       );
@@ -732,7 +747,7 @@ function nvd3Vis(element, props) {
 
         if (
           (hasCustomMin || hasCustomMax) &&
-          vizType === 'area' &&
+          vizType === VizType.LegacyArea &&
           chart.style() === 'expand'
         ) {
           // Because there are custom bounds, we need to override them back to 0%-100% since this
@@ -740,7 +755,7 @@ function nvd3Vis(element, props) {
           chart.yDomain([0, 1]);
         } else if (
           (hasCustomMin || hasCustomMax) &&
-          vizType === 'area' &&
+          vizType === VizType.LegacyArea &&
           chart.style() === 'stream'
         ) {
           // Because there are custom bounds, we need to override them back to the domain of the
@@ -757,8 +772,9 @@ function nvd3Vis(element, props) {
           // These viz types can be stacked
           // They correspond to the nvd3 stackedAreaChart and multiBarChart
           if (
-            vizType === 'area' ||
-            (isVizTypes(['bar', 'dist_bar']) && chart.stacked())
+            vizType === VizType.LegacyArea ||
+            (isVizTypes([VizType.LegacyBar, VizType.DistBar]) &&
+              chart.stacked())
           ) {
             // This is a stacked area chart or a stacked bar chart
             [trueMin, trueMax] = computeStackedYDomain(data);
@@ -939,7 +955,7 @@ function nvd3Vis(element, props) {
         let xMax;
         let xMin;
         let xScale;
-        if (vizType === 'bar') {
+        if (vizType === VizType.LegacyBar) {
           xMin = d3.min(data[0].values, d => d.x);
           xMax = d3.max(data[0].values, d => d.x);
           xScale = d3.scale
@@ -963,7 +979,7 @@ function nvd3Vis(element, props) {
 
         if (formulas.length > 0) {
           const xValues = [];
-          if (vizType === 'bar') {
+          if (vizType === VizType.LegacyBar) {
             // For bar-charts we want one data point evaluated for every
             // data point that will be displayed.
             const distinct = data.reduce((xVals, d) => {
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/preset.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/preset.js
index 2fa7e7b0d90f7..a99c268fd4773 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/preset.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/preset.js
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Preset } from '@superset-ui/core';
+import { Preset, VizType } from '@superset-ui/core';
 import AreaChartPlugin from './Area';
 import BarChartPlugin from './Bar';
 import BoxPlotChartPlugin from './BoxPlot';
@@ -33,16 +33,16 @@ export default class NVD3ChartPreset extends Preset {
     super({
       name: 'NVD3 charts',
       plugins: [
-        new AreaChartPlugin().configure({ key: 'area' }),
-        new BarChartPlugin().configure({ key: 'bar' }),
-        new BoxPlotChartPlugin().configure({ key: 'box_plot' }),
-        new BubbleChartPlugin().configure({ key: 'bubble' }),
-        new BulletChartPlugin().configure({ key: 'bullet' }),
-        new CompareChartPlugin().configure({ key: 'compare' }),
-        new DistBarChartPlugin().configure({ key: 'dist_bar' }),
-        new LineChartPlugin().configure({ key: 'line' }),
-        new PieChartPlugin().configure({ key: 'pie' }),
-        new TimePivotChartPlugin().configure({ key: 'time_pivot' }),
+        new AreaChartPlugin().configure({ key: VizType.LegacyArea }),
+        new BarChartPlugin().configure({ key: VizType.LegacyBar }),
+        new BoxPlotChartPlugin().configure({ key: VizType.BoxPlot }),
+        new BubbleChartPlugin().configure({ key: VizType.LegacyBubble }),
+        new BulletChartPlugin().configure({ key: VizType.Bullet }),
+        new CompareChartPlugin().configure({ key: VizType.Compare }),
+        new DistBarChartPlugin().configure({ key: VizType.DistBar }),
+        new LineChartPlugin().configure({ key: VizType.LegacyLine }),
+        new PieChartPlugin().configure({ key: VizType.Pie }),
+        new TimePivotChartPlugin().configure({ key: VizType.TimePivot }),
       ],
     });
   }
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/transformProps.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/transformProps.js
index 4d2f6f2105880..4bd1fbd1748fe 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/transformProps.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/transformProps.js
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { VizType } from '@superset-ui/core';
 import isTruthy from './utils/isTruthy';
 import {
   tokenizeToNumericArray,
@@ -118,15 +119,20 @@ export default function transformProps(chartProps) {
       }))
     : rawData;
 
-  if (vizType === 'pie') {
+  if (vizType === VizType.Pie) {
     numberFormat = numberFormat || grabD3Format(datasource, metric);
   } else if (
-    ['line', 'dist_bar', 'bar', 'area'].includes(chartProps.formData.vizType)
+    [
+      VizType.LegacyLine,
+      VizType.DistBar,
+      VizType.LegacyBar,
+      VizType.LegacyArea,
+    ].includes(chartProps.formData.vizType)
   ) {
     yAxisFormat =
       yAxisFormat ||
       grabD3Format(datasource, metrics.length > 0 ? metrics[0] : undefined);
-  } else if (vizType === 'bullet') {
+  } else if (vizType === VizType.Bullet) {
     ranges = tokenizeToNumericArray(ranges) || [0, data.measures * 1.1];
     rangeLabels = tokenizeToStringArray(rangeLabels);
     markerLabels = tokenizeToStringArray(markerLabels);
diff --git a/superset-frontend/plugins/plugin-chart-echarts/README.md b/superset-frontend/plugins/plugin-chart-echarts/README.md
index a114a838081e2..ef83eb08136ea 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/README.md
+++ b/superset-frontend/plugins/plugin-chart-echarts/README.md
@@ -39,7 +39,7 @@ import {
 } from '@superset-ui/plugin-chart-echarts';
 
 new EchartsTimeseriesChartPlugin().configure({ key: 'echarts-ts' }).register();
-new EchartsPieChartPlugin().configure({ key: 'echarts-pie' }).register();
+new EchartsPieChartPlugin().configure({ key: 'pie' }).register();
 ```
 
 Then use it via `SuperChart`. See
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
index cd2a3a0ffbfb8..b2ba862e6ae5b 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -26,6 +26,7 @@ import {
   NumberFormats,
   tooltipHtml,
   ValueFormatter,
+  VizType,
 } from '@superset-ui/core';
 import type { CallbackDataParams } from 'echarts/types/src/util/types';
 import type { EChartsCoreOption } from 'echarts/core';
@@ -231,7 +232,7 @@ export default function transformProps(
 
   const series: FunnelSeriesOption[] = [
     {
-      type: 'funnel',
+      type: VizType.Funnel,
       ...getChartPadding(showLegend, legendOrientation, legendMargin),
       animation: true,
       minSize: '0%',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
index 52651356b14d8..f55d1fb7a0a87 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { t, VizType } from '@superset-ui/core';
 import {
   ControlPanelsContainerProps,
   ControlSetItem,
@@ -220,7 +220,7 @@ const tooltipTotalControl: ControlSetItem = {
     description: t('Whether to display the total value in the tooltip'),
     visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
       Boolean(controls?.rich_tooltip?.value) &&
-      form_data.viz_type !== 'mixed_timeseries',
+      form_data.viz_type !== VizType.MixedTimeseries,
   },
 };
 
@@ -235,7 +235,7 @@ const tooltipPercentageControl: ControlSetItem = {
     visibility: ({ controls, form_data }: ControlPanelsContainerProps) =>
       Boolean(controls?.rich_tooltip?.value) &&
       !controls?.contributionMode?.value &&
-      form_data.viz_type !== 'mixed_timeseries',
+      form_data.viz_type !== VizType.MixedTimeseries,
   },
 };
 
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
index bdbbbcd9d1b9d..8c9ee5621c525 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
@@ -20,6 +20,7 @@ import {
   DatasourceType,
   supersetTheme,
   TimeGranularity,
+  VizType,
 } from '@superset-ui/core';
 import transformProps from '../../src/BigNumber/BigNumberWithTrendline/transformProps';
 import {
@@ -40,7 +41,7 @@ const formData = {
   timeGrainSqla: TimeGranularity.QUARTER,
   granularitySqla: 'ds',
   compareSuffix: 'over last quarter',
-  viz_type: 'big_number',
+  viz_type: VizType.BigNumber,
   yAxisFormat: '.3s',
   datasource: 'test_datasource',
 };
@@ -59,7 +60,7 @@ const rawFormData: BigNumberWithTrendlineFormData = {
   time_grain_sqla: TimeGranularity.QUARTER,
   granularity_sqla: 'ds',
   compare_suffix: 'over last quarter',
-  viz_type: 'big_number',
+  viz_type: VizType.BigNumber,
   y_axis_format: '.3s',
 };
 
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
index 760e3ff93c2b4..a8b12ed8cc232 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Gauge/transformProps.test.ts
@@ -21,6 +21,7 @@ import {
   ChartProps,
   SqlaFormData,
   supersetTheme,
+  VizType,
 } from '@superset-ui/core';
 import transformProps, {
   getIntervalBoundsAndColors,
@@ -30,7 +31,7 @@ import { EchartsGaugeChartProps } from '../../src/Gauge/types';
 describe('Echarts Gauge transformProps', () => {
   const baseFormData: SqlaFormData = {
     datasource: '26__table',
-    viz_type: 'gauge_chart',
+    viz_type: VizType.Gauge,
     metric: 'count',
     adhocFilters: [],
     rowLimit: 10,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
index 422eb6a4805b8..c3a476bce0d1d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, supersetTheme } from '@superset-ui/core';
+import { ChartProps, supersetTheme, VizType } from '@superset-ui/core';
 import {
   LegendOrientation,
   LegendType,
@@ -76,7 +76,7 @@ const formData: EchartsMixedTimeseriesFormData = {
   groupbyB: ['gender'],
   seriesType: EchartsTimeseriesSeriesType.Line,
   seriesTypeB: EchartsTimeseriesSeriesType.Bar,
-  viz_type: 'mixed_timeseries',
+  viz_type: VizType.MixedTimeseries,
   forecastEnabled: false,
   forecastPeriods: [],
   forecastInterval: 0,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/buildQuery.test.ts
index 9f5913148e3e9..4bf5f8c8087ec 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/buildQuery.test.ts
@@ -64,7 +64,7 @@ describe('Timeseries buildQuery', () => {
 describe('queryObject conversion', () => {
   const formData: SqlaFormData = {
     datasource: '5__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     granularity_sqla: 'time_column',
     time_grain_sqla: 'P1Y',
     time_range: '1 year ago : 2013',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
index 0eb72be3ef998..e5e50278f714f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SqlaFormData } from '@superset-ui/core';
+import { SqlaFormData, VizType } from '@superset-ui/core';
 import buildQuery from '../../src/Waterfall/buildQuery';
 
 describe('Waterfall buildQuery', () => {
@@ -26,7 +26,7 @@ describe('Waterfall buildQuery', () => {
     metric: 'foo',
     x_axis: 'bar',
     groupby: ['baz'],
-    viz_type: 'waterfall',
+    viz_type: VizType.Waterfall,
   };
 
   it('should build query fields from form data', () => {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
index f9b69393aef92..7061dc890768d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/index.test.ts
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { VizType } from '@superset-ui/core';
 import {
   EchartsBoxPlotChartPlugin,
   EchartsPieChartPlugin,
@@ -65,58 +66,58 @@ test('@superset-ui/plugin-chart-echarts exists', () => {
 test('@superset-ui/plugin-chart-echarts-parsemethod-validation', () => {
   const plugins: EchartsChartPlugin[] = [
     new EchartsBoxPlotChartPlugin().configure({
-      key: 'box_plot',
+      key: VizType.BoxPlot,
     }),
     new EchartsPieChartPlugin().configure({
-      key: 'pie',
+      key: VizType.Pie,
     }),
     new EchartsTimeseriesChartPlugin().configure({
-      key: 'echarts_timeseries',
+      key: VizType.Timeseries,
     }),
     new EchartsGraphChartPlugin().configure({
-      key: 'graph_chart',
+      key: VizType.Graph,
     }),
     new EchartsFunnelChartPlugin().configure({
-      key: 'funnel',
+      key: VizType.Funnel,
     }),
     new EchartsTreemapChartPlugin().configure({
-      key: 'treemap_v2',
+      key: VizType.Treemap,
     }),
     new EchartsAreaChartPlugin().configure({
-      key: 'echarts_area',
+      key: VizType.Area,
     }),
     new EchartsTimeseriesBarChartPlugin().configure({
-      key: 'echarts_timeseries_bar',
+      key: VizType.Bar,
     }),
     new EchartsTimeseriesLineChartPlugin().configure({
-      key: 'echarts_timeseries_line',
+      key: VizType.Line,
     }),
     new EchartsTimeseriesScatterChartPlugin().configure({
-      key: 'echarts_timeseries_scatter',
+      key: VizType.Scatter,
     }),
     new EchartsTimeseriesSmoothLineChartPlugin().configure({
-      key: 'echarts_timeseries_smooth',
+      key: VizType.SmoothLine,
     }),
     new EchartsTimeseriesStepChartPlugin().configure({
-      key: 'echarts_timeseries_step',
+      key: VizType.Step,
     }),
     new EchartsMixedTimeseriesChartPlugin().configure({
-      key: 'mixed_timeseries',
+      key: VizType.MixedTimeseries,
     }),
     new EchartsGaugeChartPlugin().configure({
-      key: 'gauge_chart',
+      key: VizType.Gauge,
     }),
     new EchartsRadarChartPlugin().configure({
-      key: 'radar',
+      key: VizType.Radar,
     }),
     new EchartsTreeChartPlugin().configure({
       key: 'tree',
     }),
     new BigNumberChartPlugin().configure({
-      key: 'big_number',
+      key: VizType.BigNumber,
     }),
     new BigNumberTotalChartPlugin().configure({
-      key: 'big_number_total',
+      key: VizType.BigNumberTotal,
     }),
     new EchartsSunburstChartPlugin().configure({
       key: 'sunburst',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/formDataSuffix.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/formDataSuffix.test.ts
index 2e22583c76c7c..a1ebbce9239db 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/formDataSuffix.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/formDataSuffix.test.ts
@@ -23,7 +23,7 @@ import {
 
 const formData = {
   datasource: 'dummy',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   metrics: ['a', 'b'],
   columns: ['foo', 'bar'],
   limit: 100,
@@ -35,7 +35,7 @@ const formData = {
 test('should keep controls with suffix', () => {
   expect(retainFormDataSuffix(formData, '_b')).toEqual({
     datasource: 'dummy',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     metrics: ['c', 'd'],
     columns: ['hello', 'world'],
     limit: 200,
@@ -47,7 +47,7 @@ test('should keep controls with suffix', () => {
 test('should remove controls with suffix', () => {
   expect(removeFormDataSuffix(formData, '_b')).toEqual({
     datasource: 'dummy',
-    viz_type: 'table',
+    viz_type: VizType.Table,
     metrics: ['a', 'b'],
     columns: ['foo', 'bar'],
     limit: 100,
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts
index 5910ea0f493ec..d6ab2a60dca90 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-handlebars/test/plugin/transformProps.test.ts
@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, QueryFormData, supersetTheme } from '@superset-ui/core';
+import {
+  ChartProps,
+  QueryFormData,
+  supersetTheme,
+  VizType,
+} from '@superset-ui/core';
 import { HandlebarsQueryFormData } from '../../src/types';
 import transformProps from '../../src/plugin/transformProps';
 
@@ -29,7 +34,7 @@ describe('Handlebars transformProps', () => {
     groupby: ['name'],
     width: 500,
     height: 500,
-    viz_type: 'handlebars',
+    viz_type: VizType.Handlebars,
   };
   const data = [{ name: 'Hulk', sum__num: 1, __timestamp: 599616000000 }];
   const chartProps = new ChartProps<QueryFormData>({
diff --git a/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
index f3eb2d0955c38..22c28e9031b6c 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
@@ -21,7 +21,7 @@ import buildQuery from '../src/buildQuery';
 import { TableChartFormData } from '../src/types';
 
 const basicFormData: TableChartFormData = {
-  viz_type: 'table',
+  viz_type: VizType.Table,
   datasource: '11__table',
 };
 
diff --git a/superset-frontend/plugins/plugin-chart-table/test/testData.ts b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
index 5993e335a291d..821c0f6370588 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/testData.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
@@ -29,7 +29,7 @@ import { TableChartProps, TableChartFormData } from '../src/types';
 
 const basicFormData: TableChartFormData = {
   datasource: '1__abc',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   align_pn: false,
   color_pn: false,
   show_cell_bars: true,
diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/test/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-word-cloud/test/buildQuery.test.ts
index 6c236742697c4..3c91882922027 100644
--- a/superset-frontend/plugins/plugin-chart-word-cloud/test/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/test/buildQuery.test.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { WordCloudFormData } from '../src';
 import buildQuery from '../src/plugin/buildQuery';
 
@@ -25,7 +26,7 @@ describe('WordCloud buildQuery', () => {
     datasource: '5__table',
     granularity_sqla: 'ds',
     series: 'foo',
-    viz_type: 'word_cloud',
+    viz_type: VizType.WordCloud,
   };
 
   it('should build columns from series in form data', () => {
diff --git a/superset-frontend/spec/fixtures/mockChartQueries.js b/superset-frontend/spec/fixtures/mockChartQueries.js
index 5d5afc483f101..b0d536376266b 100644
--- a/superset-frontend/spec/fixtures/mockChartQueries.js
+++ b/superset-frontend/spec/fixtures/mockChartQueries.js
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { VizType } from '@superset-ui/core';
 import { datasourceId } from './mockDatasource';
 
 export const sliceId = 18;
@@ -35,7 +36,7 @@ export default {
     form_data: {
       adhoc_filters: [],
       datasource: datasourceId,
-      viz_type: 'pie',
+      viz_type: VizType.Pie,
       slice_id: sliceId,
       slice_name: 'Genders',
       granularity_sqla: undefined,
diff --git a/superset-frontend/spec/fixtures/mockExploreFormData.ts b/superset-frontend/spec/fixtures/mockExploreFormData.ts
index 2ab7303597c50..3509af2ddb1dd 100644
--- a/superset-frontend/spec/fixtures/mockExploreFormData.ts
+++ b/superset-frontend/spec/fixtures/mockExploreFormData.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { JsonObject } from '@superset-ui/core';
+import { JsonObject, VizType } from '@superset-ui/core';
 
 export const getExploreFormData = (overrides: JsonObject = {}) => ({
   adhoc_filters: [
@@ -82,6 +82,6 @@ export const getExploreFormData = (overrides: JsonObject = {}) => ({
   },
   slice_id: 46,
   time_range: '100 years ago : now',
-  viz_type: 'pie',
+  viz_type: VizType.Pie,
   ...overrides,
 });
diff --git a/superset-frontend/spec/fixtures/mockSliceEntities.js b/superset-frontend/spec/fixtures/mockSliceEntities.js
index 1a7bdad02429f..809989b0e71bb 100644
--- a/superset-frontend/spec/fixtures/mockSliceEntities.js
+++ b/superset-frontend/spec/fixtures/mockSliceEntities.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { datasourceId } from 'spec/fixtures/mockDatasource';
-import { DatasourceType } from '@superset-ui/core';
+import { DatasourceType, VizType } from '@superset-ui/core';
 import { sliceId } from './mockChartQueries';
 
 export const filterId = 127;
@@ -31,7 +31,7 @@ export const sliceEntitiesForChart = {
       slice_name: 'Genders',
       form_data: {
         slice_id: sliceId,
-        viz_type: 'pie',
+        viz_type: VizType.Pie,
         row_limit: 50000,
         metric: 'sum__num',
         since: '100 years ago',
@@ -46,7 +46,7 @@ export const sliceEntitiesForChart = {
         compare_suffix: 'o10Y',
         datasource: datasourceId,
       },
-      viz_type: 'pie',
+      viz_type: VizType.Pie,
       datasource: datasourceId,
       description: '',
       description_markdown: '',
@@ -98,7 +98,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20128%7D',
       slice_name: "World's Population",
       form_data: {},
-      viz_type: 'big_number',
+      viz_type: VizType.BigNumber,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -118,7 +118,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20129%7D',
       slice_name: 'Most Populated Countries',
       form_data: {},
-      viz_type: 'table',
+      viz_type: VizType.Table,
       datasource: '2__table',
       description: '',
       description_markdown: 'dd',
@@ -139,7 +139,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20130%7D',
       slice_name: 'Growth Rate',
       form_data: {},
-      viz_type: 'line',
+      viz_type: VizType.LegacyLine,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -160,7 +160,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20131%7D',
       slice_name: '% Rural',
       form_data: {},
-      viz_type: 'world_map',
+      viz_type: VizType.WorldMap,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -181,7 +181,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20132%7D',
       slice_name: 'Life Expectancy VS Rural %',
       form_data: {},
-      viz_type: 'bubble',
+      viz_type: VizType.LegacyBubble,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -202,7 +202,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20133%7D',
       slice_name: 'Rural Breakdown',
       form_data: {},
-      viz_type: 'sunburst_v2',
+      viz_type: VizType.Sunburst,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -223,7 +223,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20134%7D',
       slice_name: "World's Pop Growth",
       form_data: {},
-      viz_type: 'area',
+      viz_type: VizType.LegacyArea,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -244,7 +244,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20135%7D',
       slice_name: 'Box plot',
       form_data: {},
-      viz_type: 'box_plot',
+      viz_type: VizType.BoxPlot,
       datasource: '2__table',
       description: '',
       description_markdown: '',
@@ -265,7 +265,7 @@ export const sliceEntitiesForDashboard = {
       slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20136%7D',
       slice_name: 'Treemap',
       form_data: {},
-      viz_type: 'treemap_v2',
+      viz_type: VizType.Treemap,
       datasource: '2__table',
       description: '',
       description_markdown: '',
diff --git a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
index d7b73a7a4b989..df19befadb724 100644
--- a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useSelector, useDispatch } from 'react-redux';
-import { t, JsonObject } from '@superset-ui/core';
+import { t, JsonObject, VizType } from '@superset-ui/core';
 import {
   createCtasDatasource,
   addInfoToast,
@@ -60,7 +60,7 @@ const ExploreCtasResultsButton = ({
           datasource: `${data.table_id}__table`,
           metrics: ['count'],
           groupby: [],
-          viz_type: 'table',
+          viz_type: VizType.Table,
           since: '100 years ago',
           all_columns: [],
           row_limit: 1000,
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
index e2277408f3c39..4cb654cf9e2b6 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
@@ -32,6 +32,7 @@ import {
   JsonObject,
   QueryResponse,
   QueryFormData,
+  VizType,
 } from '@superset-ui/core';
 import { useSelector, useDispatch } from 'react-redux';
 import moment from 'moment';
@@ -159,7 +160,7 @@ export const SaveDatasetModal = ({
   formData = {},
 }: SaveDatasetModalProps) => {
   const defaultVizType = useSelector<SqlLabRootState, string>(
-    state => state.common?.conf?.DEFAULT_VIZ_TYPE || 'table',
+    state => state.common?.conf?.DEFAULT_VIZ_TYPE || VizType.Table,
   );
 
   const getDefaultDatasetName = () =>
@@ -217,7 +218,7 @@ export const SaveDatasetModal = ({
       postFormData(datasetToOverwrite.datasetid, 'table', {
         ...formDataWithDefaults,
         datasource: `${datasetToOverwrite.datasetid}__table`,
-        ...(defaultVizType === 'table' && {
+        ...(defaultVizType === VizType.Table && {
           all_columns: datasource?.columns?.map(column => column.column_name),
         }),
       }),
@@ -304,7 +305,7 @@ export const SaveDatasetModal = ({
         postFormData(data.id, 'table', {
           ...formDataWithDefaults,
           datasource: `${data.id}__table`,
-          ...(defaultVizType === 'table' && {
+          ...(defaultVizType === VizType.Table && {
             all_columns: selectedColumns.map(column => column.column_name),
           }),
         }),
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
index c405493c5e29e..c06857d556dea 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, VizType } from '@superset-ui/core';
 import { render, screen } from 'spec/helpers/testing-library';
 import { renderHook } from '@testing-library/react-hooks';
 import mockState from 'spec/fixtures/mockState';
@@ -48,7 +48,7 @@ const setup = ({
   const { result } = renderHook(() =>
     useContextMenu(
       sliceId,
-      { datasource: '1__table', viz_type: 'pie' },
+      { datasource: '1__table', viz_type: VizType.Pie },
       onSelection,
       displayedItems,
       additionalConfig,
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
index df228104cb382..d93e30a107b13 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -27,6 +27,7 @@ import {
   isFeatureEnabled,
   FeatureFlag,
   getChartMetadataRegistry,
+  VizType,
 } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils';
 import { EmptyStateBig, EmptyStateSmall } from 'src/components/EmptyState';
@@ -280,7 +281,7 @@ class ChartRenderer extends Component {
     // to each one of them.
     const snakeCaseVizType = snakeCase(vizType);
     const chartClassName =
-      vizType === 'table'
+      vizType === VizType.Table
         ? `superset-chart-${snakeCaseVizType}`
         : snakeCaseVizType;
 
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.test.jsx b/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
index 12556eef775f0..13ba818d3c595 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
@@ -17,7 +17,11 @@
  * under the License.
  */
 import { render } from 'spec/helpers/testing-library';
-import { ChartMetadata, getChartMetadataRegistry } from '@superset-ui/core';
+import {
+  ChartMetadata,
+  getChartMetadataRegistry,
+  VizType,
+} from '@superset-ui/core';
 import ChartRenderer from 'src/components/Chart/ChartRenderer';
 import { ChartSource } from 'src/types/ChartSource';
 
@@ -40,7 +44,7 @@ const requiredProps = {
   latestQueryFormData: {
     testControl: 'bar',
   },
-  vizType: 'table',
+  vizType: VizType.Table,
   source: ChartSource.Dashboard,
 };
 
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
index cf1c586f8e1b5..c64ed30e810d8 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.test.tsx
@@ -22,7 +22,7 @@ import { render, screen, within } from 'spec/helpers/testing-library';
 import setupPlugins from 'src/setup/setupPlugins';
 import { getMockStoreWithNativeFilters } from 'spec/fixtures/mockStore';
 import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
-import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
+import { BinaryQueryObjectFilterClause, VizType } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import DrillDetailMenuItems, {
   DrillDetailMenuItemsProps,
@@ -46,12 +46,12 @@ const { id: defaultChartId, form_data: defaultFormData } =
 const { slice_name: chartName } = defaultFormData;
 const unsupportedChartFormData = {
   ...defaultFormData,
-  viz_type: 'dist_bar',
+  viz_type: VizType.DistBar,
 };
 
 const noDimensionsFormData = {
   ...defaultFormData,
-  viz_type: 'table',
+  viz_type: VizType.Table,
   query_mode: 'raw',
 };
 
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
index 67f9b095ba31b..1677964c250d7 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, VizType } from '@superset-ui/core';
 import userEvent from '@testing-library/user-event';
 import { act, render, screen, within } from 'spec/helpers/testing-library';
 import AddSliceCard from './AddSliceCard';
@@ -29,7 +29,7 @@ jest.mock('src/components/DynamicPlugins', () => ({
 }));
 
 const mockedProps = {
-  visType: 'table',
+  visType: VizType.Table,
   sliceName: '-',
 };
 
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx b/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx
index 6dc0023b0cb8e..fc41dee41bb0e 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx
@@ -18,7 +18,7 @@
  */
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { getExtensionsRegistry } from '@superset-ui/core';
+import { getExtensionsRegistry, VizType } from '@superset-ui/core';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import SliceHeader from '.';
@@ -129,12 +129,12 @@ const createProps = (overrides: any = {}) => ({
       row_limit: 10000,
       show_legend: false,
       time_range: 'No filter',
-      viz_type: 'dist_bar',
+      viz_type: VizType.DistBar,
       x_ticks_layout: 'auto',
       y_axis_format: 'SMART_NUMBER',
       slice_id: 312,
     },
-    viz_type: 'dist_bar',
+    viz_type: VizType.DistBar,
     datasource: '58__table',
     description: '',
     description_markeddown: '',
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
index cca28d4e45914..ca28ddda1847e 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
@@ -20,7 +20,7 @@
 import { KeyboardEvent, ReactElement } from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'spec/helpers/testing-library';
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, VizType } from '@superset-ui/core';
 import mockState from 'spec/fixtures/mockState';
 import { Menu } from 'src/components/Menu';
 import SliceHeaderControls, {
@@ -41,7 +41,7 @@ jest.mock('src/components/Dropdown', () => {
   };
 });
 
-const createProps = (viz_type = 'sunburst_v2') =>
+const createProps = (viz_type = VizType.Sunburst) =>
   ({
     addDangerToast: jest.fn(),
     addSuccessToast: jest.fn(),
@@ -63,7 +63,7 @@ const createProps = (viz_type = 'sunburst_v2') =>
         adhoc_filters: [],
         color_scheme: 'supersetColors',
         datasource: '58__table',
-        ...(viz_type === 'sunburst_v2'
+        ...(viz_type === VizType.Sunburst
           ? { columns: ['product_category', 'clinical_stage'] }
           : { groupby: ['product_category', 'clinical_stage'] }),
         linear_color_scheme: 'schemeYlOrBr',
@@ -99,7 +99,11 @@ const createProps = (viz_type = 'sunburst_v2') =>
     chartStatus: 'rendered',
     showControls: true,
     supersetCanShare: true,
-    formData: { slice_id: 1, datasource: '58__table', viz_type: 'sunburst_v2' },
+    formData: {
+      slice_id: 1,
+      datasource: '58__table',
+      viz_type: VizType.Sunburst,
+    },
     exploreUrl: '/explore',
   }) as SliceHeaderControlsProps;
 
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 5f8eaa7a9fe22..bb94a756a8a2e 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -41,6 +41,7 @@ import {
   t,
   useTheme,
   ensureIsArray,
+  VizType,
 } from '@superset-ui/core';
 import { useSelector } from 'react-redux';
 import {
@@ -689,8 +690,8 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
     supersetCanShare = false,
     isCached = [],
   } = props;
-  const isTable = slice.viz_type === 'table';
-  const isPivotTable = slice.viz_type === 'pivot_table_v2';
+  const isTable = slice.viz_type === VizType.Table;
+  const isPivotTable = slice.viz_type === VizType.PivotTable;
   const cachedWhen = (cachedDttm || []).map(itemCachedDttm =>
     moment.utc(itemCachedDttm).fromNow(),
   );
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
index 9efbb8ae3d08d..e54dac7570f58 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { fireEvent, render } from 'spec/helpers/testing-library';
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, VizType } from '@superset-ui/core';
 
 import Chart from 'src/dashboard/components/gridComponents/Chart';
 import * as exploreUtils from 'src/explore/exploreUtils';
@@ -42,7 +42,7 @@ const props = {
     ...sliceEntities.slices[queryId],
     description_markeddown: 'markdown',
     owners: [],
-    viz_type: 'table',
+    viz_type: VizType.Table,
   },
   sliceName: sliceEntities.slices[queryId].slice_name,
   timeout: 60,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils.test.ts
index ee59b8d622259..54297a2c8d710 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils.test.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils.test.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Layout } from 'src/dashboard/types';
+import { VizType } from '@superset-ui/core';
 import { buildTree } from './utils';
 
 // The types defined for Layout and sub elements is not compatible with the data we get back fro a real dashboard layout
@@ -399,7 +400,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994590,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         slice_id: 78,
         url_params: {},
         granularity_sqla: 'year',
@@ -640,7 +641,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         slice_id: 78,
         url_params: {},
         granularity_sqla: 'year',
@@ -683,7 +684,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994633,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'heatmap',
+        viz_type: VizType.LegacyHeatmap,
         slice_id: 93,
         url_params: {},
         granularity_sqla: 'year',
@@ -732,7 +733,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
           errors: [],
           form_data: {
             datasource: '20__table',
-            viz_type: 'heatmap',
+            viz_type: VizType.LegacyHeatmap,
             slice_id: 93,
             url_params: {},
             granularity_sqla: 'year',
@@ -2841,7 +2842,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'heatmap',
+        viz_type: VizType.LegacyHeatmap,
         slice_id: 93,
         url_params: {},
         granularity_sqla: 'year',
@@ -2885,7 +2886,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'line',
+        viz_type: VizType.LegacyLine,
         slice_id: 95,
         url_params: {
           preselect_filters:
@@ -2988,7 +2989,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994566,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'area',
+        viz_type: VizType.LegacyArea,
         slice_id: 103,
         url_params: {
           preselect_filters:
@@ -3067,7 +3068,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
           errors: [],
           form_data: {
             datasource: '20__table',
-            viz_type: 'area',
+            viz_type: VizType.LegacyArea,
             slice_id: 103,
             url_params: {
               preselect_filters:
@@ -16265,7 +16266,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'area',
+        viz_type: VizType.LegacyArea,
         slice_id: 103,
         url_params: {
           preselect_filters:
@@ -16388,7 +16389,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994648,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'dist_bar',
+        viz_type: VizType.DistBar,
         slice_id: 113,
         url_params: {},
         granularity_sqla: 'year',
@@ -16535,7 +16536,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
           errors: [],
           form_data: {
             datasource: '20__table',
-            viz_type: 'dist_bar',
+            viz_type: VizType.DistBar,
             slice_id: 113,
             url_params: {},
             granularity_sqla: 'year',
@@ -17078,7 +17079,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'dist_bar',
+        viz_type: VizType.DistBar,
         slice_id: 113,
         url_params: {},
         granularity_sqla: 'year',
@@ -17222,7 +17223,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'dist_bar',
+        viz_type: VizType.DistBar,
         slice_id: 120,
         url_params: {
           preselect_filters:
@@ -17408,7 +17409,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994604,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'pie',
+        viz_type: VizType.Pie,
         slice_id: 123,
         url_params: {},
         granularity_sqla: 'year',
@@ -17589,7 +17590,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'pie',
+        viz_type: VizType.Pie,
         slice_id: 123,
         url_params: {},
         granularity_sqla: 'year',
@@ -17661,7 +17662,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       chartUpdateStartTime: 1673046994618,
       latestQueryFormData: {
         datasource: '20__table',
-        viz_type: 'treemap_v2',
+        viz_type: VizType.Treemap,
         slice_id: 125,
         url_params: {},
         granularity_sqla: 'year',
@@ -17698,7 +17699,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
           errors: [],
           form_data: {
             datasource: '20__table',
-            viz_type: 'treemap_v2',
+            viz_type: VizType.Treemap,
             slice_id: 125,
             url_params: {},
             granularity_sqla: 'year',
@@ -17787,7 +17788,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'treemap_v2',
+        viz_type: VizType.Treemap,
         slice_id: 125,
         url_params: {},
         granularity_sqla: 'year',
@@ -17870,7 +17871,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'treemap_v2',
+        viz_type: VizType.Treemap,
         slice_id: 131,
         url_params: {
           preselect_filters:
@@ -17961,7 +17962,7 @@ describe('Ensure buildTree does not throw runtime errors when encountering an in
       lastRendered: 0,
       form_data: {
         datasource: '20__table',
-        viz_type: 'table',
+        viz_type: VizType.Table,
         slice_id: 132,
         url_params: {},
         granularity_sqla: 'year',
diff --git a/superset-frontend/src/dashboard/util/crossFilters.test.ts b/superset-frontend/src/dashboard/util/crossFilters.test.ts
index 96281ee22abed..07e8064e7d00e 100644
--- a/superset-frontend/src/dashboard/util/crossFilters.test.ts
+++ b/superset-frontend/src/dashboard/util/crossFilters.test.ts
@@ -56,7 +56,7 @@ const CHARTS = {
     id: 1,
     form_data: {
       datasource: '2__table',
-      viz_type: 'echarts_timeseries_line',
+      viz_type: core.VizType.Line,
       slice_id: 1,
       color_scheme: 'supersetColors',
     },
@@ -68,7 +68,7 @@ const CHARTS = {
     latestQueryFormData: {},
     sliceFormData: {
       datasource: '2__table',
-      viz_type: 'echarts_timeseries_line',
+      viz_type: core.VizType.Line,
     },
     queryController: null,
     queriesResponse: [{}],
@@ -79,7 +79,7 @@ const CHARTS = {
     form_data: {
       color_scheme: 'supersetColors',
       datasource: '2__table',
-      viz_type: 'echarts_timeseries_line',
+      viz_type: core.VizType.Line,
       slice_id: 2,
     },
     chartAlert: null,
@@ -90,7 +90,7 @@ const CHARTS = {
     latestQueryFormData: {},
     sliceFormData: {
       datasource: '2__table',
-      viz_type: 'echarts_timeseries_line',
+      viz_type: core.VizType.Line,
     },
     queryController: null,
     queriesResponse: [{}],
@@ -266,7 +266,7 @@ test('Recalculate charts in global filter scope when charts change', () => {
           form_data: {
             slice_id: 3,
             datasource: '3__table',
-            viz_type: 'echarts_timeseries_line',
+            viz_type: core.VizType.Line,
             color_scheme: 'supersetColors',
           },
           chartAlert: null,
@@ -277,7 +277,7 @@ test('Recalculate charts in global filter scope when charts change', () => {
           latestQueryFormData: {},
           sliceFormData: {
             datasource: '3__table',
-            viz_type: 'echarts_timeseries_line',
+            viz_type: core.VizType.Line,
           },
           queryController: null,
           queriesResponse: [{}],
diff --git a/superset-frontend/src/explore/actions/hydrateExplore.test.ts b/superset-frontend/src/explore/actions/hydrateExplore.test.ts
index 7f363adef6fd6..549474ef7f2c8 100644
--- a/superset-frontend/src/explore/actions/hydrateExplore.test.ts
+++ b/superset-frontend/src/explore/actions/hydrateExplore.test.ts
@@ -49,14 +49,14 @@ test('creates hydrate action from initial data', () => {
               datasource: '8__table',
               slice_id: 371,
               url_params: undefined,
-              viz_type: 'table',
+              viz_type: VizType.Table,
             },
             sliceFormData: {
               cache_timeout: undefined,
               datasource: '8__table',
               slice_id: 371,
               url_params: undefined,
-              viz_type: 'table',
+              viz_type: VizType.Table,
             },
             queryController: null,
             queriesResponse: null,
@@ -122,14 +122,14 @@ test('creates hydrate action with existing state', () => {
               datasource: '8__table',
               slice_id: 371,
               url_params: undefined,
-              viz_type: 'table',
+              viz_type: VizType.Table,
             },
             sliceFormData: {
               cache_timeout: undefined,
               datasource: '8__table',
               slice_id: 371,
               url_params: undefined,
-              viz_type: 'table',
+              viz_type: VizType.Table,
             },
             queryController: null,
             queriesResponse: null,
diff --git a/superset-frontend/src/explore/actions/hydrateExplore.ts b/superset-frontend/src/explore/actions/hydrateExplore.ts
index ded9d04544725..2ee46c1e93eb6 100644
--- a/superset-frontend/src/explore/actions/hydrateExplore.ts
+++ b/superset-frontend/src/explore/actions/hydrateExplore.ts
@@ -33,6 +33,7 @@ import {
   getSequentialSchemeRegistry,
   NO_TIME_RANGE,
   QueryFormColumn,
+  VizType,
 } from '@superset-ui/core';
 import {
   getFormDataFromControls,
@@ -67,7 +68,7 @@ export const hydrateExplore =
     const initialSlice = slice ?? fallbackSlice;
     const initialFormData = form_data ?? initialSlice?.form_data;
     if (!initialFormData.viz_type) {
-      const defaultVizType = common?.conf.DEFAULT_VIZ_TYPE || 'table';
+      const defaultVizType = common?.conf.DEFAULT_VIZ_TYPE || VizType.Table;
       initialFormData.viz_type =
         getUrlParam(URL_PARAMS.vizType) || defaultVizType;
     }
diff --git a/superset-frontend/src/explore/actions/saveModalActions.test.ts b/superset-frontend/src/explore/actions/saveModalActions.test.ts
index 0368693f856dd..d7a9e3fb4a3f1 100644
--- a/superset-frontend/src/explore/actions/saveModalActions.test.ts
+++ b/superset-frontend/src/explore/actions/saveModalActions.test.ts
@@ -24,6 +24,7 @@ import {
   DatasourceType,
   QueryFormData,
   SimpleAdhocFilter,
+  VizType,
 } from '@superset-ui/core';
 import {
   createDashboard,
@@ -470,14 +471,14 @@ describe('getSlicePayload', () => {
   const sliceName = 'Test Slice';
   const formDataWithNativeFilters = {
     datasource: `${datasourceId}__${datasourceType}`,
-    viz_type: 'pie',
+    viz_type: VizType.Pie,
     adhoc_filters: [],
   };
   const dashboards = [5];
   const owners = [0];
   const formDataFromSlice: QueryFormData = {
     datasource: `${datasourceId}__${datasourceType}`,
-    viz_type: 'pie',
+    viz_type: VizType.Pie,
     adhoc_filters: [
       {
         clause: 'WHERE',
@@ -602,7 +603,7 @@ describe('getSlicePayload', () => {
 
     const formDataWithAdhocFiltersWithExtra: QueryFormData = {
       ...formDataWithNativeFilters,
-      viz_type: 'mixed_timeseries',
+      viz_type: VizType.MixedTimeseries,
       adhoc_filters: [
         {
           clause: 'WHERE',
@@ -649,7 +650,7 @@ describe('getSlicePayload', () => {
 
     const formDataWithAdhocFiltersWithExtra: QueryFormData = {
       ...formDataWithNativeFilters,
-      viz_type: 'mixed_timeseries',
+      viz_type: VizType.MixedTimeseries,
       adhoc_filters: [
         {
           clause: 'WHERE',
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx
index a2cb3156cbe61..4b5fd56437404 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx
@@ -24,7 +24,7 @@ import {
   waitFor,
 } from 'spec/helpers/testing-library';
 import { exploreActions } from 'src/explore/actions/exploreActions';
-import { ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { ChartMetadata, ChartPlugin, VizType } from '@superset-ui/core';
 import { ResultsPaneOnDashboard } from '../components';
 import { createResultsPaneOnDashboardProps } from './fixture';
 
@@ -162,11 +162,11 @@ describe('ResultsPaneOnDashboard', () => {
       metadata,
       Chart: FakeChart,
     });
-    plugin.configure({ key: 'mixed_timeseries' }).register();
+    plugin.configure({ key: VizType.MixedTimeseries }).register();
 
     const props = createResultsPaneOnDashboardProps({
       sliceId: 196,
-      vizType: 'mixed_timeseries',
+      vizType: VizType.MixedTimeseries,
     });
     const { findByText } = render(<ResultsPaneOnDashboard {...props} />, {
       useRedux: true,
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
index c09419e7d0c0e..0907dcc0896b6 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/test/fixture.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { ReactElement } from 'react';
-import { DatasourceType } from '@superset-ui/core';
+import { DatasourceType, VizType } from '@superset-ui/core';
 import { exploreActions } from 'src/explore/actions/exploreActions';
 import { ChartStatus } from 'src/explore/types';
 import {
@@ -27,7 +27,7 @@ import {
 } from '../types';
 
 const queryFormData = {
-  viz_type: 'heatmap',
+  viz_type: VizType.LegacyHeatmap,
   datasource: '34__table',
   slice_id: 456,
   url_params: {},
@@ -97,7 +97,7 @@ export const createSamplesPaneProps = ({
 export const createResultsPaneOnDashboardProps = ({
   sliceId,
   errorMessage,
-  vizType = 'table',
+  vizType = VizType.Table,
   queryForce = false,
   isRequest = true,
 }: {
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
index 8196b1e1850c7..bba5504e1a4c6 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
@@ -25,7 +25,7 @@ import * as chartAction from 'src/components/Chart/chartAction';
 import * as saveModalActions from 'src/explore/actions/saveModalActions';
 import * as downloadAsImage from 'src/utils/downloadAsImage';
 import * as exploreUtils from 'src/explore/exploreUtils';
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, VizType } from '@superset-ui/core';
 import ExploreHeader from '.';
 
 const chartEndpoint = 'glob:*api/v1/chart/*';
@@ -40,7 +40,7 @@ const createProps = (additionalProps = {}) => ({
   chart: {
     id: 1,
     latestQueryFormData: {
-      viz_type: 'histogram',
+      viz_type: VizType.LegacyHistogram,
       datasource: '49__table',
       slice_id: 318,
       url_params: {},
@@ -80,7 +80,7 @@ const createProps = (additionalProps = {}) => ({
       slice_id: 318,
       time_range: 'No filter',
       url_params: {},
-      viz_type: 'histogram',
+      viz_type: VizType.LegacyHistogram,
       x_axis_label: 'age',
       y_axis_label: 'count',
     },
@@ -423,7 +423,7 @@ describe('Additional actions tests', () => {
 
     test('Should not export to pivoted CSV if canDownloadCSV=false and viz_type=pivot_table_v2', async () => {
       const props = createProps();
-      props.chart.latestQueryFormData.viz_type = 'pivot_table_v2';
+      props.chart.latestQueryFormData.viz_type = VizType.PivotTable;
       render(<ExploreHeader {...props} />, {
         useRedux: true,
       });
@@ -440,7 +440,7 @@ describe('Additional actions tests', () => {
     test('Should export to pivoted CSV if canDownloadCSV=true and viz_type=pivot_table_v2', async () => {
       const props = createProps();
       props.canDownload = true;
-      props.chart.latestQueryFormData.viz_type = 'pivot_table_v2';
+      props.chart.latestQueryFormData.viz_type = VizType.PivotTable;
       render(<ExploreHeader {...props} />, {
         useRedux: true,
       });
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
index 2fa024175f51c..ff9712e3cbd65 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
@@ -19,7 +19,11 @@
 import { isValidElement } from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'spec/helpers/testing-library';
-import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
+import {
+  getChartMetadataRegistry,
+  ChartMetadata,
+  VizType,
+} from '@superset-ui/core';
 import ChartContainer from 'src/explore/components/ExploreChartPanel';
 import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 
@@ -32,11 +36,11 @@ const createProps = (overrides = {}) => ({
   containerId: 'foo',
   width: '500px',
   isStarred: false,
-  vizType: 'histogram',
+  vizType: VizType.LegacyHistogram,
   chart: {
     id: 1,
     latestQueryFormData: {
-      viz_type: 'histogram',
+      viz_type: VizType.LegacyHistogram,
       datasource: '49__table',
       slice_id: 318,
       url_params: {},
@@ -70,7 +74,7 @@ describe('ChartContainer', () => {
       chart: { chartStatus: 'rendered', queriesResponse: [{}] },
     });
     getChartMetadataRegistry().registerValue(
-      'histogram',
+      VizType.LegacyHistogram,
       new ChartMetadata({
         name: 'fake table',
         thumbnail: '.png',
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
index 7a150373dafe2..4576e1a118330 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/ExploreViewContainer.test.tsx
@@ -21,6 +21,7 @@ import {
   getChartControlPanelRegistry,
   getChartMetadataRegistry,
   ChartMetadata,
+  VizType,
 } from '@superset-ui/core';
 import { QUERY_MODE_REQUISITES } from 'src/explore/constants';
 import { MemoryRouter, Route } from 'react-router-dom';
@@ -32,7 +33,7 @@ const reduxState = {
   explore: {
     controls: {
       datasource: { value: '1__table' },
-      viz_type: { value: 'table' },
+      viz_type: { value: VizType.Table },
     },
     datasource: {
       id: 1,
diff --git a/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
index a9855dc0e5813..7e03f843abff8 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/PropertiesModal.test.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
@@ -78,7 +79,7 @@ fetchMock.get('glob:*/api/v1/chart/318', {
       params:
         '{"adhoc_filters": [], "all_columns_x": ["age"], "color_scheme": "supersetColors", "datasource": "42__table", "granularity_sqla": "time_start", "groupby": null, "label_colors": {}, "link_length": "25", "queryFields": {"groupby": "groupby"}, "row_limit": 10000, "slice_id": 1380, "time_range": "No filter", "url_params": {}, "viz_type": "histogram", "x_axis_label": "age", "y_axis_label": "count"}',
       slice_name: 'Age distribution of respondents',
-      viz_type: 'histogram',
+      viz_type: VizType.LegacyHistogram,
     },
     show_columns: [
       'cache_timeout',
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
index 67c02dfbe931e..b1b1cbb34d0cf 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx
@@ -18,7 +18,11 @@
  */
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
-import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
+import {
+  getChartMetadataRegistry,
+  ChartMetadata,
+  VizType,
+} from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
 import setupColors from 'src/setup/setupColors';
 import { ANNOTATION_TYPES_METADATA } from './AnnotationTypes';
@@ -26,7 +30,7 @@ import AnnotationLayer from './AnnotationLayer';
 
 const defaultProps = {
   value: '',
-  vizType: 'table',
+  vizType: VizType.Table,
   annotationType: ANNOTATION_TYPES_METADATA.FORMULA.value,
 };
 
@@ -42,7 +46,7 @@ const withIdResult = {
         groupby: ['country'],
       },
     }),
-    viz_type: 'line',
+    viz_type: VizType.LegacyLine,
   },
 };
 
@@ -56,7 +60,7 @@ beforeAll(() => {
   });
 
   fetchMock.get(chartApiRoute, {
-    result: [{ id: 'a', slice_name: 'Chart A', viz_type: 'table' }],
+    result: [{ id: 'a', slice_name: 'Chart A', viz_type: VizType.Table }],
   });
 
   fetchMock.get(chartApiWithIdRoute, withIdResult);
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
index e91e187ac0459..4930332ae61c1 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Preset } from '@superset-ui/core';
+import { Preset, VizType } from '@superset-ui/core';
 import {
   render,
   cleanup,
@@ -48,24 +48,26 @@ class MainPreset extends Preset {
     super({
       name: 'Legacy charts',
       plugins: [
-        new TableChartPlugin().configure({ key: 'table' }),
-        new BigNumberTotalChartPlugin().configure({ key: 'big_number_total' }),
+        new TableChartPlugin().configure({ key: VizType.Table }),
+        new BigNumberTotalChartPlugin().configure({
+          key: VizType.BigNumberTotal,
+        }),
         new EchartsTimeseriesLineChartPlugin().configure({
-          key: 'echarts_timeseries_line',
+          key: VizType.Line,
         }),
         new EchartsAreaChartPlugin().configure({
-          key: 'echarts_area',
+          key: VizType.Area,
         }),
         new EchartsTimeseriesBarChartPlugin().configure({
-          key: 'echarts_timeseries_bar',
+          key: VizType.Bar,
         }),
-        new EchartsPieChartPlugin().configure({ key: 'pie' }),
+        new EchartsPieChartPlugin().configure({ key: VizType.Pie }),
         new EchartsTimeseriesChartPlugin().configure({
-          key: 'echarts_timeseries',
+          key: VizType.Timeseries,
         }),
-        new TimeTableChartPlugin().configure({ key: 'time_table' }),
+        new TimeTableChartPlugin().configure({ key: VizType.TimeTable }),
         new EchartsMixedTimeseriesChartPlugin().configure({
-          key: 'mixed_timeseries',
+          key: VizType.MixedTimeseries,
         }),
       ],
     });
@@ -114,7 +116,7 @@ describe('VizTypeControl', () => {
   it('Fast viz switcher tiles render', async () => {
     const props = {
       ...defaultProps,
-      value: 'echarts_timeseries_line',
+      value: VizType.Line,
       isModalOpenInit: false,
     };
     await waitForRenderWrapper(props);
@@ -170,7 +172,7 @@ describe('VizTypeControl', () => {
       charts: {
         1: {
           latestQueryFormData: {
-            viz_type: 'line',
+            viz_type: VizType.LegacyLine,
           },
         },
       },
@@ -190,7 +192,7 @@ describe('VizTypeControl', () => {
   it('Change viz type on click', async () => {
     const props = {
       ...defaultProps,
-      value: 'echarts_timeseries_line',
+      value: VizType.Line,
       isModalOpenInit: false,
     };
     await waitForRenderWrapper(props);
@@ -250,8 +252,6 @@ describe('VizTypeControl', () => {
     expect(defaultProps.onChange).not.toHaveBeenCalled();
     userEvent.dblClick(within(visualizations).getByText('Line Chart'));
 
-    expect(defaultProps.onChange).toHaveBeenCalledWith(
-      'echarts_timeseries_line',
-    );
+    expect(defaultProps.onChange).toHaveBeenCalledWith(VizType.Line);
   });
 });
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
index 6e1201c8f8e9f..de8e5c7339470 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx
@@ -16,23 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { VizType } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { VizMeta } from './types';
 
 export const FEATURED_CHARTS: VizMeta[] = [
   {
-    name: 'echarts_timeseries_line',
+    name: VizType.Line,
     icon: <Icons.LineChartTile />,
   },
   {
-    name: 'echarts_timeseries_bar',
+    name: VizType.Bar,
     icon: <Icons.BarChartTile />,
   },
-  { name: 'echarts_area', icon: <Icons.AreaChartTile /> },
-  { name: 'table', icon: <Icons.TableChartTile /> },
+  { name: VizType.Area, icon: <Icons.AreaChartTile /> },
+  { name: VizType.Table, icon: <Icons.TableChartTile /> },
   {
-    name: 'big_number_total',
+    name: VizType.BigNumberTotal,
     icon: <Icons.BigNumberChartTile />,
   },
-  { name: 'pie', icon: <Icons.PieChartTile /> },
+  { name: VizType.Pie, icon: <Icons.PieChartTile /> },
 ];
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index 448836254cb41..f443ab750f4a2 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -25,6 +25,7 @@ import {
   styled,
   t,
   useTheme,
+  VizType,
 } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { Menu } from 'src/components/Menu';
@@ -70,7 +71,7 @@ const MENU_KEYS = {
   RUN_IN_SQL_LAB: 'run_in_sql_lab',
 };
 
-const VIZ_TYPES_PIVOTABLE = ['pivot_table_v2'];
+const VIZ_TYPES_PIVOTABLE = [VizType.PivotTable];
 
 export const MenuItemWithCheckboxContainer = styled.div`
   ${({ theme }) => css`
diff --git a/superset-frontend/src/explore/controlUtils/controlUtils.test.tsx b/superset-frontend/src/explore/controlUtils/controlUtils.test.tsx
index dc247f189ad69..7ee11dbaa08ee 100644
--- a/superset-frontend/src/explore/controlUtils/controlUtils.test.tsx
+++ b/superset-frontend/src/explore/controlUtils/controlUtils.test.tsx
@@ -59,7 +59,7 @@ describe('controlUtils', () => {
       description: null,
     },
     controls: {},
-    form_data: { datasource: '1__table', viz_type: 'table' },
+    form_data: { datasource: '1__table', viz_type: VizType.Table },
     common: {},
     slice: {
       slice_id: 1,
diff --git a/superset-frontend/src/explore/controlUtils/getFormDataFromDashboardContext.test.ts b/superset-frontend/src/explore/controlUtils/getFormDataFromDashboardContext.test.ts
index 28450d49c4539..64705d5228917 100644
--- a/superset-frontend/src/explore/controlUtils/getFormDataFromDashboardContext.test.ts
+++ b/superset-frontend/src/explore/controlUtils/getFormDataFromDashboardContext.test.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { JsonObject } from '@superset-ui/core';
+import { JsonObject, VizType } from '@superset-ui/core';
 import { getExploreFormData } from 'spec/fixtures/mockExploreFormData';
 import { getDashboardFormData } from 'spec/fixtures/mockDashboardFormData';
 import { getFormDataWithDashboardContext } from './getFormDataWithDashboardContext';
@@ -144,7 +144,7 @@ const getExpectedResultFormData = (overrides: JsonObject = {}) => ({
   },
   slice_id: 46,
   time_range: 'Last month',
-  viz_type: 'pie',
+  viz_type: VizType.Pie,
   label_colors: {
     Girls: '#FF69B4',
     Boys: '#ADD8E6',
diff --git a/superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts b/superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts
index 498c2161d90aa..09045373cb10d 100644
--- a/superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts
+++ b/superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts
@@ -23,6 +23,7 @@ import {
   getChartControlPanelRegistry,
   QueryFormData,
   TimeGranularity,
+  VizType,
 } from '@superset-ui/core';
 import TableChartPlugin from '@superset-ui/plugin-chart-table';
 import { BigNumberTotalChartPlugin } from '@superset-ui/plugin-chart-echarts';
@@ -61,7 +62,7 @@ const adhocMetricSimple: AdhocMetricSimple = {
 
 const tableVizFormData = {
   datasource: '30__table',
-  viz_type: 'table',
+  viz_type: VizType.Table,
   granularity_sqla: 'ds',
   time_grain_sqla: TimeGranularity.DAY,
   time_range: 'No filter',
@@ -378,7 +379,7 @@ describe('should collect control values and create SFD', () => {
 describe('should transform form_data between table and bigNumberTotal', () => {
   beforeAll(() => {
     getChartControlPanelRegistry().registerValue(
-      'big_number_total',
+      VizType.BigNumberTotal,
       new BigNumberTotalChartPlugin().controlPanel,
     );
     getChartControlPanelRegistry().registerValue(
@@ -391,27 +392,29 @@ describe('should transform form_data between table and bigNumberTotal', () => {
     // table -> bigNumberTotal
     const sfd = new StandardizedFormData(tableVizFormData);
     const { formData: bntFormData } = sfd.transform(
-      'big_number_total',
+      VizType.BigNumberTotal,
       tableVizStore,
     );
 
     // bigNumberTotal -> table
     const sfd2 = new StandardizedFormData(bntFormData);
-    expect(sfd2.has('big_number_total')).toBeTruthy();
+    expect(sfd2.has(VizType.BigNumberTotal)).toBeTruthy();
     expect(sfd2.has('table')).toBeTruthy();
-    expect(sfd2.get('big_number_total').viz_type).toBe('big_number_total');
-    expect(sfd2.get('table').viz_type).toBe('table');
+    expect(sfd2.get(VizType.BigNumberTotal).viz_type).toBe(
+      VizType.BigNumberTotal,
+    );
+    expect(sfd2.get('table').viz_type).toBe(VizType.Table);
   });
 
   test('transform', () => {
     // table -> bigNumberTotal
     const sfd = new StandardizedFormData(tableVizFormData);
     const { formData: bntFormData, controlsState: bntControlsState } =
-      sfd.transform('big_number_total', tableVizStore);
+      sfd.transform(VizType.BigNumberTotal, tableVizStore);
     expect(Object.keys(bntFormData).sort()).toEqual(
       [...Object.keys(bntControlsState), 'standardizedFormData'].sort(),
     );
-    expect(bntFormData.viz_type).toBe('big_number_total');
+    expect(bntFormData.viz_type).toBe(VizType.BigNumberTotal);
     expect(bntFormData.metric).toBe('count');
 
     // change control values on bigNumber
@@ -430,7 +433,7 @@ describe('should transform form_data between table and bigNumberTotal', () => {
     expect(Object.keys(tblFormData).sort()).toEqual(
       [...Object.keys(tblControlsState), 'standardizedFormData'].sort(),
     );
-    expect(tblFormData.viz_type).toBe('table');
+    expect(tblFormData.viz_type).toBe(VizType.Table);
     expect(tblFormData.metrics).toEqual([
       'sum(sales)',
       'avg(sales)',
@@ -444,7 +447,7 @@ describe('should transform form_data between table and bigNumberTotal', () => {
 describe('initial SFD between different datasource', () => {
   beforeAll(() => {
     getChartControlPanelRegistry().registerValue(
-      'big_number_total',
+      VizType.BigNumberTotal,
       new BigNumberTotalChartPlugin().controlPanel,
     );
     getChartControlPanelRegistry().registerValue(
@@ -457,7 +460,7 @@ describe('initial SFD between different datasource', () => {
     const sfd = new StandardizedFormData(tableVizFormData);
     // table -> big number
     const { formData: bntFormData, controlsState: bntControlsState } =
-      sfd.transform('big_number_total', tableVizStore);
+      sfd.transform(VizType.BigNumberTotal, tableVizStore);
     const sfd2 = new StandardizedFormData(bntFormData);
     // big number -> table
     const { formData: tblFormData } = sfd2.transform('table', {
@@ -470,14 +473,14 @@ describe('initial SFD between different datasource', () => {
       tblFormData.standardizedFormData.memorizedFormData.map(
         (mfd: [string, QueryFormData][]) => mfd[0],
       ),
-    ).toEqual(['table', 'big_number_total']);
+    ).toEqual([VizType.Table, VizType.BigNumberTotal]);
     const newDatasourceFormData = { ...tblFormData, datasource: '20__table' };
     const newDatasourceSFD = new StandardizedFormData(newDatasourceFormData);
     expect(
       newDatasourceSFD
         .serialize()
         .memorizedFormData.map(([vizType]) => vizType),
-    ).toEqual(['table']);
+    ).toEqual([VizType.Table]);
     expect(newDatasourceSFD.get('table')).not.toHaveProperty(
       'standardizedFormData',
     );
diff --git a/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts b/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts
index f6f2344f62289..978a1e0768522 100644
--- a/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts
+++ b/superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.test.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { VizType } from '@superset-ui/core';
 import { getParsedExploreURLParams } from './getParsedExploreURLParams';
 
 const EXPLORE_BASE_URL = 'http://localhost:9000/explore/';
@@ -45,7 +46,7 @@ test('get datasource and viz type from form_data search param - url when creatin
     `${EXPLORE_BASE_URL}?form_data=%7B%22viz_type%22%3A%22big_number%22%2C%22datasource%22%3A%222__table%22%7D`,
   );
   expect(getParsedExploreURLParams().toString()).toEqual(
-    'viz_type=big_number&datasource_id=2&datasource_type=table',
+    `viz_type=${VizType.BigNumber}&datasource_id=2&datasource_type=table`,
   );
 });
 
diff --git a/superset-frontend/src/explore/fixtures.tsx b/superset-frontend/src/explore/fixtures.tsx
index 5b7cfd3b4a7ed..b459b5952abcd 100644
--- a/superset-frontend/src/explore/fixtures.tsx
+++ b/superset-frontend/src/explore/fixtures.tsx
@@ -114,7 +114,7 @@ export const exploreInitialData: ExplorePageInitialData = {
     datasource: '8__table',
     metric: 'count',
     slice_id: 371,
-    viz_type: 'table',
+    viz_type: VizType.Table,
   },
   slice: {
     cache_timeout: null,
@@ -126,7 +126,7 @@ export const exploreInitialData: ExplorePageInitialData = {
       datasource: '8__table',
       metric: 'count',
       slice_id: 371,
-      viz_type: 'table',
+      viz_type: VizType.Table,
     },
   },
   dataset: {
@@ -146,7 +146,7 @@ export const exploreInitialData: ExplorePageInitialData = {
 export const fallbackExploreInitialData: ExplorePageInitialData = {
   form_data: {
     datasource: '0__table',
-    viz_type: 'table',
+    viz_type: VizType.Table,
   },
   dataset: {
     id: 0,
diff --git a/superset-frontend/src/explore/store.js b/superset-frontend/src/explore/store.js
index 239884bcdedbb..9c2fa52127247 100644
--- a/superset-frontend/src/explore/store.js
+++ b/superset-frontend/src/explore/store.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 /* eslint camelcase: 0 */
-import { getChartControlPanelRegistry } from '@superset-ui/core';
+import { getChartControlPanelRegistry, VizType } from '@superset-ui/core';
 import { getAllControlsState, getFormDataFromControls } from './controlUtils';
 import { controls } from './controls';
 
@@ -42,7 +42,7 @@ export function getControlsState(state, inputFormData) {
   // Getting a list of active control names for the current viz
   const formData = { ...inputFormData };
   const vizType =
-    formData.viz_type || state.common?.conf.DEFAULT_VIZ_TYPE || 'table';
+    formData.viz_type || state.common?.conf.DEFAULT_VIZ_TYPE || VizType.Table;
 
   handleDeprecatedControls(formData);
   const controlsState = getAllControlsState(
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.test.tsx b/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
index f9a2ad869540e..d5c192a572fdc 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
@@ -95,7 +95,7 @@ const generateMockPayload = (dashboard = true) => {
     chart: {
       id: 1,
       slice_name: 'Test Chart',
-      viz_type: 'table',
+      viz_type: VizType.Table,
     },
   };
 };
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 36e4a86d6c976..291a8978511ef 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -34,6 +34,7 @@ import {
   SupersetClient,
   SupersetTheme,
   t,
+  VizType,
 } from '@superset-ui/core';
 import rison from 'rison';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
@@ -79,9 +80,9 @@ import { buildErrorTooltipMessage } from './buildErrorTooltipMessage';
 
 const TIMEOUT_MIN = 1;
 const TEXT_BASED_VISUALIZATION_TYPES = [
-  'pivot_table_v2',
+  VizType.PivotTable,
   'table',
-  'paired_ttest',
+  VizType.PairedTTest,
 ];
 
 export interface AlertReportModalProps {
diff --git a/superset-frontend/src/features/home/ChartTable.test.tsx b/superset-frontend/src/features/home/ChartTable.test.tsx
index 88c9d08aadb5b..79fe01e323c7f 100644
--- a/superset-frontend/src/features/home/ChartTable.test.tsx
+++ b/superset-frontend/src/features/home/ChartTable.test.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import { VizType } from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
 import { act } from 'react-dom/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -32,7 +33,7 @@ const mockCharts = [...new Array(3)].map((_, i) => ({
   id: i,
   slice_name: `cool chart ${i}`,
   url: 'url',
-  viz_type: 'bar',
+  viz_type: VizType.LegacyBar,
   datasource_title: `ds${i}`,
   thumbnail_url: '',
 }));
diff --git a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
index e149f8d6163ab..6b6850372f6cd 100644
--- a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
@@ -45,7 +45,7 @@ const defaultProps = {
   creationMethod: 'dashboards',
   chart: {
     sliceFormData: {
-      viz_type: 'table',
+      viz_type: VizType.Table,
     },
   },
 };
diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx
index 8843bc4835ca7..47f11dfa5bbef 100644
--- a/superset-frontend/src/features/reports/ReportModal/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/index.tsx
@@ -25,7 +25,12 @@ import {
   ChangeEvent,
 } from 'react';
 
-import { t, SupersetTheme, getClientErrorObject } from '@superset-ui/core';
+import {
+  t,
+  SupersetTheme,
+  getClientErrorObject,
+  VizType,
+} from '@superset-ui/core';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   addReport,
@@ -84,9 +89,9 @@ interface ReportProps {
 }
 
 const TEXT_BASED_VISUALIZATION_TYPES = [
-  'pivot_table_v2',
+  VizType.PivotTable,
   'table',
-  'paired_ttest',
+  VizType.PairedTTest,
 ];
 
 const INITIAL_STATE = {
diff --git a/superset-frontend/src/pages/Chart/Chart.test.tsx b/superset-frontend/src/pages/Chart/Chart.test.tsx
index f9eb9b2f4f03a..e0ccf6b72dd10 100644
--- a/superset-frontend/src/pages/Chart/Chart.test.tsx
+++ b/superset-frontend/src/pages/Chart/Chart.test.tsx
@@ -55,7 +55,7 @@ describe('ChartPage', () => {
   test('fetches metadata on mount', async () => {
     const exploreApiRoute = 'glob:*/api/v1/explore/*';
     const exploreFormData = getExploreFormData({
-      viz_type: 'table',
+      viz_type: VizType.Table,
       show_cell_bars: true,
     });
     fetchMock.get(exploreApiRoute, {
@@ -126,7 +126,7 @@ describe('ChartPage', () => {
     test('overrides the form_data with exploreFormData when location is updated', async () => {
       const dashboardFormData = {
         ...getDashboardFormData(),
-        viz_type: 'table',
+        viz_type: VizType.Table,
         show_cell_bars: true,
       };
       (getFormDataWithExtraFilters as jest.Mock).mockReturnValue(
@@ -134,7 +134,7 @@ describe('ChartPage', () => {
       );
       const exploreApiRoute = 'glob:*/api/v1/explore/*';
       const exploreFormData = getExploreFormData({
-        viz_type: 'table',
+        viz_type: VizType.Table,
         show_cell_bars: true,
       });
       fetchMock.get(exploreApiRoute, {
diff --git a/superset-frontend/src/pages/ChartList/ChartList.test.jsx b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
index 6e1c0728f0276..7b3c354b3dce8 100644
--- a/superset-frontend/src/pages/ChartList/ChartList.test.jsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
@@ -53,7 +53,7 @@ const mockCharts = [...new Array(3)].map((_, i) => ({
   id: i,
   slice_name: `cool chart ${i}`,
   url: 'url',
-  viz_type: 'bar',
+  viz_type: uiCore.VizType.LegacyBar,
   datasource_name: `ds${i}`,
   thumbnail_url: '/thumbnail',
 }));
diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js
index 72dc9151c3b8c..d9e88acc4d18b 100644
--- a/superset-frontend/src/visualizations/presets/MainPreset.js
+++ b/superset-frontend/src/visualizations/presets/MainPreset.js
@@ -81,6 +81,7 @@ import {
 import { PivotTableChartPlugin as PivotTableChartPluginV2 } from '@superset-ui/plugin-chart-pivot-table';
 import { HandlebarsChartPlugin } from '@superset-ui/plugin-chart-handlebars';
 import { FilterPlugins } from 'src/constants';
+import { VizType } from 'packages/superset-ui-core/src/chart/types/VizType';
 import TimeTableChartPlugin from '../TimeTable';
 
 export default class MainPreset extends Preset {
@@ -90,7 +91,7 @@ export default class MainPreset extends Preset {
     )
       ? [
           new BigNumberPeriodOverPeriodChartPlugin().configure({
-            key: 'pop_kpi',
+            key: VizType.BigNumberPeriodOverPeriod,
           }),
         ]
       : [];
@@ -99,71 +100,75 @@ export default class MainPreset extends Preset {
       name: 'Legacy charts',
       presets: [new DeckGLChartPreset()],
       plugins: [
-        new AreaChartPlugin().configure({ key: 'area' }),
-        new BarChartPlugin().configure({ key: 'bar' }),
-        new BigNumberChartPlugin().configure({ key: 'big_number' }),
-        new BigNumberTotalChartPlugin().configure({ key: 'big_number_total' }),
-        new EchartsBoxPlotChartPlugin().configure({ key: 'box_plot' }),
-        new BubbleChartPlugin().configure({ key: 'bubble' }),
-        new BulletChartPlugin().configure({ key: 'bullet' }),
-        new CalendarChartPlugin().configure({ key: 'cal_heatmap' }),
-        new ChordChartPlugin().configure({ key: 'chord' }),
-        new CompareChartPlugin().configure({ key: 'compare' }),
-        new CountryMapChartPlugin().configure({ key: 'country_map' }),
-        new DistBarChartPlugin().configure({ key: 'dist_bar' }),
-        new EventFlowChartPlugin().configure({ key: 'event_flow' }),
-        new EchartsFunnelChartPlugin().configure({ key: 'funnel' }),
-        new EchartsSankeyChartPlugin().configure({ key: 'sankey_v2' }),
-        new EchartsTreemapChartPlugin().configure({ key: 'treemap_v2' }),
-        new EchartsGaugeChartPlugin().configure({ key: 'gauge_chart' }),
-        new EchartsGraphChartPlugin().configure({ key: 'graph_chart' }),
-        new EchartsRadarChartPlugin().configure({ key: 'radar' }),
+        new AreaChartPlugin().configure({ key: VizType.LegacyArea }),
+        new BarChartPlugin().configure({ key: VizType.LegacyBar }),
+        new BigNumberChartPlugin().configure({ key: VizType.BigNumber }),
+        new BigNumberTotalChartPlugin().configure({
+          key: VizType.BigNumberTotal,
+        }),
+        new EchartsBoxPlotChartPlugin().configure({ key: VizType.BoxPlot }),
+        new BubbleChartPlugin().configure({ key: VizType.LegacyBubble }),
+        new BulletChartPlugin().configure({ key: VizType.Bullet }),
+        new CalendarChartPlugin().configure({ key: VizType.Calendar }),
+        new ChordChartPlugin().configure({ key: VizType.Chord }),
+        new CompareChartPlugin().configure({ key: VizType.Compare }),
+        new CountryMapChartPlugin().configure({ key: VizType.CountryMap }),
+        new DistBarChartPlugin().configure({ key: VizType.DistBar }),
+        new EventFlowChartPlugin().configure({ key: VizType.EventFlow }),
+        new EchartsFunnelChartPlugin().configure({ key: VizType.Funnel }),
+        new EchartsSankeyChartPlugin().configure({ key: VizType.Sankey }),
+        new EchartsTreemapChartPlugin().configure({ key: VizType.Treemap }),
+        new EchartsGaugeChartPlugin().configure({ key: VizType.Gauge }),
+        new EchartsGraphChartPlugin().configure({ key: VizType.Graph }),
+        new EchartsRadarChartPlugin().configure({ key: VizType.Radar }),
         new EchartsMixedTimeseriesChartPlugin().configure({
-          key: 'mixed_timeseries',
+          key: VizType.MixedTimeseries,
+        }),
+        new HeatmapChartPlugin().configure({ key: VizType.LegacyHeatmap }),
+        new HistogramChartPlugin().configure({ key: VizType.LegacyHistogram }),
+        new HorizonChartPlugin().configure({ key: VizType.Horizon }),
+        new LineChartPlugin().configure({ key: VizType.LegacyLine }),
+        new MapBoxChartPlugin().configure({ key: VizType.MapBox }),
+        new PairedTTestChartPlugin().configure({ key: VizType.PairedTTest }),
+        new ParallelCoordinatesChartPlugin().configure({
+          key: VizType.ParallelCoordinates,
         }),
-        new HeatmapChartPlugin().configure({ key: 'heatmap' }),
-        new HistogramChartPlugin().configure({ key: 'histogram' }),
-        new HorizonChartPlugin().configure({ key: 'horizon' }),
-        new LineChartPlugin().configure({ key: 'line' }),
-        new MapBoxChartPlugin().configure({ key: 'mapbox' }),
-        new PairedTTestChartPlugin().configure({ key: 'paired_ttest' }),
-        new ParallelCoordinatesChartPlugin().configure({ key: 'para' }),
-        new PartitionChartPlugin().configure({ key: 'partition' }),
-        new EchartsPieChartPlugin().configure({ key: 'pie' }),
-        new PivotTableChartPluginV2().configure({ key: 'pivot_table_v2' }),
-        new RoseChartPlugin().configure({ key: 'rose' }),
-        new SankeyChartPlugin().configure({ key: 'sankey' }),
-        new TableChartPlugin().configure({ key: 'table' }),
-        new TimePivotChartPlugin().configure({ key: 'time_pivot' }),
-        new TimeTableChartPlugin().configure({ key: 'time_table' }),
-        new WordCloudChartPlugin().configure({ key: 'word_cloud' }),
-        new WorldMapChartPlugin().configure({ key: 'world_map' }),
+        new PartitionChartPlugin().configure({ key: VizType.Partition }),
+        new EchartsPieChartPlugin().configure({ key: VizType.Pie }),
+        new PivotTableChartPluginV2().configure({ key: VizType.PivotTable }),
+        new RoseChartPlugin().configure({ key: VizType.Rose }),
+        new SankeyChartPlugin().configure({ key: VizType.LegacySankey }),
+        new TableChartPlugin().configure({ key: VizType.Table }),
+        new TimePivotChartPlugin().configure({ key: VizType.TimePivot }),
+        new TimeTableChartPlugin().configure({ key: VizType.TimeTable }),
+        new WordCloudChartPlugin().configure({ key: VizType.WordCloud }),
+        new WorldMapChartPlugin().configure({ key: VizType.WorldMap }),
         new EchartsAreaChartPlugin().configure({
-          key: 'echarts_area',
+          key: VizType.Area,
         }),
         new EchartsTimeseriesChartPlugin().configure({
-          key: 'echarts_timeseries',
+          key: VizType.Timeseries,
         }),
         new EchartsTimeseriesBarChartPlugin().configure({
-          key: 'echarts_timeseries_bar',
+          key: VizType.Bar,
         }),
         new EchartsTimeseriesLineChartPlugin().configure({
-          key: 'echarts_timeseries_line',
+          key: VizType.Line,
         }),
         new EchartsTimeseriesSmoothLineChartPlugin().configure({
-          key: 'echarts_timeseries_smooth',
+          key: VizType.SmoothLine,
         }),
         new EchartsTimeseriesScatterChartPlugin().configure({
-          key: 'echarts_timeseries_scatter',
+          key: VizType.Scatter,
         }),
         new EchartsTimeseriesStepChartPlugin().configure({
-          key: 'echarts_timeseries_step',
+          key: VizType.Step,
         }),
         new EchartsWaterfallChartPlugin().configure({
-          key: 'waterfall',
+          key: VizType.Waterfall,
         }),
-        new EchartsHeatmapChartPlugin().configure({ key: 'heatmap_v2' }),
-        new EchartsHistogramChartPlugin().configure({ key: 'histogram_v2' }),
+        new EchartsHeatmapChartPlugin().configure({ key: VizType.Heatmap }),
+        new EchartsHistogramChartPlugin().configure({ key: VizType.Histogram }),
         new SelectFilterPlugin().configure({ key: FilterPlugins.Select }),
         new RangeFilterPlugin().configure({ key: FilterPlugins.Range }),
         new TimeFilterPlugin().configure({ key: FilterPlugins.Time }),
@@ -173,10 +178,10 @@ export default class MainPreset extends Preset {
         new TimeGrainFilterPlugin().configure({
           key: FilterPlugins.TimeGrain,
         }),
-        new EchartsTreeChartPlugin().configure({ key: 'tree_chart' }),
-        new EchartsSunburstChartPlugin().configure({ key: 'sunburst_v2' }),
-        new HandlebarsChartPlugin().configure({ key: 'handlebars' }),
-        new EchartsBubbleChartPlugin().configure({ key: 'bubble_v2' }),
+        new EchartsTreeChartPlugin().configure({ key: VizType.Tree }),
+        new EchartsSunburstChartPlugin().configure({ key: VizType.Sunburst }),
+        new HandlebarsChartPlugin().configure({ key: VizType.Handlebars }),
+        new EchartsBubbleChartPlugin().configure({ key: VizType.Bubble }),
         ...experimentalPlugins,
       ],
     });