diff --git a/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/images/example.jpg b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/images/example.jpg
new file mode 100644
index 00000000000..e2cfb02229a
Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/images/example.jpg differ
diff --git a/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/index.ts b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/index.ts
index fdf6fcf774f..824f8f3dbac 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/index.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/index.ts
@@ -18,6 +18,7 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -26,6 +27,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Compares the lengths of time different activities take in a shared timeline view.',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Event Flow'),
   tags: [t('Legacy'), t('Progressive')],
   thumbnail,
diff --git a/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/types/external.d.ts b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/types/external.d.ts
index c7f1aac5b2d..a9b451b3153 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/types/external.d.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-event-flow/src/types/external.d.ts
@@ -18,4 +18,5 @@
  */
 
 declare module '*.png';
+declare module '*.jpg';
 declare module '@data-ui/event-flow';
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1.jpg b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1.jpg
new file mode 100644
index 00000000000..732aa8dde50
Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example1.jpg differ
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2.jpg b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2.jpg
new file mode 100644
index 00000000000..0424e67660f
Binary files /dev/null and b/superset-frontend/plugins/legacy-plugin-chart-rose/src/images/example2.jpg differ
diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js
index 6c215aea039..a46e0b75357 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/index.js
@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -26,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'A polar coordinate chart where the circle is broken into wedges of equal angle, and the value represented by any wedge is illustrated by its area, rather than its radius or sweep angle.',
   ),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   name: t('Nightingale Rose Chart'),
   tags: [
     t('Legacy'),
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/images/example.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/images/example.jpg
new file mode 100644
index 00000000000..d8a13f67e82
Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/images/example.jpg differ
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js
index a314c465079..218e45f9cd7 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js
@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualizes 2 metrics as line plots using the same x-axis. This chart is useful for comparing metrics across the same time range.',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Dual Line Chart'),
   tags: [t('Legacy'), t('nvd3')],
   thumbnail,
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/images/example.jpg b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/images/example.jpg
new file mode 100644
index 00000000000..2ec8881c31b
Binary files /dev/null and b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/images/example.jpg differ
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js
index 3adcd73a289..ae7d194b90c 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js
@@ -19,6 +19,7 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -27,6 +28,7 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualize two different time series using the same x-axis time range. This chart is being deprecated and we recommend using the Mixed Timeseries Chart instead!',
   ),
