Edit tooltip for scatter plot

public/js/appChart.js

@@ -789,12 +789,12 @@ const drawScatterPlotHC = function () {
 
   const SERIES_1_NAME = "Rücklauftemp";
   const SERIES_1_SYMBOL_COLOR = "rgba(119, 152, 191, .5)";
-  const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color
+  const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color for a more "intense" color
   const SERIES_1_SYMBOL = "°C";
 
   const SERIES_2_NAME = "Power";
   const SERIES_2_SYMBOL_COLOR = "rgba(223, 83, 83, .5)";
-  const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color
+  const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color for a more "intense" color
   const SERIES_2_SYMBOL = "kW";
 
   Highcharts.chart("chart-scatter-plot", {
@@ -886,8 +886,9 @@ const drawScatterPlotHC = function () {
           },
         },
         tooltip: {
-          headerFormat: "<b>{series.name}</b><br>",
+          headerFormat: "{point.x:%e %b, %Y %H:%M:%S}: <b>{point.y}</b>",
           pointFormat: "{point.x} cm, {point.y} kg",
+          valueDecimals: 2,
         },
       },
     },
@@ -897,12 +898,20 @@ const drawScatterPlotHC = function () {
         name: SERIES_1_NAME,
         color: SERIES_1_SYMBOL_COLOR,
         data: ruecklaufArr,
-        yAxis: 1, // need this property for the dual y-axes
+        tooltip: {
+          valueSuffix: ` ${SERIES_1_SYMBOL}`,
+        },
       },
       {
         name: SERIES_2_NAME,
         color: SERIES_2_SYMBOL_COLOR,
         data: powerArr,
+        // need this property for the dual y-axes to work
+        // defines the y-axis that this series refers to
+        yAxis: 1,
+        tooltip: {
+          valueSuffix: ` ${SERIES_2_SYMBOL}`,
+        },
       },
     ],
   });