Implement chart tooltips

core/static/chart.js

@@ -1,34 +1,41 @@
 function loadJson(selector) {
     return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
-  }
-  
-
+}
 var jsonData = loadJson('#jsonData');
-var data = jsonData.map((item) => item.value);
-var labels = jsonData.map((item) => item.date);
+var full_data = jsonData.map((item) => item);
 
-var config = {
-    type: 'line',
-    data: {
-    labels: labels,
+var ctx = document.getElementById('volume').getContext("2d");
+new Chart(ctx, {
+  type: 'line',
+  data: {
     datasets: [
-        {
-        label: 'Sentiment',
+      {
+        label: "Sentiment",
+        fill: false,
         backgroundColor: 'black',
         borderColor: 'lightblue',
-        data: data,
-        fill: false
-        }
-    ]
+        tension: 0.3,
+        data: full_data,
+        spanGaps: true,
+      }
+    ],
+  },
+  options: {
+    parsing: {
+      xAxisKey: 'date',
+      yAxisKey: 'value',
     },
-    options: {
-        responsive: true,
-
+    plugins: {
+      tooltip: {
+        callbacks: {
+          beforeFooter: function(context) {
+            return "Nick: " + full_data[context[0].dataIndex].nick;
+          },
+          footer: function(context) {
+            return "Msg: " + full_data[context[0].dataIndex].text;
+          }
+        }
+      }
     }
-}
-var element = document.getElementById('volume');
-element.removeAttribute("height");
-element.removeAttribute("width");
-
-var ctx = document.getElementById('volume').getContext('2d');
-new Chart(ctx, config);
+  }
+});