From 5ff04c366da945966d0a71fd02169644711682a4 Mon Sep 17 00:00:00 2001
From: Krist Wongsuphasawat <krist.wongz@gmail.com>
Date: Sat, 27 Jul 2019 16:20:42 -0700
Subject: [PATCH] docs: update storybook to use new SuperChart props and
 convert to TS (+8 squashed commits) (#127)

Squashed commits:
[ffdde0c] fix: dimensions
[57f5334] fix: path
[61191fc] docs: update remaining stories
[240b171] docs: update nvd3 stories
[38e2804] docs: update more storybooks
[18b9401] docs: update more stories
[7f8fb07] docs: update storybook to use new SuperChart props and convert to TS
[2e31ddb] docs: update how superchart are used
---
 .../plugins/superset-ui-plugins/package.json  |   8 +-
 .../superset-ui-plugins-demo/package.json     |   6 +-
 .../shared/components/createQueryStory.tsx    |  22 +-
 .../storybook/shared/dummyDatasource.ts       |   1 +
 .../legacy-plugin-chart-calendar/Stories.jsx  |  34 --
 .../legacy-plugin-chart-calendar/Stories.tsx  |  33 ++
 .../{Stories.jsx => Stories.tsx}              |  14 +-
 .../{Stories.jsx => Stories.tsx}              |  16 +-
 .../Stories.jsx                               |  16 +-
 .../{Stories.jsx => Stories.tsx}              |  10 +-
 .../legacy-plugin-chart-heatmap/Stories.jsx   | 255 --------------
 .../legacy-plugin-chart-heatmap/Stories.tsx   |  88 +++++
 .../legacy-plugin-chart-heatmap/data.js       | 329 +++++++++---------
 .../{Stories.jsx => Stories.tsx}              |  22 +-
 .../{Stories.jsx => Stories.tsx}              |  14 +-
 .../{Stories.jsx => Stories.tsx}              |   9 +-
 .../legacy-plugin-chart-map-box/Stories.jsx   |  37 --
 .../legacy-plugin-chart-map-box/Stories.tsx   |  35 ++
 .../legacy-plugin-chart-markup/Stories.jsx    |  27 --
 .../legacy-plugin-chart-markup/Stories.tsx    |  23 ++
 .../{Stories.jsx => Stories.tsx}              |  20 +-
 .../Stories.jsx                               |  29 --
 .../Stories.tsx                               |  27 ++
 .../legacy-plugin-chart-partition/Stories.jsx |  37 --
 .../legacy-plugin-chart-partition/Stories.tsx |  34 ++
 .../Stories.jsx                               |  67 ----
 .../Stories.tsx                               |  60 ++++
 .../{Stories.jsx => Stories.tsx}              |  20 +-
 .../{Stories.jsx => Stories.tsx}              |  12 +-
 .../{Stories.jsx => Stories.tsx}              |  12 +-
 .../{Stories.jsx => Stories.tsx}              |  16 +-
 .../legacy-plugin-chart-table/Stories.jsx     |  42 ---
 .../legacy-plugin-chart-table/Stories.tsx     |  40 +++
 .../{Stories.jsx => Stories.tsx}              |  16 +-
 .../{Stories.jsx => Stories.tsx}              |  22 +-
 .../{Stories.jsx => Stories.tsx}              |  16 +-
 .../BigNumber/Stories.jsx                     |  36 --
 .../BigNumber/Stories.tsx                     |  34 ++
 .../{Stories.jsx => Stories.tsx}              |  18 +-
 .../legacy-preset-chart-nvd3/Area/Stories.jsx | 197 -----------
 .../legacy-preset-chart-nvd3/Area/Stories.tsx | 178 ++++++++++
 .../legacy-preset-chart-nvd3/Bar/Stories.jsx  | 169 ---------
 .../legacy-preset-chart-nvd3/Bar/Stories.tsx  | 154 ++++++++
 .../BoxPlot/{Stories.jsx => Stories.tsx}      |  19 +-
 .../Bubble/Stories.jsx                        |  45 ---
 .../Bubble/Stories.tsx                        |  44 +++
 .../Bullet/Stories.jsx                        |  30 --
 .../Bullet/Stories.tsx                        |  30 ++
 .../Compare/Stories.jsx                       |  38 --
 .../Compare/Stories.tsx                       |  37 ++
 ...{ManyBarStories.jsx => ManyBarStories.tsx} |  30 +-
 .../DistBar/Stories.jsx                       |  38 --
 .../DistBar/Stories.tsx                       |  37 ++
 .../DualLine/{Stories.jsx => Stories.tsx}     |  67 ++--
 .../Line/{LogStories.jsx => LogStories.tsx}   |  23 +-
 .../legacy-preset-chart-nvd3/Line/Stories.jsx |  77 ----
 .../legacy-preset-chart-nvd3/Line/Stories.tsx |  74 ++++
 .../Line/YAxisStories.jsx                     |  95 -----
 .../Line/YAxisStories.tsx                     |  86 +++++
 .../legacy-preset-chart-nvd3/Pie/Stories.jsx  |  32 --
 .../legacy-preset-chart-nvd3/Pie/Stories.tsx  |  31 ++
 .../preset-chart-xy/BoxPlot/stories/Basic.tsx | 152 ++++----
 .../BoxPlot/stories/Legacy.tsx                |  29 +-
 .../preset-chart-xy/Line/stories/basic.tsx    |  99 +++---
 .../preset-chart-xy/Line/stories/flush.tsx    | 207 ++++++-----
 .../preset-chart-xy/Line/stories/legacy.tsx   | 107 +++---
 .../preset-chart-xy/Line/stories/missing.tsx  |  77 ++--
 .../Line/stories/timeShift.tsx                | 135 ++++---
 .../ScatterPlot/stories/basic.jsx             |  71 ++--
 .../ScatterPlot/stories/bubble.jsx            |  87 +++--
 .../ScatterPlot/stories/legacy.tsx            |  61 ++--
 .../superset-ui-plugins-demo/tsconfig.json    |   2 +-
 72 files changed, 1892 insertions(+), 2223 deletions(-)
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/{Stories.jsx => Stories.tsx} (63%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/{Stories.jsx => Stories.tsx} (62%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/{Stories.jsx => Stories.tsx} (61%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/{Stories.jsx => Stories.tsx} (51%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/{Stories.jsx => Stories.tsx} (63%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/{Stories.jsx => Stories.tsx} (67%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/{Stories.jsx => Stories.tsx} (55%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/{Stories.jsx => Stories.tsx} (53%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/{Stories.jsx => Stories.tsx} (68%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/{Stories.jsx => Stories.tsx} (67%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/{Stories.jsx => Stories.tsx} (58%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/{Stories.jsx => Stories.tsx} (59%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/{Stories.jsx => Stories.tsx} (53%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/{Stories.jsx => Stories.tsx} (63%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/{Stories.jsx => Stories.tsx} (56%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/{Stories.jsx => Stories.tsx} (53%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/{ManyBarStories.jsx => ManyBarStories.tsx} (63%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.tsx
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/{Stories.jsx => Stories.tsx} (50%)
 rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/{LogStories.jsx => LogStories.tsx} (51%)
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.tsx
 delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.jsx
 create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json
index 2a750455ee288..8cace29f5cedb 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json
@@ -41,12 +41,12 @@
   "devDependencies": {
     "@superset-ui/build-config": "^0.1.0",
     "@superset-ui/commit-config": "^0.0.9",
-    "@superset-ui/chart": "^0.11.8",
+    "@superset-ui/chart": "^0.11.13",
     "@superset-ui/chart-composition": "^0.11.9",
     "@superset-ui/color": "^0.11.9",
-    "@superset-ui/connection": "^0.11.5",
-    "@superset-ui/core": "^0.11.9",
-    "@superset-ui/dimension": "^0.11.7",
+    "@superset-ui/connection": "^0.11.10",
+    "@superset-ui/core": "^0.11.10",
+    "@superset-ui/dimension": "^0.11.10",
     "@superset-ui/number-format": "^0.11.5",
     "@superset-ui/time-format": "^0.11.5",
     "@superset-ui/translation": "^0.11.9",
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json
index 8424799c8d13d..aa56130e48e7b 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json
@@ -49,9 +49,9 @@
     "gh-pages": "^2.0.1"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "^0.11.6",
-    "@superset-ui/chart-composition": "^0.11.5",
-    "@superset-ui/color": "^0.11.0",
+    "@superset-ui/chart": "^0.11.13",
+    "@superset-ui/chart-composition": "^0.11.9",
+    "@superset-ui/color": "^0.11.9",
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/time-format": "^0.11.0",
     "@superset-ui/translation": "^0.11.4"
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx
index 730bca8967ac8..6fd79efe69b40 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { text, select } from '@storybook/addon-knobs';
-import { SuperChart, ChartDataProvider, ChartProps } from '@superset-ui/chart';
+import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
 import { SupersetClient } from '@superset-ui/connection';
 import Expandable from './Expandable';
 import VerifyCORS, { renderError } from './VerifyCORS';
@@ -50,17 +50,15 @@ export default function createQueryStory({
                       <>
                         <SuperChart
                           chartType={chartType}
-                          chartProps={
-                            new ChartProps({
-                              formData: payload.formData,
-                              height: Number(height),
-                              // @TODO fix typing
-                              // all vis's now expect objects but api/v1/ returns an array
-                              payload: Array.isArray(payload.queryData)
-                                ? payload.queryData[0]
-                                : payload.queryData,
-                              width: Number(width),
-                            })
+                          width={width}
+                          height={height}
+                          formData={payload.formData}
+                          // @TODO fix typing
+                          // all vis's now expect objects but api/v1/ returns an array
+                          payload={
+                            Array.isArray(payload.queryData)
+                              ? payload.queryData[0]
+                              : payload.queryData
                           }
                         />
                         <br />
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts
new file mode 100644
index 0000000000000..24efcb1f53394
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts
@@ -0,0 +1 @@
+export default { verboseMap: {} };
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx
deleted file mode 100644
index a88d5dc9710ec..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable sort-keys, no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="calendar"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            cellSize: 10,
-            cellPadding: 2,
-            cellRadius: 0,
-            linearColorScheme: 'schemeRdYlBu',
-            steps: 10,
-            yAxisFormat: '.3s',
-            xAxisTimeFormat: 'smart_date',
-            showLegend: true,
-            showValues: false,
-            showMetricName: true,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-calendar|CalendarChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx
new file mode 100644
index 0000000000000..fc3c17a9c9dc1
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable sort-keys, no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="calendar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          cellSize: 10,
+          cellPadding: 2,
+          cellRadius: 0,
+          linearColorScheme: 'schemeRdYlBu',
+          steps: 10,
+          yAxisFormat: '.3s',
+          xAxisTimeFormat: 'smart_date',
+          showLegend: true,
+          showValues: false,
+          showMetricName: true,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-calendar|CalendarChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.tsx
similarity index 63%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.tsx
index 9b50cfbbdc3ac..7e552fda266f9 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-chord/Stories.tsx
@@ -8,14 +8,12 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="chord"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            yAxisFormat: '.2f',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          yAxisFormat: '.2f',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.tsx
similarity index 62%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.tsx
index 4ff8cdd4212ad..12a7dda29309d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-country-map/Stories.tsx
@@ -10,15 +10,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="country-map"
-        chartProps={{
-          formData: {
-            linearColorScheme: 'schemeRdYlBu',
-            numberFormat: '.3s',
-            selectCountry: select('Country', Object.keys(countries), 'france', 'country'),
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          linearColorScheme: 'schemeRdYlBu',
+          numberFormat: '.3s',
+          selectCountry: select('Country', Object.keys(countries!), 'france', 'country'),
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx
index ff54a991d093b..a6d89ce3ea29b 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx
@@ -14,15 +14,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="event-flow"
-        chartProps={{
-          formData: {
-            allColumnsX: 'eventName',
-            entity: 'userId',
-            minLeafNodeEventCount: 1,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          allColumnsX: 'eventName',
+          entity: 'userId',
+          minLeafNodeEventCount: 1,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.tsx
similarity index 61%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.tsx
index 6af34aae1670c..55a7bfd1ff242 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-force-directed/Stories.tsx
@@ -6,15 +6,7 @@ import data from './data';
 export default [
   {
     renderStory: () => (
-      <SuperChart
-        chartType="force-directed"
-        chartProps={{
-          formData: {},
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
+      <SuperChart chartType="force-directed" width={400} height={400} payload={{ data }} />
     ),
     storyName: 'Basic',
     storyPath: 'legacy-|plugin-chart-force-directed|ForceDirectedChartPlugin',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.jsx
deleted file mode 100644
index 640e481387111..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.jsx
+++ /dev/null
@@ -1,255 +0,0 @@
-/* eslint-disable sort-keys, no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-
-const DATA = [
-  {
-    x: 'Energy',
-    y: 'Electricity and heat',
-    v: 24.9,
-    perc: 1.0,
-    rank: 1.0,
-  },
-  {
-    x: 'Energy',
-    y: 'Industry',
-    v: 14.7,
-    perc: 0.5887096774193549,
-    rank: 0.9882352941176471,
-  },
-  {
-    x: 'Energy',
-    y: 'Transportation',
-    v: 14.3,
-    perc: 0.5725806451612905,
-    rank: 0.9764705882352941,
-  },
-  {
-    x: 'Deforestation',
-    y: 'Carbon Dioxide',
-    v: 10.9,
-    perc: 0.435483870967742,
-    rank: 0.9588235294117647,
-  },
-  {
-    x: 'Land Use Change',
-    y: 'Deforestation',
-    v: 10.9,
-    perc: 0.435483870967742,
-    rank: 0.9588235294117647,
-  },
-  {
-    x: 'Road',
-    y: 'Carbon Dioxide',
-    v: 10.5,
-    perc: 0.4193548387096775,
-    rank: 0.9352941176470588,
-  },
-  {
-    x: 'Transportation',
-    y: 'Road',
-    v: 10.5,
-    perc: 0.4193548387096775,
-    rank: 0.9352941176470588,
-  },
-  {
-    x: 'Residential Buildings',
-    y: 'Carbon Dioxide',
-    v: 10.2,
-    perc: 0.40725806451612906,
-    rank: 0.9176470588235294,
-  },
-  {
-    x: 'Energy',
-    y: 'Other Fuel Combustion',
-    v: 8.6,
-    perc: 0.342741935483871,
-    rank: 0.9058823529411765,
-  },
-  {
-    x: 'Other Industry',
-    y: 'Carbon Dioxide',
-    v: 6.6,
-    perc: 0.26209677419354843,
-    rank: 0.8941176470588236,
-  },
-  {
-    x: 'Commercial Buildings',
-    y: 'Carbon Dioxide',
-    v: 6.3,
-    perc: 0.25000000000000006,
-    rank: 0.8823529411764706,
-  },
-  {
-    x: 'Agriculture',
-    y: 'Livestock and Manure',
-    v: 5.4,
-    perc: 0.2137096774193549,
-    rank: 0.8705882352941177,
-  },
-  {
-    x: 'Agriculture',
-    y: 'Agriculture Soils',
-    v: 5.2,
-    perc: 0.20564516129032262,
-    rank: 0.8470588235294118,
-  },
-  {
-    x: 'Agriculture Soils',
-    y: 'Nitrous Oxide',
-    v: 5.2,
-    perc: 0.20564516129032262,
-    rank: 0.8470588235294118,
-  },
-  {
-    x: 'Oil and Gas Processing',
-    y: 'Methane',
-    v: 2.8,
-    perc: 0.10887096774193548,
-    rank: 0.6705882352941176,
-  },
-  {
-    x: 'Electricity and heat',
-    y: 'Other Industry',
-    v: 2.7,
-    perc: 0.10483870967741937,
-    rank: 0.6470588235294118,
-  },
-  {
-    x: 'Rail - Ship and Other Transport',
-    y: 'Carbon Dioxide',
-    v: 2.5,
-    perc: 0.09677419354838711,
-    rank: 0.6294117647058823,
-  },
-  {
-    x: 'Transportation',
-    y: 'Rail - Ship and Other Transport',
-    v: 2.5,
-    perc: 0.09677419354838711,
-    rank: 0.6294117647058823,
-  },
-  {
-    x: 'Electricity and heat',
-    y: 'T and D Losses',
-    v: 2.2,
-    perc: 0.08467741935483872,
-    rank: 0.6058823529411764,
-  },
-  {
-    x: 'T and D Losses',
-    y: 'Carbon Dioxide',
-    v: 2.2,
-    perc: 0.08467741935483872,
-    rank: 0.6058823529411764,
-  },
-  {
-    x: 'Electricity and heat',
-    y: 'Unallocated Fuel Combustion',
-    v: 2.0,
-    perc: 0.07661290322580645,
-    rank: 0.5882352941176471,
-  },
-  {
-    x: 'Industry',
-    y: 'Cement',
-    v: 1.9,
-    perc: 0.07258064516129033,
-    rank: 0.5764705882352941,
-  },
-  {
-    x: 'Other Fuel Combustion',
-    y: 'Unallocated Fuel Combustion',
-    v: 1.8,
-    perc: 0.0685483870967742,
-    rank: 0.5647058823529412,
-  },
-];
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="heatmap"
-        chartProps={{
-          formData: {
-            allColumnsX: 'source',
-            allColumnsY: 'target',
-            bottomMargin: 'auto',
-            canvasImageRendering: 'pixelated',
-            leftMargin: 'auto',
-            linearColorScheme: 'blue_white_yellow',
-            metric: 'sum__value',
-            normalized: false,
-            showLegend: true,
-            showPerc: true,
-            showValues: false,
-            sortXAxis: 'alpha_asc',
-            sortYAxis: 'alpha_asc',
-            xscaleInterval: '1',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yscaleInterval: '1',
-          },
-          height: 400,
-          payload: {
-            data: {
-              records: DATA,
-              extents: [0.1, 24.9],
-            },
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-heatmap|HeatmapChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="heatmap"
-        chartProps={{
-          formData: {
-            allColumnsX: 'source',
-            allColumnsY: 'target',
-            bottomMargin: 'auto',
-            canvasImageRendering: 'pixelated',
-            leftMargin: 'auto',
-            linearColorScheme: 'blue_white_yellow',
-            metric: 'sum__value',
-            normalized: false,
-            showLegend: true,
-            showPerc: true,
-            showValues: false,
-            sortXAxis: 'alpha_asc',
-            sortYAxis: 'alpha_asc',
-            xscaleInterval: '1',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yscaleInterval: '1',
-          },
-          height: 400,
-          payload: {
-            data: {
-              records: [
-                ...DATA,
-                {
-                  x: null,
-                  y: 'Electricity and heat',
-                  v: 25.9,
-                  perc: 0.43,
-                  rank: 1.0,
-                },
-              ],
-              extents: [0.1, 24.9],
-            },
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'With Null Data',
-    storyPath: 'legacy-|plugin-chart-heatmap|HeatmapChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.tsx
new file mode 100644
index 0000000000000..b844f64cbbc37
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/Stories.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable sort-keys, no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="heatmap"
+        width={400}
+        height={400}
+        formData={{
+          allColumnsX: 'source',
+          allColumnsY: 'target',
+          bottomMargin: 'auto',
+          canvasImageRendering: 'pixelated',
+          leftMargin: 'auto',
+          linearColorScheme: 'blue_white_yellow',
+          metric: 'sum__value',
+          normalized: false,
+          showLegend: true,
+          showPerc: true,
+          showValues: false,
+          sortXAxis: 'alpha_asc',
+          sortYAxis: 'alpha_asc',
+          xscaleInterval: '1',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yscaleInterval: '1',
+        }}
+        payload={{
+          data: {
+            records: data,
+            extents: [0.1, 24.9],
+          },
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-heatmap|HeatmapChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="heatmap"
+        width={400}
+        height={400}
+        formData={{
+          allColumnsX: 'source',
+          allColumnsY: 'target',
+          bottomMargin: 'auto',
+          canvasImageRendering: 'pixelated',
+          leftMargin: 'auto',
+          linearColorScheme: 'blue_white_yellow',
+          metric: 'sum__value',
+          normalized: false,
+          showLegend: true,
+          showPerc: true,
+          showValues: false,
+          sortXAxis: 'alpha_asc',
+          sortYAxis: 'alpha_asc',
+          xscaleInterval: '1',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yscaleInterval: '1',
+        }}
+        payload={{
+          data: {
+            records: [
+              ...data,
+              {
+                x: null,
+                y: 'Electricity and heat',
+                v: 25.9,
+                perc: 0.43,
+                rank: 1.0,
+              },
+            ],
+            extents: [0.1, 24.9],
+          },
+        }}
+      />
+    ),
+    storyName: 'With Null Data',
+    storyPath: 'legacy-|plugin-chart-heatmap|HeatmapChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/data.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/data.js
index 9ca0af1164a66..13634a88f67cc 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/data.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-heatmap/data.js
@@ -1,167 +1,164 @@
 /* eslint-disable sort-keys, no-magic-numbers */
-export default {
-  records: [
-    {
-      x: 'Energy',
-      y: 'Electricity and heat',
-      v: 24.9,
-      perc: 1.0,
-      rank: 1.0,
-    },
-    {
-      x: 'Energy',
-      y: 'Industry',
-      v: 14.7,
-      perc: 0.5887096774193549,
-      rank: 0.9882352941176471,
-    },
-    {
-      x: 'Energy',
-      y: 'Transportation',
-      v: 14.3,
-      perc: 0.5725806451612905,
-      rank: 0.9764705882352941,
-    },
-    {
-      x: 'Deforestation',
-      y: 'Carbon Dioxide',
-      v: 10.9,
-      perc: 0.435483870967742,
-      rank: 0.9588235294117647,
-    },
-    {
-      x: 'Land Use Change',
-      y: 'Deforestation',
-      v: 10.9,
-      perc: 0.435483870967742,
-      rank: 0.9588235294117647,
-    },
-    {
-      x: 'Road',
-      y: 'Carbon Dioxide',
-      v: 10.5,
-      perc: 0.4193548387096775,
-      rank: 0.9352941176470588,
-    },
-    {
-      x: 'Transportation',
-      y: 'Road',
-      v: 10.5,
-      perc: 0.4193548387096775,
-      rank: 0.9352941176470588,
-    },
-    {
-      x: 'Residential Buildings',
-      y: 'Carbon Dioxide',
-      v: 10.2,
-      perc: 0.40725806451612906,
-      rank: 0.9176470588235294,
-    },
-    {
-      x: 'Energy',
-      y: 'Other Fuel Combustion',
-      v: 8.6,
-      perc: 0.342741935483871,
-      rank: 0.9058823529411765,
-    },
-    {
-      x: 'Other Industry',
-      y: 'Carbon Dioxide',
-      v: 6.6,
-      perc: 0.26209677419354843,
-      rank: 0.8941176470588236,
-    },
-    {
-      x: 'Commercial Buildings',
-      y: 'Carbon Dioxide',
-      v: 6.3,
-      perc: 0.25000000000000006,
-      rank: 0.8823529411764706,
-    },
-    {
-      x: 'Agriculture',
-      y: 'Livestock and Manure',
-      v: 5.4,
-      perc: 0.2137096774193549,
-      rank: 0.8705882352941177,
-    },
-    {
-      x: 'Agriculture',
-      y: 'Agriculture Soils',
-      v: 5.2,
-      perc: 0.20564516129032262,
-      rank: 0.8470588235294118,
-    },
-    {
-      x: 'Agriculture Soils',
-      y: 'Nitrous Oxide',
-      v: 5.2,
-      perc: 0.20564516129032262,
-      rank: 0.8470588235294118,
-    },
-    {
-      x: 'Oil and Gas Processing',
-      y: 'Methane',
-      v: 2.8,
-      perc: 0.10887096774193548,
-      rank: 0.6705882352941176,
-    },
-    {
-      x: 'Electricity and heat',
-      y: 'Other Industry',
-      v: 2.7,
-      perc: 0.10483870967741937,
-      rank: 0.6470588235294118,
-    },
-    {
-      x: 'Rail - Ship and Other Transport',
-      y: 'Carbon Dioxide',
-      v: 2.5,
-      perc: 0.09677419354838711,
-      rank: 0.6294117647058823,
-    },
-    {
-      x: 'Transportation',
-      y: 'Rail - Ship and Other Transport',
-      v: 2.5,
-      perc: 0.09677419354838711,
-      rank: 0.6294117647058823,
-    },
-    {
-      x: 'Electricity and heat',
-      y: 'T and D Losses',
-      v: 2.2,
-      perc: 0.08467741935483872,
-      rank: 0.6058823529411764,
-    },
-    {
-      x: 'T and D Losses',
-      y: 'Carbon Dioxide',
-      v: 2.2,
-      perc: 0.08467741935483872,
-      rank: 0.6058823529411764,
-    },
-    {
-      x: 'Electricity and heat',
-      y: 'Unallocated Fuel Combustion',
-      v: 2.0,
-      perc: 0.07661290322580645,
-      rank: 0.5882352941176471,
-    },
-    {
-      x: 'Industry',
-      y: 'Cement',
-      v: 1.9,
-      perc: 0.07258064516129033,
-      rank: 0.5764705882352941,
-    },
-    {
-      x: 'Other Fuel Combustion',
-      y: 'Unallocated Fuel Combustion',
-      v: 1.8,
-      perc: 0.0685483870967742,
-      rank: 0.5647058823529412,
-    },
-  ],
-  extents: [0.1, 24.9],
-};
+export default [
+  {
+    x: 'Energy',
+    y: 'Electricity and heat',
+    v: 24.9,
+    perc: 1.0,
+    rank: 1.0,
+  },
+  {
+    x: 'Energy',
+    y: 'Industry',
+    v: 14.7,
+    perc: 0.5887096774193549,
+    rank: 0.9882352941176471,
+  },
+  {
+    x: 'Energy',
+    y: 'Transportation',
+    v: 14.3,
+    perc: 0.5725806451612905,
+    rank: 0.9764705882352941,
+  },
+  {
+    x: 'Deforestation',
+    y: 'Carbon Dioxide',
+    v: 10.9,
+    perc: 0.435483870967742,
+    rank: 0.9588235294117647,
+  },
+  {
+    x: 'Land Use Change',
+    y: 'Deforestation',
+    v: 10.9,
+    perc: 0.435483870967742,
+    rank: 0.9588235294117647,
+  },
+  {
+    x: 'Road',
+    y: 'Carbon Dioxide',
+    v: 10.5,
+    perc: 0.4193548387096775,
+    rank: 0.9352941176470588,
+  },
+  {
+    x: 'Transportation',
+    y: 'Road',
+    v: 10.5,
+    perc: 0.4193548387096775,
+    rank: 0.9352941176470588,
+  },
+  {
+    x: 'Residential Buildings',
+    y: 'Carbon Dioxide',
+    v: 10.2,
+    perc: 0.40725806451612906,
+    rank: 0.9176470588235294,
+  },
+  {
+    x: 'Energy',
+    y: 'Other Fuel Combustion',
+    v: 8.6,
+    perc: 0.342741935483871,
+    rank: 0.9058823529411765,
+  },
+  {
+    x: 'Other Industry',
+    y: 'Carbon Dioxide',
+    v: 6.6,
+    perc: 0.26209677419354843,
+    rank: 0.8941176470588236,
+  },
+  {
+    x: 'Commercial Buildings',
+    y: 'Carbon Dioxide',
+    v: 6.3,
+    perc: 0.25000000000000006,
+    rank: 0.8823529411764706,
+  },
+  {
+    x: 'Agriculture',
+    y: 'Livestock and Manure',
+    v: 5.4,
+    perc: 0.2137096774193549,
+    rank: 0.8705882352941177,
+  },
+  {
+    x: 'Agriculture',
+    y: 'Agriculture Soils',
+    v: 5.2,
+    perc: 0.20564516129032262,
+    rank: 0.8470588235294118,
+  },
+  {
+    x: 'Agriculture Soils',
+    y: 'Nitrous Oxide',
+    v: 5.2,
+    perc: 0.20564516129032262,
+    rank: 0.8470588235294118,
+  },
+  {
+    x: 'Oil and Gas Processing',
+    y: 'Methane',
+    v: 2.8,
+    perc: 0.10887096774193548,
+    rank: 0.6705882352941176,
+  },
+  {
+    x: 'Electricity and heat',
+    y: 'Other Industry',
+    v: 2.7,
+    perc: 0.10483870967741937,
+    rank: 0.6470588235294118,
+  },
+  {
+    x: 'Rail - Ship and Other Transport',
+    y: 'Carbon Dioxide',
+    v: 2.5,
+    perc: 0.09677419354838711,
+    rank: 0.6294117647058823,
+  },
+  {
+    x: 'Transportation',
+    y: 'Rail - Ship and Other Transport',
+    v: 2.5,
+    perc: 0.09677419354838711,
+    rank: 0.6294117647058823,
+  },
+  {
+    x: 'Electricity and heat',
+    y: 'T and D Losses',
+    v: 2.2,
+    perc: 0.08467741935483872,
+    rank: 0.6058823529411764,
+  },
+  {
+    x: 'T and D Losses',
+    y: 'Carbon Dioxide',
+    v: 2.2,
+    perc: 0.08467741935483872,
+    rank: 0.6058823529411764,
+  },
+  {
+    x: 'Electricity and heat',
+    y: 'Unallocated Fuel Combustion',
+    v: 2.0,
+    perc: 0.07661290322580645,
+    rank: 0.5882352941176471,
+  },
+  {
+    x: 'Industry',
+    y: 'Cement',
+    v: 1.9,
+    perc: 0.07258064516129033,
+    rank: 0.5764705882352941,
+  },
+  {
+    x: 'Other Fuel Combustion',
+    y: 'Unallocated Fuel Combustion',
+    v: 1.8,
+    perc: 0.0685483870967742,
+    rank: 0.5647058823529412,
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.tsx
similarity index 51%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.tsx
index 71b0010a6243a..e660d7f1903e7 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-histogram/Stories.tsx
@@ -8,18 +8,16 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="histogram"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            globalOpacity: 1,
-            linkLength: 15, // binCount
-            normalized: false,
-            xAxisLabel: 'Score',
-            yAxisLabel: 'Count',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          globalOpacity: 1,
+          linkLength: 15, // binCount
+          normalized: false,
+          xAxisLabel: 'Score',
+          yAxisLabel: 'Count',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.tsx
similarity index 63%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.tsx
index e92f988c95a4d..f469c4c3927c8 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-horizon/Stories.tsx
@@ -8,14 +8,12 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="horizon"
-        chartProps={{
-          formData: {
-            horizonColorScale: 'series',
-            seriesHeight: '25',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          horizonColorScale: 'series',
+          seriesHeight: '25',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.tsx
similarity index 67%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.tsx
index 77769978ff3e2..c75384a35f72c 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-iframe/Stories.tsx
@@ -6,11 +6,10 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="iframe"
-        chartProps={{
-          formData: {
-            url: 'https://www.youtube.com/embed/AdSZJzb-aX8',
-          },
-          height: 400,
+        width={400}
+        height={400}
+        formData={{
+          url: 'https://www.youtube.com/embed/AdSZJzb-aX8',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.jsx
deleted file mode 100644
index a0553f327387a..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="map-box"
-        chartProps={{
-          formData: {
-            allColumnsX: 'LON',
-            allColumnsY: 'LAT',
-            clusteringRadius: '60',
-            globalOpacity: 1,
-            mapboxColor: 'rgb(0, 122, 135)',
-            mapboxLabel: [],
-            mapboxStyle: 'mapbox://styles/mapbox/light-v9',
-            pandasAggfunc: 'sum',
-            pointRadius: 'Auto',
-            pointRadiusUnit: 'Pixels',
-            renderWhileDragging: true,
-            viewportLatitude: 37.78711146014447,
-            viewportLongitude: -122.37633433151713,
-            viewportZoom: 10.026425338292782,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-map-box|MapBoxChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.tsx
new file mode 100644
index 0000000000000..e9715a6898716
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-map-box/Stories.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="map-box"
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          allColumnsX: 'LON',
+          allColumnsY: 'LAT',
+          clusteringRadius: '60',
+          globalOpacity: 1,
+          mapboxColor: 'rgb(0, 122, 135)',
+          mapboxLabel: [],
+          mapboxStyle: 'mapbox://styles/mapbox/light-v9',
+          pandasAggfunc: 'sum',
+          pointRadius: 'Auto',
+          pointRadiusUnit: 'Pixels',
+          renderWhileDragging: true,
+          viewportLatitude: 37.78711146014447,
+          viewportLongitude: -122.37633433151713,
+          viewportZoom: 10.026425338292782,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-map-box|MapBoxChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.jsx
deleted file mode 100644
index 9ed6788b878e0..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="markup"
-        chartProps={{
-          formData: {
-            vizType: 'markup',
-          },
-          height: 400,
-          payload: {
-            data: {
-              html:
-                '<div><b>hello</b> <i>world</i><div><img src="https://avatars3.githubusercontent.com/u/42724554?s=200&v=4" style="width: 80px" />',
-            },
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-markup|MarkupChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.tsx
new file mode 100644
index 0000000000000..af59f2af4a301
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-markup/Stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="markup"
+        width={400}
+        height={400}
+        payload={{
+          data: {
+            html:
+              '<div><b>hello</b> <i>world</i><div><img src="https://avatars3.githubusercontent.com/u/42724554?s=200&v=4" style="width: 80px" />',
+          },
+        }}
+        formData={{ vizType: 'markup' }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-markup|MarkupChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.tsx
similarity index 55%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.tsx
index 6ada5aefdf956..42d1b3acbc592 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-paired-t-test/Stories.tsx
@@ -8,17 +8,15 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="paired-t-test"
-        chartProps={{
-          formData: {
-            groupby: ['name'],
-            liftvaluePrecision: 4,
-            metrics: ['sum__num'],
-            pvaluePrecision: 6,
-            significanceLevel: 0.05,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          groupby: ['name'],
+          liftvaluePrecision: 4,
+          metrics: ['sum__num'],
+          pvaluePrecision: 6,
+          significanceLevel: 0.05,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.jsx
deleted file mode 100644
index d6edb7b497cff..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable no-magic-numbers, sort-keys */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="parallel-coordinates"
-        chartProps={{
-          formData: {
-            includeSeries: false,
-            linearColorScheme: 'schemeRdYlBu',
-            metrics: ['sum__SP_POP_TOTL', 'sum__SP_RUR_TOTL_ZS', 'sum__SH_DYN_AIDS'],
-            secondaryMetric: 'sum__SP_POP_TOTL',
-            series: 'country_name',
-            showDatatable: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-parallel-coordinates|ParallelCoordinatesChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.tsx
new file mode 100644
index 0000000000000..fd94397cd6eb5
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-parallel-coordinates/Stories.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable no-magic-numbers, sort-keys */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="parallel-coordinates"
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          includeSeries: false,
+          linearColorScheme: 'schemeRdYlBu',
+          metrics: ['sum__SP_POP_TOTL', 'sum__SP_RUR_TOTL_ZS', 'sum__SH_DYN_AIDS'],
+          secondaryMetric: 'sum__SP_POP_TOTL',
+          series: 'country_name',
+          showDatatable: false,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-parallel-coordinates|ParallelCoordinatesChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.jsx
deleted file mode 100644
index 08fac19e5447b..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable no-magic-numbers, sort-keys */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="partition"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            colorScheme: 'd3Category10',
-            dateTimeFormat: '%Y-%m-%d',
-            equalDateSize: true,
-            groupby: ['region', 'country_code'],
-            logScale: false,
-            metrics: ['sum__SP_POP_TOTL'],
-            numberFormat: '.3s',
-            partitionLimit: '5',
-            partitionThreshold: '0.05',
-            richTooltip: true,
-            timeSeriesOption: 'not-time',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-partition|PartitionChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.tsx
new file mode 100644
index 0000000000000..f6e234f5735c9
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-partition/Stories.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-magic-numbers, sort-keys */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="partition"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          dateTimeFormat: '%Y-%m-%d',
+          equalDateSize: true,
+          groupby: ['region', 'country_code'],
+          logScale: false,
+          metrics: ['sum__SP_POP_TOTL'],
+          numberFormat: '.3s',
+          partitionLimit: '5',
+          partitionThreshold: '0.05',
+          richTooltip: true,
+          timeSeriesOption: 'not-time',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-partition|PartitionChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.jsx
deleted file mode 100644
index b532bf54c6d3b..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="pivot-table"
-        chartProps={{
-          datasource: {
-            columnFormats: {},
-            verboseMap: {
-              sum__num: 'sum__num',
-            },
-          },
-          formData: {
-            groupby: ['name'],
-            numberFormat: '.3s',
-          },
-          height: 400,
-          payload: {
-            data: {
-              columns: [['sum__num', 'other'], ['sum__num', 'All']],
-              html:
-                '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>803607</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>673992</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>749686</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>587540</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>548044</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
-            },
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-pivot-table|PivotTableChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="pivot-table"
-        chartProps={{
-          datasource: {
-            columnFormats: {},
-            verboseMap: {
-              sum__num: 'sum__num',
-            },
-          },
-          formData: {
-            groupby: ['name'],
-            numberFormat: '.3s',
-          },
-          height: 400,
-          payload: {
-            data: {
-              columns: [['sum__num', 'other'], ['sum__num', 'All']],
-              html:
-                '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>null</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>null</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>null</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
-            },
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'With null',
-    storyPath: 'legacy-|plugin-chart-pivot-table|PivotTableChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.tsx
new file mode 100644
index 0000000000000..b98cef523ba8e
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-pivot-table/Stories.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const datasource = {
+  columnFormats: {},
+  verboseMap: {
+    sum__num: 'sum__num',
+  },
+};
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="pivot-table"
+        width={400}
+        height={400}
+        datasource={datasource}
+        payload={{
+          data: {
+            columns: [['sum__num', 'other'], ['sum__num', 'All']],
+            html:
+              '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>803607</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>673992</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>749686</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>587540</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>548044</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
+          },
+        }}
+        formData={{
+          groupby: ['name'],
+          numberFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-pivot-table|PivotTableChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="pivot-table"
+        width={400}
+        height={400}
+        datasource={datasource}
+        payload={{
+          data: {
+            columns: [['sum__num', 'other'], ['sum__num', 'All']],
+            html:
+              '<table border="1" class="dataframe dataframe table table-striped table-bordered table-condensed table-hover">\n  <thead>\n    <tr>\n      <th></th>\n      <th colspan="2" halign="left">sum__num</th>\n    </tr>\n    <tr>\n      <th>state</th>\n      <th>other</th>\n      <th>All</th>\n    </tr>\n    <tr>\n      <th>name</th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>Christopher</th>\n      <td>null</td>\n      <td>803607</td>\n    </tr>\n    <tr>\n      <th>David</th>\n      <td>null</td>\n      <td>673992</td>\n    </tr>\n    <tr>\n      <th>James</th>\n      <td>749686</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>Jennifer</th>\n      <td>587540</td>\n      <td>null</td>\n    </tr>\n    <tr>\n      <th>John</th>\n      <td>638450</td>\n      <td>638450</td>\n    </tr>\n    <tr>\n      <th>Joshua</th>\n      <td>null</td>\n      <td>548044</td>\n    </tr>\n    <tr>\n      <th>Matthew</th>\n      <td>608212</td>\n      <td>608212</td>\n    </tr>\n    <tr>\n      <th>Michael</th>\n      <td>1047996</td>\n      <td>1047996</td>\n    </tr>\n    <tr>\n      <th>Robert</th>\n      <td>575592</td>\n      <td>575592</td>\n    </tr>\n    <tr>\n      <th>William</th>\n      <td>574464</td>\n      <td>574464</td>\n    </tr>\n    <tr>\n      <th>All</th>\n      <td>6807583</td>\n      <td>6807583</td>\n    </tr>\n  </tbody>\n</table>',
+          },
+        }}
+        formData={{
+          groupby: ['name'],
+          numberFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'With null',
+    storyPath: 'legacy-|plugin-chart-pivot-table|PivotTableChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.tsx
similarity index 53%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.tsx
index ca7ccaa965d63..0b3266ce8da31 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-rose/Stories.tsx
@@ -8,17 +8,15 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="rose"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            dateTimeFormat: '%Y-%m-%d',
-            numberFormat: '.3s',
-            richTooltip: true,
-            roseAreaProportion: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          dateTimeFormat: '%Y-%m-%d',
+          numberFormat: '.3s',
+          richTooltip: true,
+          roseAreaProportion: false,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.tsx
similarity index 68%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.tsx
index e78aaddff175e..94c7e75fb0f30 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey-loop/Stories.tsx
@@ -8,13 +8,11 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="sankey-loop"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.tsx
similarity index 67%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.tsx
index d808427dae6d7..0873232167edb 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sankey/Stories.tsx
@@ -8,13 +8,11 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="sankey"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.tsx
similarity index 58%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.tsx
index 8e861eeadbd46..019ff046bc7ad 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-sunburst/Stories.tsx
@@ -8,15 +8,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="sunburst"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            metric: 'sum__SP_POP_TOTL',
-            secondaryMetric: 'sum__SP_RUR_TOTL',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          metric: 'sum__SP_POP_TOTL',
+          secondaryMetric: 'sum__SP_RUR_TOTL',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.jsx
deleted file mode 100644
index 7150109eb399c..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="table"
-        chartProps={{
-          datasource: {
-            columnFormats: {},
-            verboseMap: {
-              name: 'name',
-              sum__num: 'sum__num',
-            },
-          },
-          filters: {},
-          formData: {
-            alignPn: false,
-            colorPn: false,
-            includeSearch: false,
-            metrics: ['sum__num'],
-            orderDesc: true,
-            pageLength: 0,
-            percentMetrics: [],
-            tableFilter: false,
-            tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
-            timeseriesLimitMetric: null,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|plugin-chart-table|TableChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.tsx
new file mode 100644
index 0000000000000..dd569fdd6780c
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/Stories.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="table"
+        width={400}
+        height={400}
+        datasource={{
+          columnFormats: {},
+          verboseMap: {
+            name: 'name',
+            sum__num: 'sum__num',
+          },
+        }}
+        filters={{}}
+        payload={{ data }}
+        formData={{
+          alignPn: false,
+          colorPn: false,
+          includeSearch: false,
+          metrics: ['sum__num'],
+          orderDesc: true,
+          pageLength: 0,
+          percentMetrics: [],
+          tableFilter: false,
+          tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
+          timeseriesLimitMetric: null,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-table|TableChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.tsx
similarity index 59%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.tsx
index 756b9e77f14e3..46b169d0b3e0f 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-treemap/Stories.tsx
@@ -8,15 +8,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="treemap"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            numberFormat: '.3s',
-            treeMapRatio: 1.618033988749895,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          numberFormat: '.3s',
+          treeMapRatio: 1.618033988749895,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.tsx
similarity index 53%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.tsx
index 70906c9ef58ea..2f430bc70b0e4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-word-cloud/Stories.tsx
@@ -8,18 +8,16 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="word-cloud"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            metric: 'sum__num',
-            rotation: 'square',
-            series: 'name',
-            sizeFrom: '10',
-            sizeTo: '70',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          metric: 'sum__num',
+          rotation: 'square',
+          series: 'name',
+          sizeFrom: '10',
+          sizeTo: '70',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.tsx
similarity index 63%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.tsx
index ad6c39adec349..154251b30c1c5 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-world-map/Stories.tsx
@@ -8,16 +8,12 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="world-map"
-        chartProps={{
-          formData: {
-            maxBubbleSize: '25',
-            showBubbles: true,
-          },
-          height: 400,
-          payload: {
-            data,
-          },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          maxBubbleSize: '25',
+          showBubbles: true,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.jsx
deleted file mode 100644
index e9f4760f0df5e..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable no-magic-numbers, sort-keys */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="big-number"
-        chartProps={{
-          formData: {
-            colorPicker: {
-              r: 0,
-              g: 122,
-              b: 135,
-              a: 1,
-            },
-            compareLag: 1,
-            compareSuffix: 'over 10Y',
-            metric: 'sum__SP_POP_TOTL',
-            showTrendLine: true,
-            startYAxisAtZero: true,
-            vizType: 'big_number',
-            yAxisFormat: '.3s',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
new file mode 100644
index 0000000000000..ff9d89df536ff
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-magic-numbers, sort-keys */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="big-number"
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorPicker: {
+            r: 0,
+            g: 122,
+            b: 135,
+            a: 1,
+          },
+          compareLag: 1,
+          compareSuffix: 'over 10Y',
+          metric: 'sum__SP_POP_TOTL',
+          showTrendLine: true,
+          startYAxisAtZero: true,
+          vizType: 'big_number',
+          yAxisFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
similarity index 56%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
index 9964023923228..cdd9875903586 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
@@ -8,16 +8,14 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="big-number-total"
-        chartProps={{
-          formData: {
-            metric: 'sum__num',
-            subheader: 'total female participants',
-            vizType: 'big_number_total',
-            yAxisFormat: '.3s',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          metric: 'sum__num',
+          subheader: 'total female participants',
+          vizType: 'big_number_total',
+          yAxisFormat: '.3s',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx
deleted file mode 100644
index 1c54dc03a4226..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.jsx
+++ /dev/null
@@ -1,197 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="area"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'area',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Stacked',
-    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="area"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'area',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [0, 3000000000],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Stacked with yAxisBounds',
-    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="area"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBrush: 'auto',
-            showControls: true,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'area',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [1000000000, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Stacked with yAxisBounds min only',
-    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="area"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'expand',
-            vizType: 'area',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Expanded',
-    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="area"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBrush: 'auto',
-            showControls: true,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'area',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Controls Shown',
-    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
new file mode 100644
index 0000000000000..96be88b490c5e
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Area/Stories.tsx
@@ -0,0 +1,178 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import dummyDatasource from '../../../shared/dummyDatasource';
+import data from './data';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        datasource={dummyDatasource}
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'area',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Stacked',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        datasource={dummyDatasource}
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorCcheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'area',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [0, 3000000000],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Stacked with yAxisBounds',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        datasource={dummyDatasource}
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorCcheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBrush: 'auto',
+          showControls: true,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'area',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [1000000000, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Stacked with yAxisBounds min only',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        datasource={dummyDatasource}
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorCcheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'expand',
+          vizType: 'area',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Expanded',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="area"
+        datasource={dummyDatasource}
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorCcheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBrush: 'auto',
+          showControls: true,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'area',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Controls Shown',
+    storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx
deleted file mode 100644
index abc56c1482b4e..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.jsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bar"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBarValue: false,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'bar',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bar"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBarValue: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'bar',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Bar with values',
-    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bar"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBarValue: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'bar',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: {
-            data: data.map((group, i) => ({
-              ...group,
-              values: group.values.map(pair => ({ ...pair, y: (i % 2 === 0 ? 1 : -1) * pair.y })),
-            })),
-          },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Bar with positive and negative values',
-    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bar"
-        chartProps={{
-          datasource: {
-            verboseMap: {},
-          },
-          formData: {
-            barStacked: true,
-            bottomMargin: 'auto',
-            colorCcheme: 'd3Category10',
-            contribution: false,
-            groupby: ['region'],
-            lineInterpolation: 'linear',
-            metrics: ['sum__SP_POP_TOTL'],
-            richTooltip: true,
-            showBarValue: true,
-            showBrush: 'auto',
-            showControls: false,
-            showLegend: true,
-            stackedStyle: 'stack',
-            vizType: 'bar',
-            xAxisFormat: '%Y',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Stacked bar with values',
-    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.tsx
new file mode 100644
index 0000000000000..4280da3c5e904
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bar/Stories.tsx
@@ -0,0 +1,154 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBarValue: false,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'bar',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorCcheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBarValue: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'bar',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Bar with values',
+    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{
+          data: data.map((group, i) => ({
+            ...group,
+            values: group.values.map(pair => ({ ...pair, y: (i % 2 === 0 ? 1 : -1) * pair.y })),
+          })),
+        }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBarValue: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'bar',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Bar with positive and negative values',
+    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          barStacked: true,
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          groupby: ['region'],
+          lineInterpolation: 'linear',
+          metrics: ['sum__SP_POP_TOTL'],
+          richTooltip: true,
+          showBarValue: true,
+          showBrush: 'auto',
+          showControls: false,
+          showLegend: true,
+          stackedStyle: 'stack',
+          vizType: 'bar',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Stacked bar with values',
+    storyPath: 'legacy-|preset-chart-nvd3|BarChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.tsx
similarity index 53%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.tsx
index 381ad8a745713..f8c7fe43318b1 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/BoxPlot/Stories.tsx
@@ -2,22 +2,21 @@
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
 
 export default [
   {
     renderStory: () => (
       <SuperChart
         chartType="box-plot"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            colorScheme: 'd3Category10',
-            vizType: 'box_plot',
-            whiskerOptions: 'Min/max (no outliers)',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          vizType: 'box_plot',
+          whiskerOptions: 'Min/max (no outliers)',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.jsx
deleted file mode 100644
index d2ee4f6840300..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bubble"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            annotationData: {},
-            bottomMargin: 'auto',
-            colorScheme: 'd3Category10',
-            entity: 'country_name',
-            leftMargin: 'auto',
-            maxBubbleSize: '50',
-            series: 'region',
-            showLegend: true,
-            size: 'sum__SP_POP_TOTL',
-            vizType: 'bubble',
-            x: 'sum__SP_RUR_TOTL_ZS',
-            xAxisFormat: '.3s',
-            xAxisLabel: 'x-axis label',
-            xAxisShowminmax: false,
-            xLogScale: false,
-            xTicksLayout: 'auto',
-            y: 'sum__SP_DYN_LE00_IN',
-            yAxisFormat: '.3s',
-            yAxisLabel: '',
-            yAxisShowminmax: false,
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|BubbleChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.tsx
new file mode 100644
index 0000000000000..844f885b6fb1a
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bubble/Stories.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bubble"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          annotationData: {},
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          entity: 'country_name',
+          leftMargin: 'auto',
+          maxBubbleSize: '50',
+          series: 'region',
+          showLegend: true,
+          size: 'sum__SP_POP_TOTL',
+          vizType: 'bubble',
+          x: 'sum__SP_RUR_TOTL_ZS',
+          xAxisFormat: '.3s',
+          xAxisLabel: 'x-axis label',
+          xAxisShowminmax: false,
+          xLogScale: false,
+          xTicksLayout: 'auto',
+          y: 'sum__SP_DYN_LE00_IN',
+          yAxisFormat: '.3s',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|BubbleChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.jsx
deleted file mode 100644
index 913dd1387e669..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="bullet"
-        chartProps={{
-          formData: {
-            markerLabels: '',
-            markerLineLabels: '',
-            markerLines: '',
-            markers: '',
-            rangeLabels: '',
-            ranges: '',
-            vizType: 'bullet',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|BulletChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.tsx
new file mode 100644
index 0000000000000..9107280d5d81e
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Bullet/Stories.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="bullet"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          markerLabels: '',
+          markerLineLabels: '',
+          markerLines: '',
+          markers: '',
+          rangeLabels: '',
+          ranges: '',
+          vizType: 'bullet',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|BulletChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.jsx
deleted file mode 100644
index 6d437ebf07756..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="compare"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            bottomMargin: 'auto',
-            colorScheme: 'd3Category10',
-            contribution: false,
-            leftMargin: 'auto',
-            vizType: 'compare',
-            xAxisFormat: 'smart_date',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yAxisLabel: '',
-            yAxisShowminmax: false,
-            yLogscale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|CompareChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.tsx
new file mode 100644
index 0000000000000..14bb4745e8a22
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Compare/Stories.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="compare"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          leftMargin: 'auto',
+          vizType: 'compare',
+          xAxisFormat: 'smart_date',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogscale: false,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|CompareChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.tsx
similarity index 63%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.tsx
index 50322466c44f9..86400ad5c3d35 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.tsx
@@ -1,9 +1,15 @@
 /* eslint-disable no-magic-numbers */
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
-// import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
 
-const data = [{ key: 'sth', values: [] }];
+const data: {
+  key: string;
+  values: {
+    x: string;
+    y: number;
+  }[];
+}[] = [{ key: 'sth', values: [] }];
 const LONG_LABEL =
   'some extremely ridiculously extremely extremely extremely ridiculously extremely extremely ridiculously extremely extremely ridiculously extremely long category';
 
@@ -19,17 +25,15 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="dist-bar"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            showBarValue: false,
-            showLegend: true,
-            vizType: 'dist_bar',
-            xTicksLayout: 'auto',
-          },
-          height: 800,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          showBarValue: false,
+          showLegend: true,
+          vizType: 'dist_bar',
+          xTicksLayout: 'auto',
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.jsx
deleted file mode 100644
index efaea737f97c6..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="dist-bar"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            barstacked: false,
-            bottomMargin: 'auto',
-            colorScheme: 'd3Category10',
-            contribution: false,
-            orderBars: false,
-            reduceXTicks: false,
-            showBarValue: false,
-            showControls: false,
-            showLegend: true,
-            vizType: 'dist_bar',
-            xAxisLabel: 'ddd',
-            xTicksLayout: 'auto',
-            yAxisFormat: '.3s',
-            yAxisLabel: 'ddd',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|DistBarChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.tsx
new file mode 100644
index 0000000000000..4294bfe71efd6
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/Stories.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="dist-bar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          barstacked: false,
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          contribution: false,
+          orderBars: false,
+          reduceXTicks: false,
+          showBarValue: false,
+          showControls: false,
+          showLegend: true,
+          vizType: 'dist_bar',
+          xAxisLabel: 'ddd',
+          xTicksLayout: 'auto',
+          yAxisFormat: '.3s',
+          yAxisLabel: 'ddd',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|DistBarChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.tsx
similarity index 50%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.tsx
index 4518e9dcbaae2..3d95d5f331088 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
 
 const reverseData = data.map(series => ({
   ...series,
@@ -13,18 +14,16 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="dual-line"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            colorScheme: 'd3Category10',
-            vizType: 'dual_line',
-            xAxisFormat: 'smart_date',
-            yAxis2Format: '.3s',
-            yAxisFormat: '.3s',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          vizType: 'dual_line',
+          xAxisFormat: 'smart_date',
+          yAxis2Format: '.3s',
+          yAxisFormat: '.3s',
         }}
       />
     ),
@@ -36,34 +35,30 @@ export default [
       <div>
         <SuperChart
           chartType="dual-line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              colorScheme: 'd3Category10',
-              vizType: 'dual_line',
-              xAxisFormat: 'smart_date',
-              yAxis2Format: '.3s',
-              yAxisFormat: '.3s',
-            },
-            height: 400,
-            payload: { data },
-            width: 400,
+          width={400}
+          height={400}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            colorScheme: 'd3Category10',
+            vizType: 'dual_line',
+            xAxisFormat: 'smart_date',
+            yAxis2Format: '.3s',
+            yAxisFormat: '.3s',
           }}
         />
         <SuperChart
           chartType="dual-line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              colorScheme: 'd3Category10',
-              vizType: 'dual_line',
-              xAxisFormat: 'smart_date',
-              yAxis2Format: '.3s',
-              yAxisFormat: '.3s',
-            },
-            height: 400,
-            payload: { data: reverseData },
-            width: 400,
+          width={400}
+          height={400}
+          datasource={dummyDatasource}
+          payload={{ data: reverseData }}
+          formData={{
+            colorScheme: 'd3Category10',
+            vizType: 'dual_line',
+            xAxisFormat: 'smart_date',
+            yAxis2Format: '.3s',
+            yAxisFormat: '.3s',
           }}
         />
       </div>
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.tsx
similarity index 51%
rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.jsx
rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.tsx
index 04300569146d9..caaa965e3b4b2 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/LogStories.tsx
@@ -2,24 +2,23 @@
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
 
 export default [
   {
     renderStory: () => (
       <SuperChart
         chartType="line"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            richTooltip: true,
-            vizType: 'line',
-            yAxisBounds: [1, 60000],
-            yAxisFormat: ',d',
-            yLogScale: true,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          richTooltip: true,
+          vizType: 'line',
+          yAxisBounds: [1, 60000],
+          yAxisFormat: ',d',
+          yLogScale: true,
         }}
       />
     ),
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
deleted file mode 100644
index 64147cafdc6f1..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="line"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            bottomMargin: 'auto',
-            colorScheme: 'd3Category10',
-            leftMargin: 'auto',
-            lineInterpolation: 'linear',
-            richTooltip: true,
-            showBrush: 'auto',
-            showLegend: true,
-            showMarkers: false,
-            vizType: 'line',
-            xAxisFormat: 'smart_date',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yAxisLabel: '',
-            yAxisShowminmax: false,
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
-  },
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="line"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            bottomMargin: 'auto',
-            colorScheme: 'd3Category10',
-            leftMargin: 'auto',
-            lineInterpolation: 'linear',
-            richTooltip: true,
-            showBrush: 'auto',
-            showLegend: true,
-            showMarkers: true,
-            vizType: 'line',
-            xAxisFormat: 'smart_date',
-            xAxisLabel: '',
-            xAxisShowminmax: false,
-            xTicksLayout: 'auto',
-            yAxisBounds: [null, null],
-            yAxisFormat: '.3s',
-            yAxisLabel: '',
-            yAxisShowminmax: false,
-            yLogScale: false,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Markers',
-    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.tsx
new file mode 100644
index 0000000000000..c35d20eceb00e
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.tsx
@@ -0,0 +1,74 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="line"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          leftMargin: 'auto',
+          lineInterpolation: 'linear',
+          richTooltip: true,
+          showBrush: 'auto',
+          showLegend: true,
+          showMarkers: false,
+          vizType: 'line',
+          xAxisFormat: 'smart_date',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="line"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          leftMargin: 'auto',
+          lineInterpolation: 'linear',
+          richTooltip: true,
+          showBrush: 'auto',
+          showLegend: true,
+          showMarkers: true,
+          vizType: 'line',
+          xAxisFormat: 'smart_date',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '.3s',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
+      />
+    ),
+    storyName: 'Markers',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx
deleted file mode 100644
index 80d4374c35480..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <div className="container">
-        <h2>yAxisBounds</h2>
-        <pre>yAxisBounds=undefined</pre>
-        <SuperChart
-          chartType="line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              richTooltip: true,
-              showLegend: false,
-              vizType: 'line',
-            },
-            height: 200,
-            payload: { data },
-            width: 400,
-          }}
-        />
-        <pre>yAxisBounds=[0, 60000]</pre>
-        <SuperChart
-          chartType="line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              richTooltip: true,
-              showLegend: false,
-              vizType: 'line',
-              yAxisBounds: [0, 60000],
-            },
-            height: 200,
-            payload: { data },
-            width: 400,
-          }}
-        />
-        <pre>yAxisBounds=[null, 60000]</pre>
-        <SuperChart
-          chartType="line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              richTooltip: true,
-              showLegend: false,
-              vizType: 'line',
-              yAxisBounds: [null, 60000],
-            },
-            height: 200,
-            payload: { data },
-            width: 400,
-          }}
-        />
-        <pre>yAxisBounds=[40000, null]</pre>
-        <SuperChart
-          chartType="line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              richTooltip: true,
-              showLegend: false,
-              vizType: 'line',
-              yAxisBounds: [40000, null],
-            },
-            height: 200,
-            payload: { data },
-            width: 400,
-          }}
-        />
-        <pre>yAxisBounds=[40000, null] with Legend</pre>
-        <SuperChart
-          chartType="line"
-          chartProps={{
-            datasource: { verboseMap: {} },
-            formData: {
-              richTooltip: true,
-              showLegend: true,
-              vizType: 'line',
-              yAxisBounds: [40000, null],
-            },
-            height: 200,
-            payload: { data },
-            width: 400,
-          }}
-        />
-      </div>
-    ),
-    storyName: 'yAxisBounds',
-    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.tsx
new file mode 100644
index 0000000000000..40c905a32546c
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/YAxisStories.tsx
@@ -0,0 +1,86 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <div className="container">
+        <h2>yAxisBounds</h2>
+        <pre>yAxisBounds=undefined</pre>
+        <SuperChart
+          chartType="line"
+          width={400}
+          height={200}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            richTooltip: true,
+            showLegend: false,
+            vizType: 'line',
+          }}
+        />
+        <pre>yAxisBounds=[0, 60000]</pre>
+        <SuperChart
+          chartType="line"
+          width={400}
+          height={200}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            richTooltip: true,
+            showLegend: false,
+            vizType: 'line',
+            yAxisBounds: [0, 60000],
+          }}
+        />
+        <pre>yAxisBounds=[null, 60000]</pre>
+        <SuperChart
+          chartType="line"
+          width={400}
+          height={200}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            richTooltip: true,
+            showLegend: false,
+            vizType: 'line',
+            yAxisBounds: [null, 60000],
+          }}
+        />
+        <pre>yAxisBounds=[40000, null]</pre>
+        <SuperChart
+          chartType="line"
+          width={400}
+          height={200}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            richTooltip: true,
+            showLegend: false,
+            vizType: 'line',
+            yAxisBounds: [40000, null],
+          }}
+        />
+        <pre>yAxisBounds=[40000, null] with Legend</pre>
+        <SuperChart
+          chartType="line"
+          width={400}
+          height={200}
+          datasource={dummyDatasource}
+          payload={{ data }}
+          formData={{
+            richTooltip: true,
+            showLegend: true,
+            vizType: 'line',
+            yAxisBounds: [40000, null],
+          }}
+        />
+      </div>
+    ),
+    storyName: 'yAxisBounds',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.jsx
deleted file mode 100644
index 1833d8d23d0a7..0000000000000
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import React from 'react';
-import { SuperChart } from '@superset-ui/chart';
-import data from './data';
-
-export default [
-  {
-    renderStory: () => (
-      <SuperChart
-        chartType="pie"
-        chartProps={{
-          datasource: { verboseMap: {} },
-          formData: {
-            colorScheme: 'd3Category10',
-            donut: false,
-            labelsOutside: true,
-            numberFormat: '.3s',
-            pieLabelType: 'key',
-            showLabels: true,
-            showLegend: true,
-            vizType: 'pie',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
-    ),
-    storyName: 'Basic',
-    storyPath: 'legacy-|preset-chart-nvd3|PieChartPlugin',
-  },
-];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
new file mode 100644
index 0000000000000..76fb45a1d570a
--- /dev/null
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Pie/Stories.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="pie"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          donut: false,
+          labelsOutside: true,
+          numberFormat: '.3s',
+          pieLabelType: 'key',
+          showLabels: true,
+          showLegend: true,
+          vizType: 'pie',
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|PieChartPlugin',
+  },
+];
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Basic.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Basic.tsx
index 55776a9374ab2..b5a95b5f82df9 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Basic.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Basic.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data';
 
 export default [
@@ -8,48 +8,43 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="v2-box-plot"
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  type: 'nominal',
-                  field: 'label',
-                  scale: {
-                    type: 'band',
-                    paddingInner: 0.15,
-                    paddingOuter: 0.3,
-                  },
-                  axis: {
-                    label: 'Region',
-                  },
-                },
-                y: {
-                  field: 'value',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    label: 'Population',
-                    numTicks: 5,
-                  },
-                },
-                color: {
-                  type: 'nominal',
-                  field: 'label',
-                  scale: {
-                    scheme: 'd3Category10',
-                  },
-                },
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              type: 'nominal',
+              field: 'label',
+              scale: {
+                type: 'band',
+                paddingInner: 0.15,
+                paddingOuter: 0.3,
+              },
+              axis: {
+                label: 'Region',
+              },
+            },
+            y: {
+              field: 'value',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                label: 'Population',
+                numTicks: 5,
+              },
+            },
+            color: {
+              type: 'nominal',
+              field: 'label',
+              scale: {
+                scheme: 'd3Category10',
               },
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
       />
     ),
     storyName: 'Basic',
@@ -59,48 +54,43 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="v2-box-plot"
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                y: {
-                  type: 'nominal',
-                  field: 'label',
-                  scale: {
-                    type: 'band',
-                    paddingInner: 0.15,
-                    paddingOuter: 0.3,
-                  },
-                  axis: {
-                    label: 'Region',
-                  },
-                },
-                x: {
-                  field: 'value',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    label: 'Population',
-                    numTicks: 5,
-                  },
-                },
-                color: {
-                  type: 'nominal',
-                  field: 'label',
-                  scale: {
-                    scheme: 'd3Category10',
-                  },
-                },
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            y: {
+              type: 'nominal',
+              field: 'label',
+              scale: {
+                type: 'band',
+                paddingInner: 0.15,
+                paddingOuter: 0.3,
+              },
+              axis: {
+                label: 'Region',
+              },
+            },
+            x: {
+              field: 'value',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                label: 'Population',
+                numTicks: 5,
+              },
+            },
+            color: {
+              type: 'nominal',
+              field: 'label',
+              scale: {
+                scheme: 'd3Category10',
               },
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
       />
     ),
     storyName: 'Horizontal',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Legacy.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Legacy.tsx
index 59fbb55c33c9b..df45d362b6670 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Legacy.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/stories/Legacy.tsx
@@ -1,28 +1,25 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
     renderStory: () => (
       <SuperChart
         chartType="v2-box-plot/legacy"
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              colorScheme: 'd3Category10',
-              groupby: ['region'],
-              metrics: ['sum__SP_POP_TOTL'],
-              vizType: 'box_plot',
-              whiskerOptions: 'Min/max (no outliers)',
-            },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          groupby: ['region'],
+          metrics: ['sum__SP_POP_TOTL'],
+          vizType: 'box_plot',
+          whiskerOptions: 'Min/max (no outliers)',
+        }}
       />
     ),
     storyName: 'Use Legacy API shim',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx
index 07ff25252ae26..3de6d72306622 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import { radios } from '@storybook/addon-knobs';
 import data from '../data/data';
 import { LINE_PLUGIN_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
@@ -11,58 +12,54 @@ export default [
       <SuperChart
         key="line1"
         chartType={LINE_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'x',
-                  type: 'temporal',
-                  format: '%Y-%m',
-                  scale: {
-                    type: 'time',
-                  },
-                  axis: {
-                    orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
-                    title: radios(
-                      'x.axis.title',
-                      { enable: 'Time', disable: '', '': undefined },
-                      'Time',
-                    ),
-                  },
-                },
-                y: {
-                  field: 'y',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: radios(
-                      'y.axis.orient',
-                      { left: 'left', right: 'right', '': undefined },
-                      'left',
-                    ),
-                    title: radios(
-                      'y.axis.title',
-                      { enable: 'Score', disable: '', '': undefined },
-                      'Score',
-                    ),
-                  },
-                },
-                stroke: {
-                  field: 'name',
-                  type: 'nominal',
-                  legend: true,
-                },
+        datasource={dummyDatasource}
+        formData={{
+          encoding: {
+            x: {
+              field: 'x',
+              type: 'temporal',
+              format: '%Y-%m',
+              scale: {
+                type: 'time',
               },
+              axis: {
+                orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
+                title: radios(
+                  'x.axis.title',
+                  { enable: 'Time', disable: '', '': undefined },
+                  'Time',
+                ),
+              },
+            },
+            y: {
+              field: 'y',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                orient: radios(
+                  'y.axis.orient',
+                  { left: 'left', right: 'right', '': undefined },
+                  'left',
+                ),
+                title: radios(
+                  'y.axis.title',
+                  { enable: 'Score', disable: '', '': undefined },
+                  'Score',
+                ),
+              },
+            },
+            stroke: {
+              field: 'name',
+              type: 'nominal',
+              legend: true,
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
+        height={400}
+        payload={{ data }}
+        width={400}
       />,
     ],
     storyName: 'Basic',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/flush.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/flush.tsx
index 452a37813d83a..53ac450191ac6 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/flush.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/flush.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import { radios } from '@storybook/addon-knobs';
 import rawData from '../data/data';
 import { LINE_PLUGIN_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 const MIN_TIME = new Date(Date.UTC(1980, 0, 1)).getTime();
 const MAX_TIME = new Date(Date.UTC(2000, 1, 1)).getTime();
@@ -15,119 +16,111 @@ export default [
       <SuperChart
         key="line1"
         chartType={LINE_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'x',
-                  type: 'temporal',
-                  format: '%Y',
-                  scale: {
-                    type: 'utc',
-                  },
-                  axis: {
-                    tickCount: 6,
-                    orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
-                    title: radios(
-                      'x.axis.title',
-                      { enable: 'Time', disable: '', '': undefined },
-                      'Time',
-                    ),
-                  },
-                },
-                y: {
-                  field: 'y',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    tickCount: 3,
-                    orient: radios(
-                      'y.axis.orient',
-                      { left: 'left', right: 'right', '': undefined },
-                      'left',
-                    ),
-                    title: radios(
-                      'y.axis.title',
-                      { enable: 'Score', disable: '', '': undefined },
-                      'Score',
-                    ),
-                  },
-                },
-                stroke: {
-                  field: 'name',
-                  type: 'nominal',
-                  legend: true,
-                },
+        width={400}
+        height={200}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'x',
+              type: 'temporal',
+              format: '%Y',
+              scale: {
+                type: 'utc',
               },
+              axis: {
+                tickCount: 6,
+                orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
+                title: radios(
+                  'x.axis.title',
+                  { enable: 'Time', disable: '', '': undefined },
+                  'Time',
+                ),
+              },
+            },
+            y: {
+              field: 'y',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                tickCount: 3,
+                orient: radios(
+                  'y.axis.orient',
+                  { left: 'left', right: 'right', '': undefined },
+                  'left',
+                ),
+                title: radios(
+                  'y.axis.title',
+                  { enable: 'Score', disable: '', '': undefined },
+                  'Score',
+                ),
+              },
+            },
+            stroke: {
+              field: 'name',
+              type: 'nominal',
+              legend: true,
             },
-            height: 200,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
       />,
       <SuperChart
-        key="line1"
+        key="line2"
         chartType={LINE_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'x',
-                  type: 'temporal',
-                  format: '%Y',
-                  scale: {
-                    type: 'utc',
-                  },
-                  axis: {
-                    labelFlush: 5,
-                    tickCount: 6,
-                    orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
-                    title: radios(
-                      'x.axis.title',
-                      { enable: 'Time', disable: '', '': undefined },
-                      'Time',
-                    ),
-                  },
-                },
-                y: {
-                  field: 'y',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    tickCount: 3,
-                    orient: radios(
-                      'y.axis.orient',
-                      { left: 'left', right: 'right', '': undefined },
-                      'left',
-                    ),
-                    title: radios(
-                      'y.axis.title',
-                      { enable: 'Score', disable: '', '': undefined },
-                      'Score',
-                    ),
-                  },
-                },
-                stroke: {
-                  field: 'name',
-                  type: 'nominal',
-                  legend: true,
-                },
+        width={400}
+        height={200}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'x',
+              type: 'temporal',
+              format: '%Y',
+              scale: {
+                type: 'utc',
               },
+              axis: {
+                labelFlush: 5,
+                tickCount: 6,
+                orient: radios('x.axis.orient', { top: 'top', bottom: 'bottom' }, 'bottom'),
+                title: radios(
+                  'x.axis.title',
+                  { enable: 'Time', disable: '', '': undefined },
+                  'Time',
+                ),
+              },
+            },
+            y: {
+              field: 'y',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                tickCount: 3,
+                orient: radios(
+                  'y.axis.orient',
+                  { left: 'left', right: 'right', '': undefined },
+                  'left',
+                ),
+                title: radios(
+                  'y.axis.title',
+                  { enable: 'Score', disable: '', '': undefined },
+                  'Score',
+                ),
+              },
+            },
+            stroke: {
+              field: 'name',
+              type: 'nominal',
+              legend: true,
             },
-            height: 200,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
       />,
     ],
     storyName: 'with labelFlush',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/legacy.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/legacy.tsx
index 3ba98239a3647..00077f9790101 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/legacy.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/legacy.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-magic-numbers */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data/legacyData';
 import { LINE_PLUGIN_LEGACY_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
@@ -10,66 +11,58 @@ export default [
       <SuperChart
         key="line1"
         chartType={LINE_PLUGIN_LEGACY_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              bottomMargin: 'auto',
-              colorScheme: 'd3Category10',
-              leftMargin: 'auto',
-              lineInterpolation: 'linear',
-              richTooltip: true,
-              showBrush: 'auto',
-              showLegend: true,
-              showMarkers: false,
-              vizType: 'line',
-              xAxisFormat: '%Y',
-              xAxisLabel: '',
-              xAxisShowminmax: false,
-              xTicksLayout: 'auto',
-              yAxisBounds: [null, null],
-              yAxisFormat: '',
-              yAxisLabel: '',
-              yAxisShowminmax: false,
-              yLogScale: false,
-            },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          leftMargin: 'auto',
+          lineInterpolation: 'linear',
+          richTooltip: true,
+          showBrush: 'auto',
+          showLegend: true,
+          showMarkers: false,
+          vizType: 'line',
+          xAxisFormat: '%Y',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
       />,
       <SuperChart
         key="line2"
         chartType={LINE_PLUGIN_LEGACY_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              bottomMargin: 'auto',
-              colorScheme: 'd3Category10',
-              leftMargin: 'auto',
-              lineInterpolation: 'linear',
-              richTooltip: true,
-              showBrush: 'auto',
-              showLegend: true,
-              showMarkers: false,
-              vizType: 'line',
-              xAxisFormat: '%Y-%m',
-              xAxisLabel: '',
-              xAxisShowminmax: false,
-              xTicksLayout: 'auto',
-              yAxisBounds: [null, null],
-              yAxisFormat: '',
-              yAxisLabel: '',
-              yAxisShowminmax: false,
-              yLogScale: false,
-            },
-            height: 400,
-            payload: { data },
-            width: 800,
-          })
-        }
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          leftMargin: 'auto',
+          lineInterpolation: 'linear',
+          richTooltip: true,
+          showBrush: 'auto',
+          showLegend: true,
+          showMarkers: false,
+          vizType: 'line',
+          xAxisFormat: '%Y-%m',
+          xAxisLabel: '',
+          xAxisShowminmax: false,
+          xTicksLayout: 'auto',
+          yAxisBounds: [null, null],
+          yAxisFormat: '',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
       />,
     ],
     storyName: 'Use Legacy API shim',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
index adcc4572d0107..08b2a9f3f1737 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data/data';
 import { LINE_PLUGIN_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 const missingData = data.map(({ y, ...rest }) => ({
   ...rest,
@@ -15,47 +16,43 @@ export default [
       <SuperChart
         key="line1"
         chartType={LINE_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'x',
-                  type: 'temporal',
-                  format: '%Y',
-                  scale: {
-                    type: 'time',
-                  },
-                  axis: {
-                    orient: 'bottom',
-                    title: 'Time',
-                  },
-                },
-                y: {
-                  field: 'y',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: 'left',
-                    title: 'Score',
-                  },
-                },
-                stroke: {
-                  field: 'name',
-                  type: 'nominal',
-                  scale: {},
-                  legend: true,
-                },
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data: missingData }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'x',
+              type: 'temporal',
+              format: '%Y',
+              scale: {
+                type: 'time',
               },
+              axis: {
+                orient: 'bottom',
+                title: 'Time',
+              },
+            },
+            y: {
+              field: 'y',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                orient: 'left',
+                title: 'Score',
+              },
+            },
+            stroke: {
+              field: 'name',
+              type: 'nominal',
+              scale: {},
+              legend: true,
             },
-            height: 400,
-            payload: { data: missingData },
-            width: 400,
-          })
-        }
+          },
+        }}
       />,
     ],
     storyName: 'with missing data',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx
index 23718818f5621..41a023267d1b4 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data/data2';
 import { LINE_PLUGIN_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
@@ -10,76 +11,72 @@ export default [
       <SuperChart
         key="line1"
         chartType={LINE_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'x',
-                  type: 'temporal',
-                  format: '%Y',
-                  scale: {
-                    type: 'time',
-                  },
-                  axis: {
-                    orient: 'bottom',
-                    title: 'Time',
-                  },
-                },
-                y: {
-                  field: 'y',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: 'left',
-                    title: 'Score',
-                  },
-                },
-                stroke: {
-                  value: '#1abc9c',
-                  type: 'nominal',
-                  scale: false,
-                },
-                fill: {
-                  field: 'snapshot',
-                  type: 'nominal',
-                  scale: {
-                    type: 'ordinal',
-                    domain: ['Current', 'Last year'],
-                    range: [true, false],
-                  },
-                  legend: false,
-                },
-                strokeDasharray: {
-                  field: 'snapshot',
-                  type: 'nominal',
-                  scale: {
-                    type: 'ordinal',
-                    domain: ['Current', 'Last year'],
-                    range: [null, '4 4'],
-                  },
-                  legend: false,
-                },
-                strokeWidth: {
-                  field: 'snapshot',
-                  type: 'nominal',
-                  scale: {
-                    type: 'ordinal',
-                    domain: ['Current', 'Last year'],
-                    range: [3, 1.5],
-                  },
-                  legend: false,
-                },
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'x',
+              type: 'temporal',
+              format: '%Y',
+              scale: {
+                type: 'time',
               },
+              axis: {
+                orient: 'bottom',
+                title: 'Time',
+              },
+            },
+            y: {
+              field: 'y',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                orient: 'left',
+                title: 'Score',
+              },
+            },
+            stroke: {
+              value: '#1abc9c',
+              type: 'nominal',
+              scale: false,
+            },
+            fill: {
+              field: 'snapshot',
+              type: 'nominal',
+              scale: {
+                type: 'ordinal',
+                domain: ['Current', 'Last year'],
+                range: [true, false],
+              },
+              legend: false,
+            },
+            strokeDasharray: {
+              field: 'snapshot',
+              type: 'nominal',
+              scale: {
+                type: 'ordinal',
+                domain: ['Current', 'Last year'],
+                range: [null, '4 4'],
+              },
+              legend: false,
+            },
+            strokeWidth: {
+              field: 'snapshot',
+              type: 'nominal',
+              scale: {
+                type: 'ordinal',
+                domain: ['Current', 'Last year'],
+                range: [3, 1.5],
+              },
+              legend: false,
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+          },
+        }}
       />,
     ],
     storyName: 'with time shift',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/basic.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/basic.jsx
index bd0c3b4bf5c5a..cd85819b826a7 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/basic.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/basic.jsx
@@ -1,9 +1,10 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import { radios } from '@storybook/addon-knobs';
 import data from '../data/data';
 import { SCATTER_PLOT_PLUGIN_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
@@ -11,44 +12,40 @@ export default [
       <SuperChart
         key="scatter-plot1"
         chartType={SCATTER_PLOT_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'sum__SP_RUR_TOTL_ZS',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: radios('x.axis.orient', ['top', 'bottom'], 'bottom'),
-                  },
-                },
-                y: {
-                  field: 'sum__SP_DYN_LE00_IN',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: radios('y.axis.orient', ['left', 'right'], 'left'),
-                  },
-                },
-                fill: {
-                  field: 'region',
-                  type: 'nominal',
-                  legend: true,
-                },
-                group: [{ field: 'country_name', title: 'Country' }],
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'sum__SP_RUR_TOTL_ZS',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
               },
+              axis: {
+                orient: radios('x.axis.orient', ['top', 'bottom'], 'bottom'),
+              },
+            },
+            y: {
+              field: 'sum__SP_DYN_LE00_IN',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                orient: radios('y.axis.orient', ['left', 'right'], 'left'),
+              },
+            },
+            fill: {
+              field: 'region',
+              type: 'nominal',
+              legend: true,
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+            group: [{ field: 'country_name', title: 'Country' }],
+          },
+        }}
       />,
     ],
     storyName: 'Basic',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/bubble.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/bubble.jsx
index e28cd92bd1656..02c4f5a624566 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/bubble.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/bubble.jsx
@@ -1,7 +1,8 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import { radios } from '@storybook/addon-knobs';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 import data from '../data/data';
 import { SCATTER_PLOT_PLUGIN_TYPE } from '../constants';
 
@@ -11,52 +12,48 @@ export default [
       <SuperChart
         key="scatter-plot1"
         chartType={SCATTER_PLOT_PLUGIN_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              encoding: {
-                x: {
-                  field: 'sum__SP_RUR_TOTL_ZS',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: radios('x.axis.orient', ['top', 'bottom'], 'bottom'),
-                  },
-                },
-                y: {
-                  field: 'sum__SP_DYN_LE00_IN',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                  },
-                  axis: {
-                    orient: radios('y.axis.orient', ['left', 'right'], 'left'),
-                  },
-                },
-                size: {
-                  field: 'sum__SP_POP_TOTL',
-                  type: 'quantitative',
-                  scale: {
-                    type: 'linear',
-                    range: [0, 30],
-                  },
-                },
-                fill: {
-                  field: 'region',
-                  type: 'nominal',
-                  legend: true,
-                },
-                group: [{ field: 'country_name', title: 'Country' }],
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          encoding: {
+            x: {
+              field: 'sum__SP_RUR_TOTL_ZS',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
               },
+              axis: {
+                orient: radios('x.axis.orient', ['top', 'bottom'], 'bottom'),
+              },
+            },
+            y: {
+              field: 'sum__SP_DYN_LE00_IN',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+              },
+              axis: {
+                orient: radios('y.axis.orient', ['left', 'right'], 'left'),
+              },
+            },
+            size: {
+              field: 'sum__SP_POP_TOTL',
+              type: 'quantitative',
+              scale: {
+                type: 'linear',
+                range: [0, 30],
+              },
+            },
+            fill: {
+              field: 'region',
+              type: 'nominal',
+              legend: true,
             },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+            group: [{ field: 'country_name', title: 'Country' }],
+          },
+        }}
       />,
     ],
     storyName: 'Bubble',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/legacy.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/legacy.tsx
index 6e6d51a0fc3ac..747c046057e02 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/legacy.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/legacy.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable no-magic-numbers */
 import * as React from 'react';
-import { SuperChart, ChartProps } from '@superset-ui/chart';
+import { SuperChart } from '@superset-ui/chart';
 import data from '../data/legacyData';
 import { SCATTER_PLOT_PLUGIN_LEGACY_TYPE } from '../constants';
+import dummyDatasource from '../../../../shared/dummyDatasource';
 
 export default [
   {
@@ -10,37 +11,33 @@ export default [
       <SuperChart
         key="scatter-plot1"
         chartType={SCATTER_PLOT_PLUGIN_LEGACY_TYPE}
-        chartProps={
-          new ChartProps({
-            datasource: { verboseMap: {} },
-            formData: {
-              annotationData: {},
-              bottomMargin: 'auto',
-              colorScheme: 'd3Category10',
-              entity: 'country_name',
-              leftMargin: 'auto',
-              maxBubbleSize: '50',
-              series: 'region',
-              showLegend: true,
-              size: 'sum__SP_POP_TOTL',
-              vizType: 'bubble',
-              x: 'sum__SP_RUR_TOTL_ZS',
-              xAxisFormat: '.3s',
-              xAxisLabel: 'x-axis label',
-              xAxisShowminmax: false,
-              xLogScale: false,
-              xTicksLayout: 'auto',
-              y: 'sum__SP_DYN_LE00_IN',
-              yAxisFormat: '.3s',
-              yAxisLabel: '',
-              yAxisShowminmax: false,
-              yLogScale: false,
-            },
-            height: 400,
-            payload: { data },
-            width: 400,
-          })
-        }
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          annotationData: {},
+          bottomMargin: 'auto',
+          colorScheme: 'd3Category10',
+          entity: 'country_name',
+          leftMargin: 'auto',
+          maxBubbleSize: '50',
+          series: 'region',
+          showLegend: true,
+          size: 'sum__SP_POP_TOTL',
+          vizType: 'bubble',
+          x: 'sum__SP_RUR_TOTL_ZS',
+          xAxisFormat: '.3s',
+          xAxisLabel: 'x-axis label',
+          xAxisShowminmax: false,
+          xLogScale: false,
+          xTicksLayout: 'auto',
+          y: 'sum__SP_DYN_LE00_IN',
+          yAxisFormat: '.3s',
+          yAxisLabel: '',
+          yAxisShowminmax: false,
+          yLogScale: false,
+        }}
       />,
     ],
     storyName: 'Use Legacy API shim',
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json
index 63dc06f7c8812..ab40a55b59f2e 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json
@@ -24,5 +24,5 @@
     "sourceMap": true,
     "target": "esnext"
   },
-  "include": ["./storybook/stories/**/*", "../superset-ui-*/src/**/*", "./src/**/*", "./spec/**/*"]
+  "include": ["./storybook/stories/**/*", "../superset-ui-*/src/**/*", "./src/**/*", "./spec/**/*", "storybook/shared/dummyDatasource.ts"]
 }