diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index 2d355e9ec..af4ad99af 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -266,3 +266,40 @@ combination:
     - name: Sales
       color: blue
       data: [200, 130, 90, 240, 130, 220]
+
+revenue-bg:
+  type: area
+  days-labels-count: 30
+  sparkline: true
+  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]
+
+new-clients:
+  type: line
+  days-labels-count: 30
+  sparkline: true
+  dashed-history: true
+  series:
+    - name: May
+      color: blue
+      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
+    - name: April
+      color: gray
+      data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
+
+active-users:
+  type: bar
+  days-labels-count: 30
+  sparkline: true
+  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]
+
+goals:
+  type: area
+  days-labels-count: 30
+  sparkline: true
+  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]
diff --git a/pages/_includes/js/charts.html b/pages/_includes/js/charts.html
index e58413525..cc4eb0595 100644
--- a/pages/_includes/js/charts.html
+++ b/pages/_includes/js/charts.html
@@ -1,69 +1,112 @@
 {% removeemptylines %}
-{% assign data = site.data.charts[include.data] %}
+{% assign data = site.data.charts[include.chart-id] %}
+
 {% if data %}
 <script>
 $(document).ready(function(){
-	var chart = new ApexCharts(document.getElementById('{{ include.id }}'), {
-		chart: {
-			type: '{{ data.type }}',
-			{% if data.stacked %}stacked: true{% endif %}
-		},
+   (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
+         },
+         {% endif %}
+         {% if data.stacked %}
+         stacked: true,
+         {% endif %}
+         animations: {
+            enabled: false,
+         }
+      },
 
-    	{% if data.spline %}
-    	stroke: {
-			curve: 'smooth'
-		},{% endif %}
+      fill: {
+        type: 'solid',
+        opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %}
+      },
 
-		{% if data.type == 'pie' or data.type == 'donut' %}
-    	series: [44, 55, 13, 43, 22],
-		{% else %}
-		series: [{% for serie in data.series %}{
-			name: '{{ serie.name }}',
-			data: [{{ serie.data | join: ', '}}]
-		}{% unless forloop.last %},{% endunless %}{% endfor %}],
-		{% endif %}
+      grid: {
+         padding: {
+            right: 0,
+            left: 0,
+            bottom: 0,
+            top: 0
+         }
+      },
 
-		xaxis: {
-            categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
-		},
+      stroke: {
+         {% if data.dashed-history %}
+         width: [2, 1],
+         dashArray: [0, 3],
+         {% else %}
+         width: 2,
+         {% endif %}
+         curve: 'smooth',
+      },
 
- 		{% if data.show-labels %}
-		dataLabels: {
-			enabled: false
-		},
-		{% endif %}
+      {% if data.series %}
+      {% if data.type == 'pie' or data.type == 'donut' %}
+       series: [44, 55, 13, 43, 22],
+      {% else %}
+      series: [{% for serie in data.series %}{
+         name: '{{ serie.name }}',
+         data: [{{ serie.data | join: ', '}}]
+      }{% unless forloop.last %},{% endunless %}{% endfor %}],
+      {% endif %}
+      {% endif %}
 
-		{% if data.rotated %}
-		plotOptions: {
-			bar: {
-				horizontal: true,
-			}
-		},
-		{% endif %}
+      {% if data.categories or data.days-labels-count %}
+      xaxis: {
+         {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
+         {% if data.days-labels-count %}type: 'datetime',{% endif %}
+      },
+      {% endif %}
 
-		colors: [ {% for serie in data.series %}
-			uikit.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
-		],
+      dataLabels: {
+         enabled: false
+      },
 
-		legend: {
-			{% if data.hide-legend %}show: false, //hide legend
-			{% endif %}
-		},
+      {% if data.days-labels-count %}
+      labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
+      {% endif %}
 
-		{% if data.hide-tooltip %}
-		tooltip: {
-			enabled: false
-		},
-		{% endif %}
+      {% if data.rotated %}
+      plotOptions: {
+         bar: {
+            horizontal: true,
+         }
+      },
+      {% endif %}
 
-		{% if data.hide-points %}
-		point: {
-			show: false
-		}
-		{% endif %}
-	});
+      {% if data.series %}
+      colors: [ {% for serie in data.series %}
+         uikit.colors["{{ serie.color | default: 'blue' }}"]{% unless forloop.last %},{% endunless %}{% endfor %}
+      ],
+      {% endif %}
 
-	chart.render();
+      {% if data.hide-legend %}
+      legend: {
+         show: false, //hide legend
+
+      },
+      {% endif %}
+
+      {% if data.hide-tooltip %}
+      tooltip: {
+         enabled: false
+      },
+      {% endif %}
+
+      {% if data.hide-points %}
+      point: {
+         show: false
+      }
+      {% endif %}
+   })).render();
 });
 </script>
 {% endif %}
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
index 2d2f87547..12fc497f7 100644
--- a/pages/cards-stats.html
+++ b/pages/cards-stats.html
@@ -34,13 +34,14 @@ layout: default
                </div>
             </div>
             <div class="d-flex align-items-baseline">
