Repository: alexjustesen/speedtest-tracker (language: php)

Issue:
Line chart point background color is orange rather than following the line color
**Describe the bug**
All line charts have an orange point background color rather than following the color of the line

**To Reproduce**
Look at any line graph in the dashboard or hover on any line graph, as per:
![image](https://github.com/alexjustesen/speedtest-tracker/assets/1915543/77862c46-c2c3-40e0-822e-56211f948881)

**Expected behavior**
Points should have the same color as the line. See documentation https://www.chartjs.org/docs/latest/charts/line.html#point-styling - specifically `pointBackgroundColor` property

**Environment (please complete the following information):**
 - OS: Ubuntu
 -  Architecture: amd64
 - Browser: chrome
 - Version: 124

**Screenshots**
See above

**Logs**
n/a

**Additional context**
n/a



Discussion / hints:

Fix patch:
diff --git a/app/Filament/Widgets/RecentDownloadChartWidget.php b/app/Filament/Widgets/RecentDownloadChartWidget.php
index a9640c889..6d32a8a82 100644
--- a/app/Filament/Widgets/RecentDownloadChartWidget.php
+++ b/app/Filament/Widgets/RecentDownloadChartWidget.php
@@ -59,6 +59,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => ! blank($item->download) ? Number::bitsToMagnitude(bits: $item->download_bits, precision: 2, magnitude: 'mbit') : 0),
                     'borderColor' => '#0ea5e9',
                     'backgroundColor' => '#0ea5e9',
+                    'pointBackgroundColor' => '#0ea5e9',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
diff --git a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php
index dc68d8b02..1c25e7004 100644
--- a/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php
+++ b/app/Filament/Widgets/RecentDownloadLatencyChartWidget.php
@@ -58,6 +58,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->download_latency_iqm ? number_format($item->download_latency_iqm, 2) : 0),
                     'borderColor' => '#10b981',
                     'backgroundColor' => '#10b981',
+                    'pointBackgroundColor' => '#10b981',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -67,6 +68,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->download_latency_high ? number_format($item->download_latency_high, 2) : 0),
                     'borderColor' => '#0ea5e9',
                     'backgroundColor' => '#0ea5e9',
+                    'pointBackgroundColor' => '#0ea5e9',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -76,6 +78,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->download_latency_low ? number_format($item->download_latency_low, 2) : 0),
                     'borderColor' => '#8b5cf6',
                     'backgroundColor' => '#8b5cf6',
+                    'pointBackgroundColor' => '#8b5cf6',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
diff --git a/app/Filament/Widgets/RecentJitterChartWidget.php b/app/Filament/Widgets/RecentJitterChartWidget.php
index 03d0e09be..326bc64f5 100644
--- a/app/Filament/Widgets/RecentJitterChartWidget.php
+++ b/app/Filament/Widgets/RecentJitterChartWidget.php
@@ -58,6 +58,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->download_jitter ? number_format($item->download_jitter, 2) : 0),
                     'borderColor' => '#0ea5e9',
                     'backgroundColor' => '#0ea5e9',
+                    'pointBackgroundColor' => '#0ea5e9',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -67,6 +68,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->upload_jitter ? number_format($item->upload_jitter, 2) : 0),
                     'borderColor' => '#8b5cf6',
                     'backgroundColor' => '#8b5cf6',
+                    'pointBackgroundColor' => '#8b5cf6',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -76,6 +78,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->ping_jitter ? number_format($item->ping_jitter, 2) : 0),
                     'borderColor' => '#10b981',
                     'backgroundColor' => '#10b981',
+                    'pointBackgroundColor' => '#10b981',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
diff --git a/app/Filament/Widgets/RecentPingChartWidget.php b/app/Filament/Widgets/RecentPingChartWidget.php
index 068cfd5ba..16a78ddc5 100644
--- a/app/Filament/Widgets/RecentPingChartWidget.php
+++ b/app/Filament/Widgets/RecentPingChartWidget.php
@@ -58,6 +58,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => ! blank($item->ping) ? number_format($item->ping, 2) : 0),
                     'borderColor' => '#10b981',
                     'backgroundColor' => '#10b981',
+                    'pointBackgroundColor' => '#10b981',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
diff --git a/app/Filament/Widgets/RecentUploadChartWidget.php b/app/Filament/Widgets/RecentUploadChartWidget.php
index aab60eaab..05cd526d3 100644
--- a/app/Filament/Widgets/RecentUploadChartWidget.php
+++ b/app/Filament/Widgets/RecentUploadChartWidget.php
@@ -59,6 +59,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => ! blank($item->upload) ? Number::bitsToMagnitude(bits: $item->upload_bits, precision: 2, magnitude: 'mbit') : 0),
                     'borderColor' => '#8b5cf6',
                     'backgroundColor' => '#8b5cf6',
+                    'pointBackgroundColor' => '#8b5cf6',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
diff --git a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php
index 6128e34ba..e421f7c10 100644
--- a/app/Filament/Widgets/RecentUploadLatencyChartWidget.php
+++ b/app/Filament/Widgets/RecentUploadLatencyChartWidget.php
@@ -58,6 +58,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->upload_latency_iqm ? number_format($item->upload_latency_iqm, 2) : 0),
                     'borderColor' => '#10b981',
                     'backgroundColor' => '#10b981',
+                    'pointBackgroundColor' => '#10b981',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -67,6 +68,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->upload_latency_high ? number_format($item->upload_latency_high, 2) : 0),
                     'borderColor' => '#0ea5e9',
                     'backgroundColor' => '#0ea5e9',
+                    'pointBackgroundColor' => '#0ea5e9',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,
@@ -76,6 +78,7 @@ protected function getData(): array
                     'data' => $results->map(fn ($item) => $item->upload_latency_low ? number_format($item->upload_latency_low, 2) : 0),
                     'borderColor' => '#8b5cf6',
                     'backgroundColor' => '#8b5cf6',
+                    'pointBackgroundColor' => '#8b5cf6',
                     'fill' => false,
                     'cubicInterpolationMode' => 'monotone',
                     'tension' => 0.4,


Test patch: