I have a chart.js line chart:
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
titleSpacing: 5,
},
responsive: true,
legend: {
display: false,
},
scales: {
yAxes: \[
{
gridLines: {
color: '#354657',
},
ticks: {
fontColor: '#fff',
stepSize: 5,
},
},
\],
xAxes: \[
{
gridLines: {
color: '#354657',
},
ticks: {
fontColor: '#fff',
},
},
\],
},
},]
The problem is, it renders tooltips with overlapping text, as shown:
This should show Current, 41.9. But they are overlapped. I tried changing titlespacing, but that didn't do anything. How can I fix this?
What I personally do for all my custom charts is create a custom title / label independent of what I pass as options to the chart. I like to have control over the HTML / whatever which gets outputted to the label. You can do this with the callbacks key
tooltips: {
enabled: true,
position: "nearest",
caretSize: 20,
mode: "index",
intersect: false,
titleFontSize: 16,
titleFontColor: "white",
backgroundColor: COLORS.DARK,
callbacks: {
title: (tooltipItem, _) => {
return formatDate("LT", tooltipItem[0].xLabel);
},
label: (tooltipItem, _) => {
const { yLabel } = tooltipItem;
return `${yLabel} Sessions Recorded`;
}
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.