-               <div class="h1 mb-3 mr-2">$452,300</div>
+               <div class="h1 mb-0 mr-2">$4,300</div>
                <div class="mr-auto text-green">
                   24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
                </div>
             </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="line" %}
          </div>
+         <div class="card-chart" id="card-chart-1"></div>
+         {% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
       </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
@@ -58,7 +59,9 @@ layout: default
                   5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
                </div>
             </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="line" color="purple" %}
+
+            <div class="chart-sm" id="chart-active-users"></div>
+            {% include js/charts.html id="chart-active-users" chart-id="new-clients" %}
          </div>
       </div>
    </div>
@@ -72,12 +75,35 @@ layout: default
                </div>
             </div>
             <div class="d-flex align-items-baseline">
-               <div class="h1 mb-3 mr-2">$452,300</div>
+               <div class="h1 mb-3 mr-2">2,986</div>
                <div class="mr-auto text-green">
                   4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
                </div>
             </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" %}
+
+            <div class="chart-sm" id="chart-active-users2"></div>
+            {% include js/charts.html id="chart-active-users2" chart-id="active-users" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div>Goals</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="d-flex align-items-baseline">
+               <div class="h1 mb-3 mr-2">298</div>
+               <div class="mr-auto text-green">
+                  4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+               </div>
+            </div>
+
+            <div class="chart-sm" id="chart-goals"></div>
+            {% include js/charts.html id="chart-goals" chart-id="goals" %}
          </div>
       </div>
    </div>
diff --git a/pages/charts.html b/pages/charts.html
index 3b2f364a7..2d62ea48d 100644
--- a/pages/charts.html
+++ b/pages/charts.html
@@ -17,7 +17,7 @@ menu: charts
 					<div id="{{ key }}" style="height: 16rem"></div>
 				</div>
 			</div>
-			{% include js/charts.html id=key data=data %}
+			{% include js/charts.html id=key chart-id=data %}
 		</div>
 		{% endif %}
 		{% endfor %}
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 552e36ace..f3a403d38 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -192,3 +192,12 @@ Card code
     background: transparent;
   }
 }
+
+/*
+Card chart
+ */
+.card-chart {
+  height: 3.5rem;
+  position: relative;
+  z-index: 1;
+}
diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss
index 89ff2235d..7ec0cd59e 100644
--- a/scss/ui/_charts.scss
+++ b/scss/ui/_charts.scss
@@ -1,12 +1,16 @@
 .chart {
   display: block;
-  min-height: 10rem !important;
+  min-height: 10rem;
 
   text {
     font-family: inherit;
   }
 }
 
+.chart-sm {
+  height: 2.5rem;
+}
+
 .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;
@@ -43,3 +47,21 @@
     height: 1rem;
   }
 }
+
+.apexcharts-tooltip {
+  background: $dark !important;
+  color: #fff;
+  border: 0 !important;
+  border-radius: 3px !important;
+  line-height: 1;
+}
+
+.apexcharts-tooltip-title {
+  background: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 8px !important
+}