Update chart.js

assets/js/stats.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-new */
 
-import Chart from 'chart.js';
+import Chart from 'chart.js/auto';
 
 const { epChartData } = window;
 
@@ -25,8 +25,6 @@ const barLabels = [];
 const barDocs = [];
 const barColors = [];
 
-Chart.defaults.global.legend.labels.usePointStyle = true;
-
 barData.forEach(function (data) {
 	barLabels.push(data[1].name);
 	barDocs.push(data[1].docs);
@@ -36,7 +34,7 @@ barData.forEach(function (data) {
 const documentChart = document.getElementById('documentChart');
 if (documentChart) {
 	new Chart(documentChart, {
-		type: 'horizontalBar',
+		type: 'bar',
 		data: {
 			labels: barLabels,
 			datasets: [
@@ -48,8 +46,11 @@ if (documentChart) {
 			],
 		},
 		options: {
-			legend: {
-				display: false,
+			indexAxis: 'y',
+			plugins: {
+				legend: {
+					display: false,
+				},
 			},
 			title: {
 				display: true,
@@ -77,8 +78,13 @@ if (queriesTotalChart) {
 			title: {
 				display: true,
 			},
-			legend: {
-				position: 'right',
+			plugins: {
+				legend: {
+					position: 'right',
+					labels: {
+						usePointStyle: true,
+					},
+				},
 			},
 			tooltips: {
 				callbacks: {

package.json

@@ -7,7 +7,7 @@
     "@10up/component-tooltip": "^2.0.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@wordpress/icons": "^10.13.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.4.7",
     "focus-trap-react": "^11.0.3",
     "react-slider": "^2.0.6",
     "uuid": "^11.0.5"