Chart styling

web/src/components/Charts/AccessPointClientsChart.vue

@@ -146,7 +146,29 @@ export default {
 
               return gradient
             },
-            borderWidth: 3,
+            backgroundColor: context => {
+              const { ctx, chartArea } = context.chart
+
+              if (!chartArea) return null // This case happens on initial chart load
+
+              const gradient = ctx.createLinearGradient(
+                0,
+                chartArea.bottom,
+                0,
+                chartArea.top
+              )
+
+              const hexTransparency = '55'
+
+              gradient.addColorStop(0, colors.cyan.base + hexTransparency)
+              gradient.addColorStop(0.05, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.3, colors.green.base + hexTransparency)
+              gradient.addColorStop(0.7, colors.orange.base + hexTransparency)
+              gradient.addColorStop(0.9, colors.red.base + hexTransparency)
+
+              return gradient
+            },
+            borderWidth: 2,
             pointRadius,
 
             cubicInterpolationMode: 'default',

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -78,14 +78,13 @@ export default {
             ticks: {
               maxRotation: 0,
               minRotation: 0,
-              autoSkipPadding: 16
+              autoSkipPadding: 24
             },
             time: {
               unit: 'minute',
-              // stepSize: 15,
 
               displayFormats: {
-                minute: 'H:mm'
+                minute: 'd/M HH:mm'
               }
             },