diff --git a/src/pages/2d-density-plot.js b/src/pages/2d-density-plot.js
index 4237953b4..920797bc6 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 06bf7d639..cbf236cc3 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 3808de988..d55f5c19e 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 084768d9b..673fa4c26 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 3712dcd0a..d50d968f2 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 243d49202..7ce64b5ac 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 459352dd4..0813b071c 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 2de122207..05302576b 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 627601c2e..66216b1da 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 75db32aec..554dadc1b 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 0ced7d3c5..b8464bdcb 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 f46d1fae8..4d7779340 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 2f24e9182..a5cd5d28c 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 bde727384..517920a84 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 2505e53e1..2e81cffcb 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 2932b11c5..e63a93834 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 b41b4cd0a..0c4924b9b 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 4f36e85a6..99c542cb9 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 f7d733d09..2a0ea1325 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 cb2cbf621..539abf7c0 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 92bec3368..a8a3bd60b 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 bcc8e6b64..549b6c3e0 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 86531cb6f..9e2de71a9 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 dff174726..06bb3f045 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 c3d70a138..623b89d82 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 d0b42d9ee..3f961fdc6 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 85d75394d..52b4fe0cc 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 b8fd1057a..b5c305e7d 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 d06a40b33..b438c178b 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 bb41fbc61..6fe3e6ca5 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 b7e9369f0..83ea1e1f3 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 0398112b5..afb2080f6 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 9b1dd4778..ec8c3aa77 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 afa519216..6f96f6910 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 62693a3c8..d75b26405 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 d1d59872a..e380ac28e 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 3b22f48d5..44bafc710 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 1c5cb93b8..8a4196dfb 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 8d2fb8f77..6c5f42a4c 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 03b914081..a890d585c 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 2c9a0d27f..6c3626e77 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 1d14fc97f..4fd00997b 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 32226858c..8c07c7b90 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>