diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index 9c8419c992085b44e5cfcfde308556d42cc0801e..5af99a6596147c1a62f59aa67e17fa1fbc07f222 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -32,7 +32,7 @@ development-activity:
       color: blue
       data: [0, 5, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 6, 30, 10, 10, 15, 14, 47, 65, 55]
 
-employment:
+line:
   name: Employment Growth
   display: true
   type: line
@@ -49,7 +49,7 @@ employment:
       color: green
       data: [17, 18, 21, 20, 30, 29]
 
-line-chart-stroke:
+line-stroke:
   name: Line chart
   display: true
   type: line
@@ -67,7 +67,7 @@ line-chart-stroke:
       color: green
       data: [7, 10, 11, 18, 18, 18, 24]
 
-stepline-chart:
+stepline:
   name: Stepline
   display: true
   type: line
diff --git a/pages/_includes/cards/charts/card.html b/pages/_includes/cards/charts/card.html
new file mode 100644
index 0000000000000000000000000000000000000000..3d95c76f9c89db9b30f08aac9213fb01130cd265
--- /dev/null
+++ b/pages/_includes/cards/charts/card.html
@@ -0,0 +1,17 @@
+{% if include.data %}
+{% assign data = include.data %}
+{% else %}
+{% assign data = site.data.charts[include.name] %}
+{% endif %}
+{% assign key = 'chart-' | append: include.name %}
+<div class="card">
+   {% unless include.hide-title %}
+   <div class="card-header">
+      <h3 class="card-title">{{ include.title | default: data.name }}</h3>
+   </div>
+   {% endunless %}
+   <div class="card-body">
+      <div id="{{ key }}" style="height: 16rem"></div>
+   </div>
+</div>
+{% include js/charts.html id=key chart-id=include.name %}
diff --git a/pages/charts.html b/pages/charts.html
index 022ab4b2642c34b90304869306dbbce54b73d5d5..f31208094abb37c4f0425628815268ae0eb67509 100644
--- a/pages/charts.html
+++ b/pages/charts.html
@@ -6,18 +6,10 @@ menu: charts
 	<div class="row row-cards">
 		{% for chart in site.data.charts %}
 		{% if chart[1].display %}
-		{% assign data = chart[0] %}
-		{% assign key = 'chart-' | append: data %}
+		{% assign chart-name = chart[0] %}
+		{% assign chart-data = chart[1] %}
 		<div class="col-lg-6 col-xl-4">
-			<div class="card">
-				<div class="card-header">
-					<h3 class="card-title">{{ chart[1].name }}</h3>
-				</div>
-				<div class="card-body">
-					<div id="{{ key }}" style="height: 16rem"></div>
-				</div>
-			</div>
-			{% include js/charts.html id=key chart-id=data %}
+			{% include cards/charts/card.html name=chart-name data=chart-data %}
 		</div>
 		{% endif %}
 		{% endfor %}
diff --git a/pages/index.html b/pages/index.html
index ef6860cd3832bfdcb7c5a9a49d65514d93df4244..2d600587839ef82cc73447df99681df3c8d0eeab 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -108,6 +108,16 @@ menu: level-1.level-2.level-3.level-4
       {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
    </div>
 
+   <div class="col-4">
+      {% include cards/charts/card.html name="line" title="A" %}
+   </div>
+   <div class="col-4">
+      {% include cards/charts/card.html name="stepline" title="B" %}
+   </div>
+   <div class="col-4">
+      {% include cards/charts/card.html name="temperature" title="C" %}
+   </div>
+
    {% comment %}
    <div class="col-lg-6">
       {% comment %}{% include cards/development-activity.html %}{% endcomment %}