0👍
I took your code, changed the Chart.js script file (now importing from cdnjs.cloudflare.com) and added the missing canvas
.
The tooltips appear as expected…
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="energy-generation-canvas" height="100"></canvas>
<script>
const DATA_COUNT = 12;
const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
labels.push(i.toString());
}
const datapoints = [0, 20, 20, 60, 60, 120, 30, 180, 120, 125, 105, 110, 170];
const data = {
labels: labels,
datasets: [
{
label: 'Test',
data: datapoints,
borderColor: "#FF0000",
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
showTooltips: true,
plugins: {
title: {
display: true,
text: 'myTitle'
},
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
}
return label;
}
}
}
},
interaction: {
intersect: false,
},
scales: {
x: {
display: true,
title: {
display: true
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
},
suggestedMin: -10,
suggestedMax: 200
}
}
},
};
const ctx = document.getElementById('energy-generation-canvas').getContext('2d');
const myChart = new Chart(ctx, config);
</script>
- Chartjs-Chartjs multiple lines datasets perfomance issue
- Chartjs-Adding a chart-js plugin to vue-chart-js
Source:stackexchange.com