How do you create custom tooltips that doesn't repeat if the points are on the same (x,y)? Take a look at "C" here. I'd like to only show the tooltip label once. It's the same information in any tooltip that is going to be shown if the points are on the same X-value.
var labels = ["A", "B", "C", "D"];
var d1 = [1, 2, 3, 10];
var d2 = [3, 4, 3, 7];
var dd1 = 'y';
var dd2 = 'y';
var ctx = $("#lchart");
var lchart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
cubicInterpolationMode: "monotone",
label: "s1",
data: d1,
pointHoverRadius: 6,
pointRadius: 6,
pointBorderWidth: 3
},
{
cubicInterpolationMode: "monotone",
label: "s2",
data: d2,
pointHoverRadius: 6,
pointRadius: 6,
pointBorderWidth: 3,
}
]
},
options: {
legend: {
display: false
},
tooltips: {
yPadding: 15,
xPadding: 15,
backgroundColor: "yellow",
titleFontSize: 14,
titleFontColor: "#999",
bodyFontColor: '#000',
bodyFontSize: 12,
displayColors: false,
callbacks: {
label: function(tooltipItem, data) {
var labelrows = [
"Title:",
dd1,
"",
dd2
];
return labelrows;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<body>
<canvas id="lchart"></canvas>
</body>Dont hardcode your response for the label and it runs for every label, you will need to use the title callback and just use the data passed in the arg for the value of the item:
var labels = ["A", "B", "C", "D"];
var d1 = [1, 2, 3, 10];
var d2 = [3, 4, 3, 7];
var dd1 = 'y';
var dd2 = 'y';
var ctx = $("#lchart");
var lchart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
cubicInterpolationMode: "monotone",
label: "s1",
data: d1,
pointHoverRadius: 6,
pointRadius: 6,
pointBorderWidth: 3
},
{
cubicInterpolationMode: "monotone",
label: "s2",
data: d2,
pointHoverRadius: 6,
pointRadius: 6,
pointBorderWidth: 3,
}
]
},
options: {
legend: {
display: false
},
tooltips: {
yPadding: 15,
xPadding: 15,
mode: "index",
backgroundColor: "yellow",
titleFontSize: 14,
titleFontColor: "#999",
bodyFontColor: '#000',
bodyFontSize: 12,
displayColors: false,
callbacks: {
beforeBody: () => ('Title:'),
label: function(ttItem, data) {
return ttItem.yLabel;
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<body>
<canvas id="lchart"></canvas>
</body>