diff --git a/source/_lovelace/energy.markdown b/source/_lovelace/energy.markdown
index 50c8b17770b..70df4c9ad93 100644
--- a/source/_lovelace/energy.markdown
+++ b/source/_lovelace/energy.markdown
@@ -52,6 +52,21 @@ The solar production graph card shows the amount of energy your solar panels hav
 type: energy-solar-graph
 ```
 
+## Gas consumption graph
+
+<p class='img'>
+  <img src='/images/lovelace/energy/gas-graph.png' alt='Screenshot of the gas consumption graph card'>
+  Screenshot of the gas consumption graph card.
+</p>
+
+The gas consumption graph card shows the amount of gas consumed per source.
+
+#### Example
+
+```yaml
+type: energy-gas-graph
+```
+
 ## Energy distribution
 
 <p class='img'>
diff --git a/source/images/lovelace/energy/gas-graph.png b/source/images/lovelace/energy/gas-graph.png
new file mode 100644
index 00000000000..c4ab3fbcaed
Binary files /dev/null and b/source/images/lovelace/energy/gas-graph.png differ