Reputation: 171
How can you disable tooltips on one of the plots on my multi plot graph, but keep the others. I have tried to set 'showToolTip' to false on the plot I dont want tooltips for but this does not work.
let ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter',
data :{
labels : cLabels,
datasets : [{
label: 'Points',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
pointStyle: 'circle',
pointRadius: 10,
data : cData,
showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
order: 2,
},{
label: '',
backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',
pointStyle: 'circle',
pointRadius: 5,
data : cData,
order: 1,
},{
Upvotes: 0
Views: 1017
Reputation: 26150
You can use a tooltip filter callback function. It returns true
if a tooltip should be displayed, false
otherwise. The following example specifies that tooltips should be displayed for the first dataset only.
options: {
...
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
}
Please have a look at the runnable code sample that follows.
const data = [
{
series: [
{date: '2020-01', value: 5 },
{date: '2020-02', value: 20 },
{date: '2020-03', value: 10 },
{date: '2020-04', value: 15 }
]
},
{
series: [
{date: '2020-01', value: 10 },
{date: '2020-02', value: 8 },
{date: '2020-03', value: 16 },
{date: '2020-04', value: 12 }
]
}
];
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: [{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>
Upvotes: 1