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 000000000..e2cfb0222
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 fdf6fcf77..824f8f3db 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 c7f1aac5b..a9b451b31 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 000000000..732aa8dde
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 000000000..0424e6766
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 6c215aea0..a46e0b753 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 000000000..d8a13f67e
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 a314c4650..218e45f9c 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 000000000..2ec8881c3
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 3adcd73a2..ae7d194b9 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 000000000..43f648cba
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 ba5a7f017..742b92151 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 000000000..0ffad121c
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 000000000..8414ea66c
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 a65a380de..15de1cd9b 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 000000000..53aa9cfaf
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 7e3c26a92..621e063d8 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 000000000..056ada150
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 000000000..8dd085440
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 d810a0a32..596f41cfb 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 000000000..2307cec80
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 000000000..94dc10538
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 48e2d5d90..41249f2d7 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 a07e4dd26..ae61945f0 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 e1f871fa4..137a2b191 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 000000000..cc109ee5a
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 000000000..17912d52f
Binary files /dev/null and b/superset-frontend/src/visualizations/FilterBox/images/example2.jpg differ