diff --git a/package.json b/package.json
index 312f77ee..9d9ce9ff 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
 		"bwip-js": "^3.0.1",
 		"canvasjs": "^1.8.3",
 		"chart.js": "^2.8.0",
+		"chartjs-plugin-doughnutlabel": "^2.0.3",
+		"chartjs-plugin-piechart-outlabels": "^0.1.4",
 		"datatables.net": "^1.10.22",
 		"datatables.net-bs4": "^1.10.22",
 		"datatables.net-colreorder": "^1.5.2",
diff --git a/public/viewjs/metrics.js b/public/viewjs/metrics.js
index 3dc85807..27caeb26 100644
--- a/public/viewjs/metrics.js
+++ b/public/viewjs/metrics.js
@@ -3,36 +3,70 @@
  */
 
 /* Charting */
-var dataPoints = [];
+var labels = [];
+var data = [];
 $("#metrics-table tbody tr").each(function () {
 	var self = $(this);
 	var label = self.find("td:eq(0)").attr('data-chart-label');
 	var value = Number(self.find("td:eq(1)").attr('data-chart-value'));
-	var dataPoint = { label: label, y: parseFloat((Math.round(value * 100) / 100).toFixed(2))};
-	dataPoints.push(dataPoint);
+	labels.push(label);
+	data.push(parseFloat((Math.round(value * 100) / 100).toFixed(2)));
 });
 
-var options = {
-	exportEnabled: true,
-	legend:{
-		horizontalAlign: "center",
-		verticalAlign: "bottom"
-	},
-	data: [{
-		type: "pie",
-		showInLegend: true,
-		toolTipContent: "<b>{label}</b>: ${y} (#percent%)",
-		indexLabel: "{label}",
-		legendText: "{label} (#percent%)",
-		indexLabelPlacement: "outside",
-		valueFormatSTringt: "#,##0.##",
-		dataPoints: dataPoints
-	}]
-};
+function getRandomColor() {
+	var letters = '0123456789ABCDEF'.split('');
+	var color = '#';
+	for (var i = 0; i < 6; i++ ) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+	return color;
+}
+
+var colors=[];
+for(let i=0;i<data.length;i++){
+	colors.push('#'+Math.floor(Math.random()*16777215).toString(16));
+}
+
+var metricsChart = new Chart('metrics-chart', {
+	type: 'outlabeledDoughnut',
+	options: {
+		plugins: {
+			outlabels: {
+				text: '%l %p',
+				backgroundColor: "#343a40",
+				color: 'white',
+				stretch: 45,
+				font: {
+					resizable: true,
+					minSize: 12,
+					maxSize: 18
+				}
+			},
+			doughnutlabel: {
+				labels: [
+					{
+						text: 'TBD',
+						font: {
+							size: 30,
+							weight: 'bold',
+						},
+					},
+					{
+						text: 'total',
+					}
+				]
+			}
+		}
+	},
+	data: {
+		labels: labels,
+		datasets: [{
+			data: data,
+			backgroundColor: colors
+		}]
+	}
+});
 
-// needed for recursionCount error
-recursionCount=0;
-$("#metrics-chart").CanvasJSChart(options);
 
 /* DataTables */
 var metricsTable = $('#metrics-table').DataTable({
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index 4ac27c16..6a5c08ff 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -737,7 +737,6 @@
 	<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/daterangepicker/daterangepicker.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/canvasjs/dist/jquery.canvasjs.min.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
diff --git a/views/stockmetricspurchases.blade.php b/views/stockmetricspurchases.blade.php
index 6a3f326f..6642ff50 100644
--- a/views/stockmetricspurchases.blade.php
+++ b/views/stockmetricspurchases.blade.php
@@ -2,7 +2,15 @@
 
 @section('title', $__t('Stock Metrics: Purchases'))
 @section('activeNav', 'stockmetricspurchases')
-@section('viewJsName', 'metrics')
+
+@once
+	@push('componentScripts')
+	<script src="{{ $U('/node_modules/chart.js/dist/Chart.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/chartjs-plugin-doughnutlabel/dist/chartjs-plugin-doughnutlabel.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/chartjs-plugin-piechart-outlabels/dist/chartjs-plugin-piechart-outlabels.js?v=', true) }}{{ $version}}"></script>
+	<script src="{{ $U('/viewjs/metrics.js', true) }}?v={{ $version }}"></script>
+	@endpush
+@endonce
 
 @section('content')
 <div class="row">
@@ -83,8 +91,8 @@
 </div>
 
 <div class="row mt-2">
-	<div class="col-sm-12 col-md-12 col-xl-12">
-		<div id="metrics-chart" style="height: 400px;"></div>
+	<div id="chart-wrapper" class="col-sm-12 col-md-12 col-xl-12">
+		<canvas id="metrics-chart"></canvas>
 	</div>
 	<div class="col-sm-12 col-md-12 col-xl-12">
 		<table id="metrics-table"
diff --git a/yarn.lock b/yarn.lock
index 7e96eb79..8ac5aafe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -168,6 +168,16 @@ chartjs-color@~2.2.0:
     chartjs-color-string "^0.5.0"
     color-convert "^0.5.3"
 
+chartjs-plugin-doughnutlabel@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-doughnutlabel/-/chartjs-plugin-doughnutlabel-2.0.3.tgz#0aa19b040dc68e12163e3215a01609cb3e0b5a7b"
+  integrity sha512-it815BZSPggTkyhC3b4BVqDwlySKtzO0kZ11DCUs/nD29DGoj6w5luDu4slczg97ml7VRROHawxlS0HvGEIVdw==
+
+chartjs-plugin-piechart-outlabels@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-piechart-outlabels/-/chartjs-plugin-piechart-outlabels-0.1.4.tgz#e97e19a12202d74f9040d9e4641987c9d1e458fc"
+  integrity sha512-IaYkh6ab8nLAvgioQ+BwU0awfMbxwmfO2AeBL+S45VVx9AdObovr9+aE+ShUO2Og96y6eJpCxZGJr4zXB7YnRw==
+
 color-convert@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
@@ -491,12 +501,7 @@ jquery@3.3.1:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
   integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
 
-jquery@>=1.10:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
-  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
-
-jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0:
+jquery@>=1.10, jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==