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 0000000000000..e2cfb02229a40
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 fdf6fcf774f83..824f8f3dbacd3 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 c7f1aac5b2d28..a9b451b3153fb 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 0000000000000..732aa8dde50c2
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 0000000000000..0424e67660f32
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 6c215aea0393d..a46e0b753570c 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 0000000000000..d8a13f67e8203
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 a314c4650795a..218e45f9cd75b 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 0000000000000..2ec8881c31b58
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 3adcd73a289bb..ae7d194b90c94 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 0000000000000..43f648cbac6c5
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 ba5a7f01734f6..742b92151a6d5 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 0000000000000..0ffad121c93c6
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 0000000000000..8414ea66ce45b
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 a65a380de23e6..15de1cd9bee32 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 0000000000000..53aa9cfafc57f
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 7e3c26a925089..621e063d84a39 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 0000000000000..056ada15086c5
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 0000000000000..8dd0854409c6d
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 d810a0a3214cd..596f41cfbc468 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 0000000000000..2307cec80d2d0
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 0000000000000..94dc10538511b
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 48e2d5d904b09..41249f2d71622 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 a07e4dd267159..ae61945f05350 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 e1f871fa4cf4f..137a2b191af24 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 0000000000000..cc109ee5aa387
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 0000000000000..17912d52f72cf
Binary files /dev/null and b/superset-frontend/src/visualizations/FilterBox/images/example2.jpg differ