From fef637885a5dcca350063d14bd8603edea0edbf4 Mon Sep 17 00:00:00 2001
From: Barbier--Darnal Joseph <joseph.barbierdarnal@gmail.com>
Date: Wed, 31 Jul 2024 15:19:52 +0200
Subject: [PATCH] add logo and button in every main page

---
 src/pages/2d-density-plot.js            | 1 +
 src/pages/3d.js                         | 1 +
 src/pages/animation.js                  | 6 +++++-
 src/pages/arc-diagram.js                | 6 +++++-
 src/pages/area-plot.js                  | 6 +++++-
 src/pages/boxplot.js                    | 6 +++++-
 src/pages/bubble-map.js                 | 6 +++++-
 src/pages/bubble-plot.js                | 6 +++++-
 src/pages/candlestick.js                | 6 +++++-
 src/pages/cartogram.js                  | 6 +++++-
 src/pages/cheat-sheets.js               | 1 +
 src/pages/chord-diagram.js              | 1 +
 src/pages/choropleth-map.js             | 1 +
 src/pages/circular-barplot.js           | 1 +
 src/pages/circular-packing.js           | 5 +++--
 src/pages/connected-scatter-plot.js     | 1 +
 src/pages/connection-map.js             | 1 +
 src/pages/correlogram.js                | 6 +++++-
 src/pages/dendrogram.js                 | 6 +++++-
 src/pages/donut-plot.js                 | 6 +++++-
 src/pages/heatmap.js                    | 6 +++++-
 src/pages/hexbin-map.js                 | 6 +++++-
 src/pages/hierarchical-edge-bundling.js | 1 +
 src/pages/histogram.js                  | 6 +++++-
 src/pages/line-chart.js                 | 6 +++++-
 src/pages/lollipop-plot.js              | 1 +
 src/pages/map.js                        | 1 +
 src/pages/network-chart.js              | 1 +
 src/pages/parallel-plot.js              | 1 +
 src/pages/pie-plot.js                   | 6 +++++-
 src/pages/python-colors.js              | 1 +
 src/pages/radar-chart.js                | 6 +++++-
 src/pages/ridgeline.js                  | 1 +
 src/pages/sankey-diagram.js             | 1 +
 src/pages/scatter-plot.js               | 6 +++++-
 src/pages/stacked-area-plot.js          | 1 +
 src/pages/streamchart.js                | 6 +++++-
 src/pages/timeseries.js                 | 6 +++++-
 src/pages/treemap.js                    | 6 +++++-
 src/pages/venn-diagram.js               | 1 +
 src/pages/violin-plot.js                | 6 +++++-
 src/pages/waffle-chart.js               | 1 +
 src/pages/wordcloud.js                  | 6 +++++-
 43 files changed, 137 insertions(+), 25 deletions(-)