+  exampleGallery: [{ url: example }],
   name: t('Multiple Line Charts'),
   tags: [
     t('Multi-Variables'),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example.jpg
new file mode 100644
index 00000000000..43f648cbac6
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/images/example.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
index ba5a7f01734..742b92151a6 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
@@ -21,6 +21,7 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types';
 
 export default class EchartsFunnelChartPlugin extends ChartPlugin<
@@ -49,6 +50,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
         description: t(
           'Showcases how a metric changes as the funnel progresses. This classic chart is useful for visualizing drop-off between stages in a pipeline or lifecycle.',
         ),
+        exampleGallery: [{ url: example }],
         name: t('Funnel Chart'),
         tags: [
           t('Business'),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1.jpg
new file mode 100644
index 00000000000..0ffad121c93
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example1.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2.jpg
new file mode 100644
index 00000000000..8414ea66ce4
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/images/example2.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
index a65a380de23..15de1cd9bee 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
@@ -20,6 +20,8 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import buildQuery from './buildQuery';
 import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types';
 
@@ -39,6 +41,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
         description: t(
           'Uses a gauge to showcase progress of a metric towards a target. The position of the dial represents the progress and the terminal value in the gauge represents the target value.',
         ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Gauge Chart'),
         tags: [
           t('Multi-Variables'),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example.jpg
new file mode 100644
index 00000000000..53aa9cfafc5
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/images/example.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
index 7e3c26a9250..621e063d84a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
@@ -20,6 +20,7 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example from './images/example.jpg';
 import buildQuery from './buildQuery';
 
 export default class EchartsGraphChartPlugin extends ChartPlugin {
@@ -34,6 +35,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
         description: t(
           'Displays connections between entities in a graph structure. Useful for mapping relationships and showing which nodes are important in a network. Graph charts can be configured to be force-directed or circulate. If your data has a geospatial component, try the deck.gl Arc chart.',
         ),
+        exampleGallery: [{ url: example }],
         name: t('Graph Chart'),
         tags: [
           t('Aesthetic'),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1.jpg
new file mode 100644
index 00000000000..056ada15086
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example1.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2.jpg b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2.jpg
new file mode 100644
index 00000000000..8dd0854409c
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/images/example2.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
index d810a0a3214..596f41cfbc4 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
@@ -22,6 +22,8 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import { EchartsRadarChartProps, EchartsRadarFormData } from './types';
 
 export default class EchartsRadarChartPlugin extends ChartPlugin<
@@ -50,6 +52,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
         description: t(
           'Visualize a parallel set of metrics across multiple groups. Each group is visualized using its own line of points and each metric is represented as an edge in the chart.',
         ),
+        exampleGallery: [{ url: example1 }, { url: example2 }],
         name: t('Radar Chart'),
         tags: [
           t('Business'),
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1.jpg b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1.jpg
new file mode 100644
index 00000000000..2307cec80d2
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example1.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2.jpg b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2.jpg
new file mode 100644
index 00000000000..94dc1053851
Binary files /dev/null and b/superset-frontend/plugins/plugin-chart-handlebars/src/images/example2.jpg differ
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts
index 48e2d5d904b..41249f2d716 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/index.ts
@@ -18,6 +18,8 @@
  */
 import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import thumbnail from '../images/thumbnail.png';
+import example1 from '../images/example1.jpg';
+import example2 from '../images/example2.jpg';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -38,6 +40,7 @@ export default class HandlebarsChartPlugin extends ChartPlugin {
       description: t('Write a handlebars template to render the data'),
       name: t('Handlebars'),
       thumbnail,
+      exampleGallery: [{ url: example1 }, { url: example2 }],
     });
 
     super({
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts b/superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts
index a07e4dd2671..ae61945f053 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts
+++ b/superset-frontend/plugins/plugin-chart-handlebars/types/external.d.ts
@@ -20,5 +20,5 @@ declare module '*.png' {
   const value: any;
   export default value;
 }
-
+declare module '*.jpg';
 declare module 'just-handlebars-helpers';
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBoxChartPlugin.js b/superset-frontend/src/visualizations/FilterBox/FilterBoxChartPlugin.js
index e1f871fa4cf..137a2b191af 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBoxChartPlugin.js
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBoxChartPlugin.js
@@ -19,6 +19,8 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -28,6 +30,7 @@ const metadata = new ChartMetadata({
     t(`Chart component that lets you add a custom filter UI in your dashboard. When added to dashboard, a filter box lets users specify specific values or ranges to filter charts by. The charts that each filter box is applied to can be fine tuned as well in the dashboard view.
 
     Note that this plugin is being replaced with the new Filters feature that lives in the dashboard view itself. It's easier to use and has more capabilities!`),
+  exampleGallery: [{ url: example1 }, { url: example2 }],
   thumbnail,
   useLegacyApi: true,
 });
diff --git a/superset-frontend/src/visualizations/FilterBox/images/example1.jpg b/superset-frontend/src/visualizations/FilterBox/images/example1.jpg
new file mode 100644
index 00000000000..cc109ee5aa3
Binary files /dev/null and b/superset-frontend/src/visualizations/FilterBox/images/example1.jpg differ
diff --git a/superset-frontend/src/visualizations/FilterBox/images/example2.jpg b/superset-frontend/src/visualizations/FilterBox/images/example2.jpg
new file mode 100644
index 00000000000..17912d52f72
Binary files /dev/null and b/superset-frontend/src/visualizations/FilterBox/images/example2.jpg differ