I am using the latest ChartJS version (2.8.0). I need to always display two specific tooltips, in position: 'average', without hover, like so:
Expected: permanent tooltip to show points between dotted lines
But this is all I managed to do so far: Current: permanent individual tooltips
I've consulted this thread (Chart JS: Always show tooltips in a multi dataset line chart) but was unable to use the code to generate any combined tooltip at all.
I also tried the single dataset code provided for doughnut charts provided here (Chart.js - Doughnut show tooltips always?), but this is giving me the individual tooltips instead.
var ctx = document.getElementById('myChart').getContext('2d')
Chart.plugins.register({
beforeRender: function(chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function(dataset, i) {
chart.getDatasetMeta(i).data.forEach(function(sector, j) {
chart.pluginTooltips.push(
new Chart.Tooltip(
{
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
},
chart
)
);
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function(chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1) return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip._options.mode = 'index';
// tooltip._options.position = 'average';
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
datasets: [{
label: 'Votre portefeuille',
data: [2, 3, 4, 5, 6, 7, , , , ],
backgroundColor: 'rgba(17, 43, 55, 1)',
borderColor: 'rgba(17, 43, 55, 1)',
pointRadius: [0, 0, 0, 0, 0, 3, 0, 0, 0, 3],
fill: false
}, {
label: 'Votre portefeuille à la performance du marché ',
data: [2, 5, 6, 7, 8, 9, , , , ],
backgroundColor: 'rgba(108, 162, 54, 1)',
borderColor: 'rgba(108, 162, 54, 1)',
pointRadius: [0, 0, 0, 0, 0, 3, 0, 0, 0, 3],
fill: false
}, {
label: 'DOTTED Votre portefeuille',
data: [, , , , , 7, 8, 9, 10, 11],
backgroundColor: 'rgba(17, 43, 55, 1)',
borderColor: 'rgba(17, 43, 55, 1)',
borderDash: [5, 5],
pointRadius: [0, 0, 0, 0, 0, 3, 0, 0, 0, 3],
fill: false
}, {
label: 'DOTTED Votre portefeuille à la performance du marché',
data: [, , , , , 9, 11, 13, 15, 17],
backgroundColor: 'rgba(108, 162, 54, 1)',
borderColor: 'rgba(108, 162, 54, 1)',
borderDash: [5, 5],
pointRadius: [0, 0, 0, 0, 0, 3, 0, 0, 0, 3],
fill: false
}]
},
options: {
// responsive: true,
aspectRatio: 1.5,
showAllTooltips: true,
// showTooltips: true,
tooltips: {
position: 'average',
mode: 'label',
intersect: false,
filter: function(tooltipItem, data) {
if (tooltipItem.xLabel === '9' || tooltipItem.index === data.labels.length - 5) {
return tooltipItem.datasetIndex === 2
} else {
return ''
}
},
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderColor: 'rgba(17, 43, 55, 1)',
bodyFontStyle: 'bold',
bodyAlign: 'center',
borderWidth: 1,
xPadding: 12,
yPadding: 12,
// yAlign: 'top',
xAlign: 'right',
displayColors: false,
callbacks: {
title: function(tooltipItem, data) {
return ''
},
beforeLabel: function(tooltipItem, data) {
if (tooltipItem.datasetIndex === 2) {
var total = 0
total = Math.round((parseInt(data.datasets[2].data[tooltipItem.index]) - parseInt(data.datasets[3].data[tooltipItem.index])) / 100) * 100
if (total < 0) {
return 'Manque à gagner'
} else {
return 'Surplus'
}
}
return ''
},
label: function(tooltipItem, data) {
if (tooltipItem.datasetIndex === 2) {
var total = 0
total = Math.round((parseInt(data.datasets[2].data[tooltipItem.index]) - parseInt(data.datasets[3].data[tooltipItem.index])) / 100) * 100
if (total < 0) {
return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' $'
} else {
return total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' $'
}
}
return ''
},
afterLabel: function(tooltipItem, data) {
return ''
},
labelTextColor: function(tooltipItem, chart) {
if (parseInt(chart.config.data.datasets[2].data[tooltipItem.index]) < parseInt(chart.config.data.datasets[3].data[tooltipItem.index])) {
return '#F31919'
} else {
return '#6CA236'
}
},
opacity: function(tooltipItem, data) {
return '0'
}
}
},
// hover: {
// mode: 'nearest', // null if no hover? filter type none? enabled false?
// intersect: false
// },
legend: {
position: 'bottom',
reverse: true,
labels: {
usePointStyle: true,
fontSize: 16
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 30
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Année',
fontSize: 16
},
ticks: {
autoSkip: false,
maxRotation: 90,
padding: 20
}
}],
yAxes: [{
display: true,
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Valeur marchande $',
fontSize: 16
},
ticks: {
callback: function(value, index, values) {
return value.toLocaleString('fr-CA') + ' $'
}
}
}]
}
}
})
This fiddle contains the desired positioning for the tooltips, but they need to be hovered on.
This fiddle has the permanent tooltips, but individual/right next to the points instead of between the 2 lines.
I can't seem to find information for multitooltips beyond threads from 3 years ago, and am having trouble going through the github code for tooltip generation. Any help would be appreciated.
