I have a stacked bar chart and I want to always display the tooltip on my stacked bar. I manage to get it to work but the result is not what I want. It displayed the tooltip for each stacked bar separately; what I want is to show the tooltip for both the stacked bar in one / grouped.
By using tooltip option mode: 'label' or 'index', it works but only work on hover (mouse over). I want to display the grouped tooltip always on the graph.
Below the code that I am currently using:
In plugin service register, below was added to always show the tooltip on the graph:
Chart.pluginService.register({
beforeRender: function(chart) {
//chart.options.tooltips.mode = 'index';
var datasets = chart.data.datasets;
chart.pluginTooltips = [];
for (i = 0; i < datasets.length; i++) {
for (j = 0; j < datasets[i].data.length; j++) {
if (Number(datasets[i].data[j]) > 0) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [chart.getDatasetMeta(i).data[j]]
}, chart));
}
}
}
}, // end beforeRender
afterDatasetsDraw: function(chart, easing) {
// Draw tooltips
Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
tooltip.pivot();
tooltip.transition(easing).draw();
});
} // end afterDatasetsDraw
});
In the chart option, below tooltip option was added: *tooltip with label mode was to show the tooltip as a group; this only works on hover, I want to get it to work to always display on the graph.
tooltips: {
mode: 'label',
Below the result that I currently get:
Below the expected result that I want to have (it only shows on hover now):
My question is: How can I draw the grouped tooltip (as shown above) to display always (fixed) on the graph.
