Good day everyone,
I'm a new to Chart Js, I want to display a text when the mouse hovers over a vertical bar, in addition to the information displayed by default (in my case it's the name of the person and the number of votes/number of likes).
here is my source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChartJS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
</head>
<body>
<canvas id="monGraph" width="400" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script>
let ctx = document.querySelector("#monGraph")
let graph = new Chart(ctx, {
type: "bar",
data: {
labels: ['Patrick', 'Josh', 'Sebastien', 'Oliver', 'Violette', 'Peter'],
datasets: [{
label: 'Number of votes',
data: [12, 19, 3, 5, 2, 3],
// backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
backgroundColor: 'red'
},
{
label: 'Number of likes',
data: [14, 2, 5, 8, 7, 22],
// backgroundColor: ['red', 'lightblue', 'lightyellow', 'lightgreen', 'pink', 'gold']
backgroundColor: 'blue',
}]
},
options: {
title: {
display: true,
text: 'My nice Chart'
},
legend: {
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
</script>
</body>
</html>Thank you in advance.
Simply add tooltips mode 'index' inside the chart options.
tooltips: {
mode: 'index'
}
Please take a look at your amended code and see how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChartJS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
</head>
<body>
<canvas id="monGraph" width="400" height="100"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script>
let ctx = document.querySelector("#monGraph")
let graph = new Chart(ctx, {
type: "bar",
data: {
labels: ['Patrick', 'Josh', 'Sebastien', 'Oliver', 'Violette', 'Peter'],
datasets: [{
label: 'Number of votes',
data: [12, 19, 3, 5, 2, 3],
// backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
backgroundColor: 'red'
},
{
label: 'Number of likes',
data: [14, 2, 5, 8, 7, 22],
// backgroundColor: ['red', 'lightblue', 'lightyellow', 'lightgreen', 'pink', 'gold']
backgroundColor: 'blue',
}]
},
options: {
title: {
display: true,
text: 'My nice Chart'
},
tooltips: {
mode: 'index'
},
legend: {
position: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
</script>
</body>
</html>