diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index af4ad99af..c0bf74f46 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -303,3 +303,21 @@ goals:
   series:
     - name: Profits
       data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
+
+traffic-in:
+  type: bar
+  days-labels-count: 10
+  sparkline: true
+  series:
+    - name: Inbound
+      color: azure
+      data: [14, 3, 14, 9, 4, 6, 2, 7, 7, 14, 10, 9, 5, 1]
+
+traffic-out:
+  type: bar
+  days-labels-count: 10
+  sparkline: true
+  series:
+    - name: Outbound
+      color: red
+      data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
index 12fc497f7..bb8336a72 100644
--- a/pages/cards-stats.html
+++ b/pages/cards-stats.html
@@ -112,15 +112,17 @@ layout: default
          <div class="card-body">
             <div>Traffic monitor</div>
             <div class="row">
-               <div class="col">
+               <div class="col-6">
                   <div class="text-label">Inbound</div>
                   <div class="h3">45GB</div>
-                  {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="azure" %}
+                  <div class="chart-sm" id="chart-traffic-in"></div>
+                  {% include js/charts.html id="chart-traffic-in" chart-id="traffic-in" %}
                </div>
-               <div class="col">
+               <div class="col-6">
                   <div class="text-label">Outbound</div>
                   <div class="h3">16GB</div>
-                  {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="red" %}
+                  <div class="chart-sm" id="chart-traffic-out"></div>
+                  {% include js/charts.html id="chart-traffic-out" chart-id="traffic-out" %}
                </div>
             </div>
          </div>