From 751bd4a1c8f287bc65b160d99a27f54e6c4956bc Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <5760249+gdarko@users.noreply.github.com>
Date: Thu, 2 Apr 2026 20:02:49 +0200
Subject: [PATCH] Upgrade ChartJS from v2 to v4 (#603)

---
 package.json                                  |  2 +-
 .../admin/components/charts/LineChart.vue     | 38 +++++++-------
 yarn.lock                                     | 50 ++++---------------
 3 files changed, 31 insertions(+), 59 deletions(-)

diff --git a/package.json b/package.json
index e3ee2a2e..7330e6b0 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^14.0.0",
     "axios": "1.14.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.5.1",
     "guid": "^0.0.12",
     "laravel-vite-plugin": "^3.0.0",
     "lodash": "^4.17.21",
diff --git a/resources/scripts/admin/components/charts/LineChart.vue b/resources/scripts/admin/components/charts/LineChart.vue
index f12c4d67..800af781 100644
--- a/resources/scripts/admin/components/charts/LineChart.vue
+++ b/resources/scripts/admin/components/charts/LineChart.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import Chart from 'chart.js'
+import { Chart } from 'chart.js/auto'
 import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 
@@ -65,19 +65,21 @@ onMounted(() => {
   let options = reactive({
     responsive: true,
     maintainAspectRatio: false,
-    tooltips: {
-      enabled: true,
-      callbacks: {
-        label: function (tooltipItem, data) {
-          return utils.formatMoney(
-            Math.round(tooltipItem.value * 100),
-            defaultCurrency.value
-          )
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function (context) {
+            return utils.formatMoney(
+              Math.round(context.parsed.y * 100),
+              defaultCurrency.value
+            )
+          },
         },
       },
-    },
-    legend: {
-      display: false,
+      legend: {
+        display: false,
+      },
     },
   })
 
@@ -87,7 +89,7 @@ onMounted(() => {
       {
         label: 'Sales',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
         borderColor: '#040405',
         borderCapStyle: 'butt',
@@ -108,7 +110,7 @@ onMounted(() => {
       {
         label: 'Receipts',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
         borderColor: 'rgb(2, 201, 156)',
         borderCapStyle: 'butt',
@@ -129,7 +131,7 @@ onMounted(() => {
       {
         label: 'Expenses',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(245, 235, 242)',
         borderColor: 'rgb(255,0,0)',
         borderCapStyle: 'butt',
@@ -150,7 +152,7 @@ onMounted(() => {
       {
         label: 'Net Income',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(236, 235, 249)',
         borderColor: 'rgba(88, 81, 216, 1)',
         borderCapStyle: 'butt',
@@ -190,8 +192,6 @@ function update() {
     (expense) => expense / 100
   )
   myLineChart.data.datasets[3].data = props.income.map((_i) => _i / 100)
-  myLineChart.update({
-    lazy: true,
-  })
+  myLineChart.update('none')
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index e4e48075..f0418b37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -205,6 +205,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
 "@oxc-project/types@=0.122.0":
   version "0.122.0"
   resolved "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz"
@@ -842,28 +847,12 @@ call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
-chart.js@^2.9.4:
-  version "2.9.4"
-  resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+chart.js@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz"
+  integrity sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==
   dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
+    "@kurkle/color" "^0.3.0"
 
 chokidar@^5.0.0:
   version "5.0.0"
@@ -877,23 +866,6 @@ clsx@^2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-color-convert@^1.9.3:
-  version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -1516,7 +1488,7 @@ mlly@^1.7.4, mlly@^1.8.0:
     pkg-types "^1.3.1"
     ufo "^1.6.3"
 
-moment@^2.10.2, moment@^2.30.1:
+moment@^2.30.1:
   version "2.30.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==