diff --git a/.editorconfig b/.editorconfig
index f9f3187b7..d41b743d8 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -19,7 +19,7 @@ tab_width=3
 
 [*.js.map]
 indent_style=tab
-indent_size=2
+indent_size=3
 
 [{*.css,*.scss}]
 indent_style=space
diff --git a/js/app/charts.js b/js/app/charts.js
index 211f233a0..e73fe1edb 100644
--- a/js/app/charts.js
+++ b/js/app/charts.js
@@ -1,40 +1,85 @@
 (function ($) {
-    $(document).ready(function () {
+  $(document).ready(function () {
 
-        $('[data-spark]').each(function () {
-            var $this = $(this),
-                data = $this.attr('data-spark'),
-                color = $this.attr('data-spark-color') || 'blue',
-                type = $this.attr('data-spark-type') || 'line';
+    $().peity && $('[data-spark]').each(function () {
+      var $this = $(this),
+        data = $this.attr('data-spark'),
+        color = $this.attr('data-spark-color') || 'blue',
+        type = $this.attr('data-spark-type') || 'line';
 
-            var $div = $('<div />').html(data);
-            $this.append($div);
+      var $div = $('<div />').html(data);
+      $this.append($div);
 
-            var strokeColor = uikit.colors[color],
-                fillColor = uikit.colors[color];
+      var strokeColor = tabler.colors[color],
+        fillColor = tabler.colors[color];
 
-            if (type === 'donut' || type === 'pie') {
-                fillColor = [fillColor, uikit.hexToRgbA(fillColor, .1)];
-            } else if (type === 'bar') {
-                fillColor = [fillColor];
-            } else if (type === 'line') {
-                fillColor = uikit.hexToRgbA(fillColor, .1);
-            }
+      if (type === 'donut' || type === 'pie') {
+        fillColor = [fillColor, tabler.hexToRgbA(fillColor, .1)];
+      } else if (type === 'bar') {
+        fillColor = [fillColor];
+      } else if (type === 'line') {
+        fillColor = tabler.hexToRgbA(fillColor, .1);
+      }
 
-            $div.peity(type, {
-                width: $this.width(),
-                height: $this.height(),
-                // max: 100,
-                // min: 0,
-                stroke: strokeColor,
-                strokeWidth: 2,
-                fill: fillColor,
-                padding: .2,
-                innerRadius: (type === 'donut') ? 17 : 0
-            });
+      $div.peity(type, {
+        width: $this.width(),
+        height: $this.height(),
+        // max: 100,
+        // min: 0,
+        stroke: strokeColor,
+        strokeWidth: 2,
+        fill: fillColor,
+        padding: .2,
+        innerRadius: (type === 'donut') ? 17 : 0
+      });
 
 
-        });
-
     });
+
+  });
 })(jQuery);
+
+
+/*
+Apexcharts default configuration
+ */
+if (window.Apex) {
+  Apex.grid = {
+    padding: {
+      right: 0,
+      left: 0
+    }
+  };
+
+  Apex.dataLabels = {
+    enabled: false
+  };
+
+  Apex.plotOptions = {
+    pie: {
+      expandOnClick: false,
+      donut: {
+        size: '10%'
+      }
+    },
+  };
+
+  Apex.chart = {
+    toolbar: {
+      show: false,
+    },
+    animations: {
+      enabled: false,
+    }
+  };
+
+  Apex.stroke = {
+    width: 2,
+    curve: 'smooth',
+  };
+
+  Apex.fill = {
+    type: 'solid',
+    opacity: 1
+  };
+}
diff --git a/js/ui-kit.js b/js/ui-kit.js
index 479964603..3c4658785 100644
--- a/js/ui-kit.js
+++ b/js/ui-kit.js
@@ -1,8 +1,7 @@
-var uikit = {
+var tabler = {
     colorVariation: function (color, variation) {
         var colorValue = this.colors[color];
 
-
         if (colorValue) {
             switch (variation) {
                 case 'light':
@@ -112,4 +111,4 @@ $(document).ready(function () {
     });
 });
 
-window.uikit = uikit;
+window.tabler = tabler;
diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index c0bf74f46..d4a68c98e 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -321,3 +321,18 @@ traffic-out:
     - name: Outbound
       color: red
       data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
+
+devices:
+  type: donut
+  sparkline: true
+  hide-legend: true
+  series:
+    - name: a
+      color: blue-dark
+      data: [23]
+    - name: b
+      color: blue
+      data: [54]
+    - name: c
+      color: blue-light
+      data: [34]
diff --git a/pages/_includes/js/charts-heatmap.html b/pages/_includes/js/charts-heatmap.html
index 27a2f19fc..5984e03e9 100644
--- a/pages/_includes/js/charts-heatmap.html
+++ b/pages/_includes/js/charts-heatmap.html
@@ -34,28 +34,28 @@
 						from: 0,
 						to: 20,
 						name: "Low",
-						color: uikit.colors.green
+						color: tabler.colors.green
 					}, {
 						from: 21,
 						to: 50,
 						name: "Medium",
-						color: uikit.colors.blue
+						color: tabler.colors.blue
 					}, {
 						from: 51,
 						to: 75,
 						name: "High",
-						color: uikit.colors.yellow
+						color: tabler.colors.yellow
 					}, {
 						from: 76,
 						to: 100,
 						name: "Extreme",
-						color: uikit.colors.red
+						color: tabler.colors.red
 					}]
 				}
 			}
 		},
 		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}uikit.colors.{{ color[0] }}, {% endfor %}{% endif %}],
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.colors.{{ color[0] }}, {% endfor %}{% endif %}],
 		{% endif %}
 		series: [
 		{% for i in site.months_short limit: 12 %}
diff --git a/pages/_includes/js/charts.html b/pages/_includes/js/charts.html
index cc4eb0595..61387537f 100644
--- a/pages/_includes/js/charts.html
+++ b/pages/_includes/js/charts.html
@@ -4,13 +4,10 @@
 {% if data %}
 <script>
 $(document).ready(function(){
-   (new ApexCharts(document.getElementById('{{ include.id }}'), {
+   window.ApexCharts && (new ApexCharts(document.getElementById('{{ include.id }}'), {
       chart: {
          type: '{{ data.type }}',
          height: document.getElementById('{{ include.id }}').offsetHeight,
-         toolbar: {
-            show: false,
-         },
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -19,38 +16,24 @@ $(document).ready(function(){
          {% if data.stacked %}
          stacked: true,
          {% endif %}
-         animations: {
-            enabled: false,
-         }
       },
 
+      {% if data.type == 'area' %}
       fill: {
-        type: 'solid',
-        opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %}
-      },
-
-      grid: {
-         padding: {
-            right: 0,
-            left: 0,
-            bottom: 0,
-            top: 0
-         }
+        opacity: .16
       },
+      {% endif %}
 
+      {% if data.dashed-history %}
       stroke: {
-         {% if data.dashed-history %}
          width: [2, 1],
          dashArray: [0, 3],
-         {% else %}
-         width: 2,
-         {% endif %}
-         curve: 'smooth',
       },
+      {% endif %}
 
       {% if data.series %}
       {% if data.type == 'pie' or data.type == 'donut' %}
-       series: [44, 55, 13, 43, 22],
+      series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
       {% else %}
       series: [{% for serie in data.series %}{
          name: '{{ serie.name }}',
@@ -66,10 +49,6 @@ $(document).ready(function(){
       },
       {% endif %}
 
-      dataLabels: {
-         enabled: false
-      },
-
       {% if data.days-labels-count %}
       labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
       {% endif %}
@@ -84,14 +63,13 @@ $(document).ready(function(){
 
       {% if data.series %}
       colors: [ {% for serie in data.series %}
-         uikit.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
+         {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
       ],
       {% endif %}
 
       {% if data.hide-legend %}
       legend: {
          show: false, //hide legend
-
       },
       {% endif %}
 
diff --git a/pages/_includes/layout/debug-footer.html b/pages/_includes/layout/debug-footer.html
index c700126b9..3185b0030 100644
--- a/pages/_includes/layout/debug-footer.html
+++ b/pages/_includes/layout/debug-footer.html
@@ -82,7 +82,7 @@
 		        return false;
 	        })
 	        .on('click', '[data-debug="fullscreen"]', function (e) {
-		        uikit.toggleFullscreen();
+		        tabler.toggleFullscreen();
 
 		        e.preventDefault();
 		        return false;
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index 9b0e3b9f8..e615c7ba0 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -1,12 +1,13 @@
 <!-- {{ site.title }} additional libs -->
 <script src="{{ site.base }}/libs/jquery/jquery.js"></script>
 <script src="{{ site.base }}/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+
 <script src="{{ site.base }}/libs/apexcharts/apexcharts.min.js"></script>
 <script src="{{ site.base }}/libs/peity/jquery.peity.min.js"></script>
 
-<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>
-<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>
-<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>
+<!--<script src="{{ site.base }}/libs/jqvmap/jquery.vmap.js"></script>-->
+<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.world.js"></script>-->
+<!--<script src="{{ site.base }}/libs/jqvmap/maps/jquery.vmap.france.js"></script>-->
 
 {% if site.debug %}
 {% if jekyll.environment == 'development' %}
@@ -19,7 +20,7 @@
 <script src="{{ site.base }}/js/app/charts.js"></script>
 
 <script>
-	window.uikit.colors = { {% for color in site.colors %}
+	window.tabler.colors = { {% for color in site.colors %}
 		'{{ color[0] }}': '{{ color[1].hex }}'{% unless forloop.last %},{% endunless %}{% endfor %}
 	};
 </script>
diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb
index c54fa623d..4ce71ff09 100644
--- a/pages/_plugins/jekyll-filters.rb
+++ b/pages/_plugins/jekyll-filters.rb
@@ -67,6 +67,18 @@ module Jekyll
       value = value.gsub(/ class="feather[^"]+"/, '')
       value = value.gsub(/<svg /, '<svg class="icon ' + class_name.to_s + '" ')
     end
+
+
+    def tabler_js_color(color)
+      color = color.split('-')
+
+      if color.size == 2
+        'tabler.colorVariation("'+ color[0] + '", "'+ color[1] + '")'
+      else
+        'tabler.colors["'+ color[0] + '"]'
+      end
+
+    end
   end
 end
 
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
index bb8336a72..cdebf3dc5 100644
--- a/pages/cards-stats.html
+++ b/pages/cards-stats.html
@@ -128,6 +128,22 @@ layout: default
          </div>
       </div>
    </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div>Traffic monitor</div>
+            <div class="row">
+               <div class="col-6">
+                 Lorem ipsum dolor sit amet, consectetur
+               </div>
+               <div class="col-6">
+                  <div class="chart-square" id="chart-devices"></div>
+                  {% include js/charts.html id="chart-devices" chart-id="devices" %}
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
    <div class="col-sm-6 col-md-4 col-lg-3">7</div>
    <div class="col-sm-6 col-md-4 col-lg-3">8</div>
diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss
index 7ec0cd59e..7c2918ad7 100644
--- a/scss/ui/_charts.scss
+++ b/scss/ui/_charts.scss
@@ -11,6 +11,11 @@
   height: 2.5rem;
 }
 
+.chart-square {
+  height: 5.75rem;
+  outline: 1px solid red;
+}
+
 .chart-placeholder {
   background-image: linear-gradient(135deg, $border-color 25%, transparent 25%, transparent 50%, $border-color 50%, $border-color 75%, transparent 75%, transparent 100%);
   background-size: 14.14px 14.14px;