diff --git a/package.json b/package.json
index 1b588651c87f28955ecfe833b056676a3e0a1d79..c24ad719043cd95c785a2e64e29611e74a1a885f 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "jquery": "^3.5.1",
     "jqvmap": "^1.5.1",
     "nouislider": "^14.6.2",
-    "peity": "^3.3.0",
     "popper.js": "^1.16.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-commonjs": "^10.1.0",
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index e6e597d0ea922fa501831d75a8dd3c07d57ee0de..dec97ea67859ef14fe54f88c8d2e8cd5a1ae2fb2 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -15,7 +15,6 @@
     "jqvmap-world": "jqvmap/dist/maps/jquery.vmap.world.js",
     "jqvmap-usa": "jqvmap/dist/maps/jquery.vmap.usa.js",
     "jqvmap-europe": "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
-    "peity": "peity/jquery.peity.min.js",
     "flatpickr": [
       "flatpickr/dist/flatpickr.min.js",
       "flatpickr/dist/plugins/rangePlugin.js"
diff --git a/src/pages/_includes/cards/development-activity.html b/src/pages/_includes/cards/development-activity.html
index abc7559e5b23795860fed99d3ac740a08e00d292..23a3c0c77750426482e88ed5d56cb0a4146370d6 100644
--- a/src/pages/_includes/cards/development-activity.html
+++ b/src/pages/_includes/cards/development-activity.html
@@ -5,7 +5,7 @@
 	<div class="position-relative">
 		<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
 			<div class="row g-2">
-				<div class="col-auto">{% include ui/sparkline.html percentage=35 type="pie" %}</div>
+				<div class="col-auto">{% include ui/chart-sparkline.html percentage=35 type="donut" %}</div>
 				<div class="col">
 					<div>Today's Earning: $4,262.40</div>
 					<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
diff --git a/src/pages/_includes/cards/most-visited-pages.html b/src/pages/_includes/cards/most-visited-pages.html
index 25d6a6689bae2cc039a358ca6562943eddc10c12..fc0366d6c5ab6cf2bc7c74cbf2af2a92c1ca8c1d 100644
--- a/src/pages/_includes/cards/most-visited-pages.html
+++ b/src/pages/_includes/cards/most-visited-pages.html
@@ -25,7 +25,7 @@
 				<td class="text-muted">{{ page.unique | format_number }}</td>
 				<td class="text-muted">{{ page.bounce-rate }}</td>
 				<td class="text-right">
-					{% include ui/sparkline.html type="line" data=data %}
+					{% include ui/chart-sparkline.html type="line" data=data %}
 				</td>
 			</tr>
 			{% endfor %}
diff --git a/src/pages/_includes/cards/small-stats.html b/src/pages/_includes/cards/small-stats.html
index 9c529404d7f7be2ec838ae011cfcc3fe397edee1..cce493ed2bab125661c9e92b38df94321f4afabf 100644
--- a/src/pages/_includes/cards/small-stats.html
+++ b/src/pages/_includes/cards/small-stats.html
@@ -10,7 +10,7 @@
 
 		{% if include.chart-data and chart-position == "left" %}
 		<div class="mr-3">
-			{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+			{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 		</div>
 		{% endif %}
 
@@ -26,7 +26,7 @@
 
 		{% if include.chart-data and chart-position=="right" %}
 		<div class="ml-auto">
-			{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+			{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 		</div>
 		{% endif %}
 	</div>
diff --git a/src/pages/_includes/cards/table-users.html b/src/pages/_includes/cards/table-users.html
index 7b06f613f31c9a2cddcd85b9ebfdccae210fec17..2b8c2762e0cf30d8a80ecc707a9fc1d3d3e13366 100644
--- a/src/pages/_includes/cards/table-users.html
+++ b/src/pages/_includes/cards/table-users.html
@@ -56,7 +56,7 @@
 <!--					     data-thickness="3" data-color="blue">-->
 <!--						<div class="chart-circle-value">{{ percentage }}%</div>-->
 <!--					</div>-->
-					{% include ui/sparkline.html percentage=percentage type="pie" %}
+					{% include ui/chart-sparkline.html percentage=percentage type="donut" %}
 				</td>
 			</tr>
 			{% endfor %}
diff --git a/src/pages/_includes/ui/chart-sparkline.html b/src/pages/_includes/ui/chart-sparkline.html
new file mode 100644
index 0000000000000000000000000000000000000000..e76d033dbcd47e209c6f968921a576c94be88bb0
--- /dev/null
+++ b/src/pages/_includes/ui/chart-sparkline.html
@@ -0,0 +1,67 @@
+{% assign type = include.type | default: 'bar' %}
+{% assign id = 0 | random_id %}
+{% assign color = include.color | default: 'blue' %}
+{% assign height = include.height | default: 2.5 %}
+
+{% assign data = include.data %}
+
+<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
+
+{% capture_global scripts %}
+<script>
+	// @formatter:off
+	document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
+		{% endif %}
+
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
+			chart: {
+				type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
+				fontFamily: 'inherit',
+				height: {{ height | times: 16 | round }},
+				{% if type == 'pie' %}
+				width: {{ height | times: 16 | round }},
+				{% endif %}
+				animations: {
+					enabled: false
+				},
+				sparkline: {
+					enabled: true
+				},
+			},
+			plotOptions: {
+				radialBar: {
+					hollow: {
+						margin: 0,
+						size: '75%'
+					},
+					track: {
+						margin: 0
+					},
+					dataLabels: {
+						show: false
+					}
+				}
+			},
+			{% if type == 'area' or type == 'line' %}
+			stroke: {
+				width: 2,
+				lineCap: "round",
+			},
+			{% endif %}
+
+			{% if type == 'donut' %}
+			colors: ["{{ color | default: 'blue' | tabler_color }}"],
+			series: [{{ data }}],
+			{% else %}
+			series: [{
+				color: "{{ color | default: 'blue' | tabler_color }}",
+				data: [{{ data }}]
+			}],
+			{% endif %}
+		})).render();
+	});
+	// @formatter:on
+</script>
+{% endcapture_global %}
diff --git a/src/pages/_includes/ui/sparkline.html b/src/pages/_includes/ui/sparkline.html
deleted file mode 100644
index c189d2bda7299948d5d424c83fdc2bb0e0ee93cd..0000000000000000000000000000000000000000
--- a/src/pages/_includes/ui/sparkline.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% assign type = include.type | default: 'bar' %}
-{% assign id = 0 | random_id %}
-{% assign color = include.color | default: 'blue' %}
-
-{% assign data = include.data %}
-{% if include.percentage %}
-	{% assign data = include.percentage | append: "/100" %}
-{% endif %}
-
-<div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
-
-{% capture_global scripts %}
-<script>
-	document.addEventListener("DOMContentLoaded", function () {
-		$().peity && $('#sparkline-{{ id }}').text("{{ data }}").peity("{{ type | default: 'bar' }}", {
-			width: {% if type == 'pie' %}40{% else %}64{% endif %},
-			height: 40,
-			stroke: "{{ color | tabler_color }}",
-			strokeWidth: 2,
-			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %},
-			padding: .2,
-			{% if type == 'pie' %}innerRadius: 16,{% endif %}
-		});
-	});
-</script>
-{% endcapture_global %}
diff --git a/src/pages/_layouts/homepage.html b/src/pages/_layouts/homepage.html
index adc2c633f574a79f7056c1b068b23df1e9d34ea6..4efa7f4b1a056c1b19b9c41e5c858de8e89b3f89 100644
--- a/src/pages/_layouts/homepage.html
+++ b/src/pages/_layouts/homepage.html
@@ -4,7 +4,7 @@ layout: default
 page-header: Dashboard
 page-header-pretitle: Overview
 page-header-actions: buttons
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+libs: jquery, apexcharts, jqvmap, jqvmap-world
 ---
 
 {% include layout/homepage.html %}
