Show datapoints on hover

HTTPArchive · Dec 3, 2024 · cc2bf5e · cc2bf5e
1 parent 14c0e6b
commit cc2bf5e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/js/histogram.js b/src/js/histogram.js
@@ -343,6 +343,7 @@ function drawChart(series, containerId, options) {
             mode: 'nearest',
             axis: 'x',
             intersect: false,
+            animation: false,
             titleAlign: 'center',
             callbacks: {
               title: function (context) {

diff --git a/src/js/timeseries.js b/src/js/timeseries.js
@@ -238,7 +238,7 @@ const getLineSeries = (name, data, color) => ({
   data,
   backgroundColor: color,
   borderColor: color,
-  pointStyle: false
+  radius: 0,
 });
 const getAreaSeries = (name, data, color, fill=false) => ({
   label: name,
@@ -308,6 +308,10 @@ async function drawChart(options, series) {
             bottom: 20,
           },
         },
+        hover: {
+          mode: 'nearest',
+          intersect: false,
+        },
         plugins: {
           title: {
             display: true,
@@ -337,6 +341,7 @@ async function drawChart(options, series) {
             mode: 'nearest',
             axis: 'x',
             intersect: false,
+            animation: false,
             titleAlign: 'center',
             callbacks: {
               title: function (context) {
@@ -521,6 +526,17 @@ async function drawChart(options, series) {
               ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
               ctx.stroke();
               ctx.restore();
+
+
+              // Highlight data points for all datasets
+              const timestamp = tooltip.element.$context.raw[0];
+              chart.data.datasets.forEach((dataset, _) => {
+                dataset.radius = dataset.data.map((point, _) => {
+                  return point[0] === timestamp ? 5 : 0;
+                });
+              });
+
+              chart.update('none');
             }
           }
         }