Reputation: 1752
I use chartJS v2.
I try to keep tooltip open when user click on a point of a multiple lines chart. The tooltip must contains the data for each lines for one abscissa value. I wrote a chartJS plugin to do it and it works but it displays only the data for one line.
Here is the fiddle:
https://jsfiddle.net/bencarbon/jrpLh8pa/
Here is the plugin:
var keepTooltipOpenPlugin = {
beforeRender: function(chart) {
// We are looking for bubble which owns "keepTooltipOpen" parameter.
var datasets = chart.data.datasets;
chart.pluginTooltips = [];
for (i = 0; i < datasets.length; i++) {
for (j = 0; j < datasets[i].data.length; j++) {
if (datasets[i].data[j].keepTooltipOpen && !chart.getDatasetMeta(i).hidden) {
//When we find one, we are pushing all informations to create the tooltip.
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
}
Chart.pluginService.register(keepTooltipOpenPlugin);
I use it in this way:
function handleClick(evt) {
var activeElement = myLineChart.getElementAtEvent(evt);
if(activeElement.length>0){
var values = myLineChart.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
if(values.keepTooltipOpen)
values.keepTooltipOpen = false;
else
values.keepTooltipOpen = true;
}
};
How should I modify my plugin to display the data for each lines in the tooltip??
Thanks
Upvotes: 1
Views: 2906
Reputation: 11
you could just use the events option:
chartOptions = { events: ["click", "mouseout"], }
Upvotes: 0
Reputation: 46
Your problem is interesting, so I updated the jsfiddle. Let me know if you found a bug:
https://jsfiddle.net/bencarbon/jrpLh8pa/4/
Here is the new plugin:
var keepTooltipOpenPlugin = {
beforeRender: function(chart) {
// We are looking for bubble which owns "keepTooltipOpen" parameter.
var datasets = chart.data.datasets;
chart.pluginTooltips = [];
var abscissaToShow = chart.data.keepShowing;
abscissaToShow.forEach(function(element) {
var activeArray = [];
for (i = 0; i < datasets.length; i++) {
if(!chart.getDatasetMeta(i).hidden)
activeArray.push(chart.getDatasetMeta(i).data[element])
}
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: activeArray
}, 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
}
Chart.pluginService.register(keepTooltipOpenPlugin);
Upvotes: 3