diff --git a/src/pages/layout-horizontal.html b/src/pages/layout-horizontal.html
index b448f0ca4b29c8e2daeeb7e8742a638193f95b6a..fef158bf9e8f19f791fcc482d21b6cc7c22f5a7f 100644
--- a/src/pages/layout-horizontal.html
+++ b/src/pages/layout-horizontal.html
@@ -1,6 +1,5 @@
 ---
 page-header: Horizontal layout
 menu: layout.horizontal
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
 layout: homepage
 ---
\ No newline at end of file
diff --git a/src/pages/widgets.html b/src/pages/widgets.html
index 72fbf91aec9f5e7e3b4bccea218adcf9e6241417..0c00dd8c8d05475d383e3c275cfd9ee835896876 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets.html
@@ -2,7 +2,7 @@
 title: Widgets
 page-header: Widgets
 menu: extra.widgets
-libs: jquery, apexcharts, peity
+libs: jquery, apexcharts
 ---
 
 <div class="row row-cards">
@@ -49,13 +49,13 @@ libs: jquery, apexcharts, peity
 		{% include cards/small-stats.html icon="message" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
 	</div>
 
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="green" count=78 subtitle="Orders" description="32 shipped" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="red" count=1352 subtitle="Members" description="163 registered today" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
 	</div>
 
 	<div class="col-md-6 col-lg-4">
@@ -63,9 +63,9 @@ libs: jquery, apexcharts, peity
 			<div class="col-12">{% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}</div>
 			<div class="col-12">{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}</div>
 			<div class="col-12">{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=10 %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=11 %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="12" person-id=10 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="12" person-id=11 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="56" person-id=1 %}</div>
 			<div class="col-12">{% include cards/small-stats.html color="green" person-id=4 %}</div>
 			<div class="col-12">{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}</div>
 			<div class="col-12">{% include cards/code.html %}</div>
diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss
index ced7f1dd76dda6c579274c815f722f4aac0b159c..08b27c2361f3cd371ebbf0431b1c785f7cd9e84b 100644
--- a/src/scss/tabler-vendors.scss
+++ b/src/scss/tabler-vendors.scss
@@ -1,6 +1,5 @@
 @import "config";
 
-@import "vendor/peity";
 @import "vendor/selectize";
 @import "vendor/jqvmap";
 @import "vendor/apexcharts";
diff --git a/src/scss/ui/_charts.scss b/src/scss/ui/_charts.scss
index 60aad0534480952b3cd6f5bbd94e03e269321a8e..6417620c107965297c8cfab294eca8fd7615de5f 100644
--- a/src/scss/ui/_charts.scss
+++ b/src/scss/ui/_charts.scss
@@ -27,6 +27,7 @@ Chart sparkline
   width: 4rem;
   height: 2.5rem;
   line-height: 1;
+  min-height: 0 !important;
 }
 
 .chart-sparkline-square {
diff --git a/src/scss/vendor/_peity.scss b/src/scss/vendor/_peity.scss
deleted file mode 100644
index f4d9ef0b6d8920c7254f7a9d6946bac446f4f43f..0000000000000000000000000000000000000000
--- a/src/scss/vendor/_peity.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.peity {
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
\ No newline at end of file