function loadJson(selector) { return JSON.parse(document.querySelector(selector).getAttribute('data-json')); } var jsonData = loadJson('#jsonData'); var full_data = jsonData.map((item) => item); var ctx = document.getElementById('volume').getContext("2d"); new Chart(ctx, { type: 'line', data: { datasets: [ { label: "Sentiment", fill: false, backgroundColor: 'black', borderColor: 'lightblue', tension: 0.3, data: full_data, spanGaps: true, } ], }, options: { parsing: { xAxisKey: 'date', yAxisKey: 'value', }, 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; } } } } } });