diff --git a/src/pages/2d-density-plot.js b/src/pages/2d-density-plot.js
index 4237953b41..920797bc6e 100644
--- a/src/pages/2d-density-plot.js
+++ b/src/pages/2d-density-plot.js
@@ -29,6 +29,7 @@ export default function Heatmap() {
       <TitleAndDescription
         title="2D Density Chart"
         description={chartDescription}
+        chartType="density2d"
       />
 
       <div className="greySection">
diff --git a/src/pages/3d.js b/src/pages/3d.js
index 06bf7d6394..cbf236cc32 100644
--- a/src/pages/3d.js
+++ b/src/pages/3d.js
@@ -48,6 +48,7 @@ export default function ThreeD() {
       <TitleAndDescription
         title="Three-Dimensional plotting"
         description={chartDescription}
+        chartType="3d"
       />
 
       <Container>
diff --git a/src/pages/animation.js b/src/pages/animation.js
index 3808de988d..d55f5c19eb 100644
--- a/src/pages/animation.js
+++ b/src/pages/animation.js
@@ -52,7 +52,11 @@ export const Head = () => (
 export default function Correlogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Animation" description={chartDescription} />
+      <TitleAndDescription
+        title="Animation"
+        description={chartDescription}
+        chartType="animation"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/arc-diagram.js b/src/pages/arc-diagram.js
index 084768d9b3..673fa4c269 100644
--- a/src/pages/arc-diagram.js
+++ b/src/pages/arc-diagram.js
@@ -24,7 +24,11 @@ export const Head = () => (
 export default function Arc() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Arc diagram" description={chartDescription} />
+      <TitleAndDescription
+        title="Arc diagram"
+        description={chartDescription}
+        chartType="arc"
+      />
 
       <div id="related">
         <Container>
diff --git a/src/pages/area-plot.js b/src/pages/area-plot.js
index 3712dcd0ad..d50d968f21 100644
--- a/src/pages/area-plot.js
+++ b/src/pages/area-plot.js
@@ -40,7 +40,11 @@ export const Head = () => (
 export default function AreaPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Area Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Area Chart"
+        description={chartDescription}
+        chartType="area"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/boxplot.js b/src/pages/boxplot.js
index 243d492026..7ce64b5acc 100644
--- a/src/pages/boxplot.js
+++ b/src/pages/boxplot.js
@@ -50,7 +50,11 @@ export const Head = () => (
 export default function Boxplot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Boxplot" description={chartDescription} />
+      <TitleAndDescription
+        title="Boxplot"
+        description={chartDescription}
+        chartType="boxplot"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/bubble-map.js b/src/pages/bubble-map.js
index 459352dd49..0813b071c2 100644
--- a/src/pages/bubble-map.js
+++ b/src/pages/bubble-map.js
@@ -26,7 +26,11 @@ export const Head = () => (
 export default function BubbleMap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Bubble Map" description={chartDescription} />
+      <TitleAndDescription
+        title="Bubble Map"
+        description={chartDescription}
+        chartType="bubbleMap"
+      />
 
       <div className="greySection" id="related">
         <Container>
diff --git a/src/pages/bubble-plot.js b/src/pages/bubble-plot.js
index 2de1222070..05302576b4 100644
--- a/src/pages/bubble-plot.js
+++ b/src/pages/bubble-plot.js
@@ -42,7 +42,11 @@ export const Head = () => (
 export default function BubblePlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Bubble plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Bubble plot"
+        description={chartDescription}
+        chartType="bubble"
+      />
 
       <Spacing />
 
diff --git a/src/pages/candlestick.js b/src/pages/candlestick.js
index 627601c2e8..66216b1da7 100644
--- a/src/pages/candlestick.js
+++ b/src/pages/candlestick.js
@@ -65,7 +65,11 @@ export const Head = () => (
 export default function Boxplot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Candlestick" description={chartDescription} />
+      <TitleAndDescription
+        title="Candlestick"
+        description={chartDescription}
+        chartType="candlestick"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/cartogram.js b/src/pages/cartogram.js
index 75db32aec3..554dadc1b7 100644
--- a/src/pages/cartogram.js
+++ b/src/pages/cartogram.js
@@ -24,7 +24,11 @@ export const Head = () => (
 export default function Cartogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Cartogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Cartogram"
+        description={chartDescription}
+        chartType="cartogram"
+      />
 
       <Container>
         <h2>
diff --git a/src/pages/cheat-sheets.js b/src/pages/cheat-sheets.js
index 0ced7d3c5d..b8464bdcb0 100644
--- a/src/pages/cheat-sheets.js
+++ b/src/pages/cheat-sheets.js
@@ -27,6 +27,7 @@ export default function CheatSheet() {
       <TitleAndDescription
         title="Cheat Sheets"
         description={chartDescription}
+        chartType="cheatSheets"
       />
 
       <Spacing />
diff --git a/src/pages/chord-diagram.js b/src/pages/chord-diagram.js
index f46d1fae8c..4d77793404 100644
--- a/src/pages/chord-diagram.js
+++ b/src/pages/chord-diagram.js
@@ -28,6 +28,7 @@ export default function Chord() {
       <TitleAndDescription
         title="Chord diagram"
         description={chartDescription}
+        chartType="chordDiagram"
       />
 
       <Container>
diff --git a/src/pages/choropleth-map.js b/src/pages/choropleth-map.js
index 2f24e9182f..a5cd5d28cc 100644
--- a/src/pages/choropleth-map.js
+++ b/src/pages/choropleth-map.js
@@ -29,6 +29,7 @@ export default function Choropleth() {
       <TitleAndDescription
         title="Choropleth map"
         description={chartDescription}
+        chartType="choropleth"
       />
 
       <Container>
diff --git a/src/pages/circular-barplot.js b/src/pages/circular-barplot.js
index bde7273845..517920a843 100644
--- a/src/pages/circular-barplot.js
+++ b/src/pages/circular-barplot.js
@@ -29,6 +29,7 @@ export default function CircularBarplot() {
       <TitleAndDescription
         title="Circular Barplot"
         description={chartDescription}
+        chartType="circularBarplot"
       />
 
       <Container>
diff --git a/src/pages/circular-packing.js b/src/pages/circular-packing.js
index 2505e53e11..2e81cffcbf 100644
--- a/src/pages/circular-packing.js
+++ b/src/pages/circular-packing.js
@@ -29,6 +29,7 @@ export default function CircularPacking() {
       <TitleAndDescription
         title="Circular Packing"
         description={chartDescription}
+        chartType="circularPacking"
       />
 
       <div className="greySection" id="related">
@@ -62,8 +63,8 @@ export default function CircularPacking() {
           <code>Circlify</code> can work without a hierarchical structure, i.e.
           with just a set of numeric varialbles that will be each displayed as a
           bubble. Note that the package just compute the position and size of
-          each bubble. Once that's done, <code>matplotlib</code> is used to
-          make the chart itself with usual functions.
+          each bubble. Once that's done, <code>matplotlib</code> is used to make
+          the chart itself with usual functions.
         </p>
         <Row>
           <ChartImageContainer
diff --git a/src/pages/connected-scatter-plot.js b/src/pages/connected-scatter-plot.js
index 2932b11c50..e63a938342 100644
--- a/src/pages/connected-scatter-plot.js
+++ b/src/pages/connected-scatter-plot.js
@@ -46,6 +46,7 @@ export default function ConnectedScatter() {
       <TitleAndDescription
         title="Connected Scatterplot"
         description={chartDescription}
+        chartType="connectedScatter"
       />
 
       <Container>
diff --git a/src/pages/connection-map.js b/src/pages/connection-map.js
index b41b4cd0a3..0c4924b9b2 100644
--- a/src/pages/connection-map.js
+++ b/src/pages/connection-map.js
@@ -28,6 +28,7 @@ export default function ConnectionMap() {
       <TitleAndDescription
         title="Connection Map"
         description={chartDescription}
+        chartType="connection"
       />
 
       <Container>
diff --git a/src/pages/correlogram.js b/src/pages/correlogram.js
index 4f36e85a68..99c542cb90 100644
--- a/src/pages/correlogram.js
+++ b/src/pages/correlogram.js
@@ -37,7 +37,11 @@ export const Head = () => (
 export default function Correlogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Correlogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Correlogram"
+        description={chartDescription}
+        chartType="correlogram"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/dendrogram.js b/src/pages/dendrogram.js
index f7d733d099..2a0ea13254 100644
--- a/src/pages/dendrogram.js
+++ b/src/pages/dendrogram.js
@@ -26,7 +26,11 @@ export const Head = () => (
 export default function Dendrogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Dendrogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Dendrogram"
+        description={chartDescription}
+        chartType="dendrogram"
+      />
 
       <div className="greySection" id="related">
         <Container>
diff --git a/src/pages/donut-plot.js b/src/pages/donut-plot.js
index cb2cbf6216..539abf7c02 100644
--- a/src/pages/donut-plot.js
+++ b/src/pages/donut-plot.js
@@ -44,7 +44,11 @@ export const Head = () => (
 export default function Donut() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Donut Plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Donut Plot"
+        description={chartDescription}
+        chartType="donut"
+      />
 
       <Spacing />
 
diff --git a/src/pages/heatmap.js b/src/pages/heatmap.js
index 92bec33685..a8a3bd60b1 100644
--- a/src/pages/heatmap.js
+++ b/src/pages/heatmap.js
@@ -39,7 +39,11 @@ export const Head = () => (
 export default function Heatmap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Heatmap" description={chartDescription} />
+      <TitleAndDescription
+        title="Heatmap"
+        description={chartDescription}
+        chartType="heatmap"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/hexbin-map.js b/src/pages/hexbin-map.js
index bcc8e6b647..549b6c3e08 100644
--- a/src/pages/hexbin-map.js
+++ b/src/pages/hexbin-map.js
@@ -25,7 +25,11 @@ export const Head = () => (
 export default function HexbinMap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Hexbin Map" description={chartDescription} />
+      <TitleAndDescription
+        title="Hexbin Map"
+        description={chartDescription}
+        chartType="hexbin"
+      />
 
       <Spacing />
 
diff --git a/src/pages/hierarchical-edge-bundling.js b/src/pages/hierarchical-edge-bundling.js
index 86531cb6f4..9e2de71a99 100644
--- a/src/pages/hierarchical-edge-bundling.js
+++ b/src/pages/hierarchical-edge-bundling.js
@@ -25,6 +25,7 @@ export default function Arc() {
       <TitleAndDescription
         title="Hierarchical Edge Bundling"
         description={chartDescription}
+        chartType="edgeBundling"
       />
 
       <div className="greySection" id="related">
diff --git a/src/pages/histogram.js b/src/pages/histogram.js
index dff1747262..06bb3f0455 100644
--- a/src/pages/histogram.js
+++ b/src/pages/histogram.js
@@ -84,7 +84,11 @@ export const Head = () => (
 export default function Histogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Histogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Histogram"
+        description={chartDescription}
+        chartType="histogram"
+      />
 
       <Container>
         <h2 id="Quick (Seaborn)">&#9201; Quick start (Seaborn)</h2>
diff --git a/src/pages/line-chart.js b/src/pages/line-chart.js
index c3d70a1387..623b89d82a 100644
--- a/src/pages/line-chart.js
+++ b/src/pages/line-chart.js
@@ -61,7 +61,11 @@ export const Head = () => (
 export default function LinePlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Line Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Line Chart"
+        description={chartDescription}
+        chartType="line"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/lollipop-plot.js b/src/pages/lollipop-plot.js
index d0b42d9ee5..3f961fdc6e 100644
--- a/src/pages/lollipop-plot.js
+++ b/src/pages/lollipop-plot.js
@@ -43,6 +43,7 @@ export default function Lollipop() {
       <TitleAndDescription
         title="Lollipop plot"
         description={chartDescription}
+        chartType="lollipop"
       />
 
       <Container>
diff --git a/src/pages/map.js b/src/pages/map.js
index 85d75394dd..52b4fe0ccf 100644
--- a/src/pages/map.js
+++ b/src/pages/map.js
@@ -29,6 +29,7 @@ export default function BackgroundMap() {
       <TitleAndDescription
         title="Background Map"
         description={chartDescription}
+        chartType="map"
       />
 
       <Spacing />
diff --git a/src/pages/network-chart.js b/src/pages/network-chart.js
index b8fd1057af..b5c305e7dc 100644
--- a/src/pages/network-chart.js
+++ b/src/pages/network-chart.js
@@ -27,6 +27,7 @@ export default function Network() {
       <TitleAndDescription
         title="Network chart"
         description={chartDescription}
+        chartType="network"
       />
 
       <Container>
diff --git a/src/pages/parallel-plot.js b/src/pages/parallel-plot.js
index d06a40b33f..b438c178bc 100644
--- a/src/pages/parallel-plot.js
+++ b/src/pages/parallel-plot.js
@@ -44,6 +44,7 @@ export default function Parallel() {
       <TitleAndDescription
         title="Parallel coordinate plot"
         description={chartDescription}
+        chartType="parallel"
       />
 
       <Container>
diff --git a/src/pages/pie-plot.js b/src/pages/pie-plot.js
index bb41fbc614..6fe3e6ca59 100644
--- a/src/pages/pie-plot.js
+++ b/src/pages/pie-plot.js
@@ -38,7 +38,11 @@ export const Head = () => (
 export default function Pie() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Pie Plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Pie Plot"
+        description={chartDescription}
+        chartType="pie"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/python-colors.js b/src/pages/python-colors.js
index b7e9369f05..83ea1e1f3b 100644
--- a/src/pages/python-colors.js
+++ b/src/pages/python-colors.js
@@ -50,6 +50,7 @@ export default function Colors() {
       <TitleAndDescription
         title="Dealing with colors in matplotlib"
         description={chartDescription}
+        chartType="colors"
       />
       {/* This section links to /available-colors-in-matplotlib */}
       <Container>
diff --git a/src/pages/radar-chart.js b/src/pages/radar-chart.js
index 0398112b5e..afb2080f62 100644
--- a/src/pages/radar-chart.js
+++ b/src/pages/radar-chart.js
@@ -53,7 +53,11 @@ export const Head = () => (
 export default function Radar() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Radar Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Radar Chart"
+        description={chartDescription}
+        chartType="radar"
+      />
 
       <div className="greySection" id="warning">
         <Container>
diff --git a/src/pages/ridgeline.js b/src/pages/ridgeline.js
index 9b1dd47789..ec8c3aa772 100644
--- a/src/pages/ridgeline.js
+++ b/src/pages/ridgeline.js
@@ -29,6 +29,7 @@ export default function RidgelinePlot() {
       <TitleAndDescription
         title="Ridgeline chart"
         description={chartDescription}
+        chartType="ridgeline"
       />
 
       <Container>
diff --git a/src/pages/sankey-diagram.js b/src/pages/sankey-diagram.js
index afa519216d..6f96f69106 100644
--- a/src/pages/sankey-diagram.js
+++ b/src/pages/sankey-diagram.js
@@ -29,6 +29,7 @@ export default function Chord() {
       <TitleAndDescription
         title="Sankey diagram"
         description={chartDescription}
+        chartType="sankey"
       />
 
       <Container>
diff --git a/src/pages/scatter-plot.js b/src/pages/scatter-plot.js
index 62693a3c88..d75b264054 100644
--- a/src/pages/scatter-plot.js
+++ b/src/pages/scatter-plot.js
@@ -77,7 +77,11 @@ export const Head = () => (
 export default function ScatterPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Scatterplot" description={chartDescription} />
+      <TitleAndDescription
+        title="Scatterplot"
+        description={chartDescription}
+        chartType="scatter"
+      />
 
       <Container>
         <h2 id="Quick start">&#9201; Quick start (Seaborn)</h2>
diff --git a/src/pages/stacked-area-plot.js b/src/pages/stacked-area-plot.js
index d1d59872a7..e380ac28ee 100644
--- a/src/pages/stacked-area-plot.js
+++ b/src/pages/stacked-area-plot.js
@@ -46,6 +46,7 @@ export default function StackedAreaPlot() {
       <TitleAndDescription
         title="Stacked area Chart"
         description={chartDescription}
+        chartType="stackedArea"
       />
 
       <Container>
diff --git a/src/pages/streamchart.js b/src/pages/streamchart.js
index 3b22f48d52..44bafc7108 100644
--- a/src/pages/streamchart.js
+++ b/src/pages/streamchart.js
@@ -27,7 +27,11 @@ export const Head = () => (
 export default function StackedAreaPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Streamgraph" description={chartDescription} />
+      <TitleAndDescription
+        title="Streamgraph"
+        description={chartDescription}
+        chartType="stream"
+      />
 
       <Container>
         <h2 id="Matplotlib">
diff --git a/src/pages/timeseries.js b/src/pages/timeseries.js
index 1c5cb93b8e..8a4196dfb8 100644
--- a/src/pages/timeseries.js
+++ b/src/pages/timeseries.js
@@ -38,7 +38,11 @@ export const Head = () => (
 export default function Pie() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Timeseries" description={chartDescription} />
+      <TitleAndDescription
+        title="Timeseries"
+        description={chartDescription}
+        chartType="timeseries"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/treemap.js b/src/pages/treemap.js
index 8d2fb8f779..6c5f42a4c3 100644
--- a/src/pages/treemap.js
+++ b/src/pages/treemap.js
@@ -41,7 +41,11 @@ export const Head = () => (
 export default function Treemap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Treemap" description={chartDescription} />
+      <TitleAndDescription
+        title="Treemap"
+        description={chartDescription}
+        chartType="treemap"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>
diff --git a/src/pages/venn-diagram.js b/src/pages/venn-diagram.js
index 03b9140819..a890d585c8 100644
--- a/src/pages/venn-diagram.js
+++ b/src/pages/venn-diagram.js
@@ -39,6 +39,7 @@ export default function Venn() {
       <TitleAndDescription
         title="Venn Diagram"
         description={chartDescription}
+        chartType="venn"
       />
 
       <Container>
diff --git a/src/pages/violin-plot.js b/src/pages/violin-plot.js
index 2c9a0d27f4..6c3626e77d 100644
--- a/src/pages/violin-plot.js
+++ b/src/pages/violin-plot.js
@@ -36,7 +36,11 @@ export const Head = () => (
 export default function ViolinPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Violin plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Violin plot"
+        description={chartDescription}
+        chartType="violin"
+      />
 
       <Container>
         <h2 id="Quick start">&#9201; Quick start</h2>
diff --git a/src/pages/waffle-chart.js b/src/pages/waffle-chart.js
index 1d14fc97f1..4fd00997bc 100644
--- a/src/pages/waffle-chart.js
+++ b/src/pages/waffle-chart.js
@@ -63,6 +63,7 @@ export default function Waffle() {
       <TitleAndDescription
         title="Waffle chart"
         description={chartDescription}
+        chartType="waffle"
       />
 
       <Container>
diff --git a/src/pages/wordcloud.js b/src/pages/wordcloud.js
index 32226858c0..8c07c7b908 100644
--- a/src/pages/wordcloud.js
+++ b/src/pages/wordcloud.js
@@ -70,7 +70,11 @@ export const Head = () => (
 export default function Wordcloud() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Wordcloud" description={chartDescription} />
+      <TitleAndDescription
+        title="Wordcloud"
+        description={chartDescription}
+        chartType="wordcloud"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>