0
231
ViewsChart.js change hover text
When I hover over the data point, that is in march and has a value of 15, it says january 15 instead of march 15, but it's at the correct location. Is there anyway to fix this?
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script>
var xyValues = [
{x:"March", y:15},
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
·
Juan Pablo Isaza
2 answers
Answer question0
You can use a custom label callback for this to get the correct data for the tooltip:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script>
var xyValues = [{
x: "March",
y: 15
},
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
tooltips: {
callbacks: {
label: (ttItem, data) => (`(${data.datasets[ttItem.datasetIndex].data[ttItem.index].x}, ${data.datasets[ttItem.datasetIndex].data[ttItem.index].y})`)
}
},
legend: {
display: false
},
scales: {
xAxes: [{
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June']
}],
yAxes: [{
ticks: {
min: 6,
max: 16
}
}],
}
}
});
</script>
</body>
</html>EDIT:
You can also choose to update to the latest major version of chart.js (Version 3), there this behaviour seems to be fixed by default.
There are some major breaking changes in V3 like how scales are defined, now all scales are their own object for example with the scale id being the object key. For all changes you can read the migration guide
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script>
var xyValues = [{
x: "March",
y: 15
},
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
x: {
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June']
},
y: {
min: 6,
max: 16
},
}
}
});
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
0
Just give january and february a null value.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script>
var xyValues = [
null, null,
{x:"March", y:15},
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question