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 000000000000..e2cfb02229a4
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 fdf6fcf774f8..824f8f3dbacd 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 c7f1aac5b2d2..a9b451b3153f 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 000000000000..732aa8dde50c
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 000000000000..0424e67660f3
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 6c215aea0393..a46e0b753570 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 000000000000..d8a13f67e820
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 a314c4650795..218e45f9cd75 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 000000000000..2ec8881c31b5
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 3adcd73a289b..ae7d194b90c9 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 000000000000..43f648cbac6c
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 ba5a7f01734f..742b92151a6d 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 000000000000..0ffad121c93c
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 000000000000..8414ea66ce45
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 a65a380de23e..15de1cd9bee3 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 000000000000..53aa9cfafc57
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 7e3c26a92508..621e063d84a3 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 000000000000..056ada15086c
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 000000000000..8dd0854409c6
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 d810a0a3214c..596f41cfbc46 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 000000000000..2307cec80d2d
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 000000000000..94dc10538511
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 48e2d5d904b0..41249f2d7162 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 a07e4dd26715..ae61945f0535 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 e1f871fa4cf4..137a2b191af2 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 000000000000..cc109ee5aa38
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 000000000000..17912d52f72c
Binary files /dev/null and b/superset-frontend/src/visualizations/FilterBox/images/example2.jpg differ