Hi all,
We want to display a custom tooltip on the time series charts as the mouse
hovers over the chart. To achieve that we're using the xAxis' axisPointer label
formatter to get the data point where mouse is currently hovered in combination
with the mouseout and mouseover listeners on the chart DOM
(chart.getDom().addEventListener('mouseout', ....) to determine if the hover is
within the chart area. While this enables us to display custom tooltips, it is
slowing the page a lot when there are about 10 charts.
Question: Is there a better way to solve this problem to avoid slowness?
Additionally, we have more mouse listeners on the chart to display the custom
tooltip for markPoints (I'll ask about this in a separate thread) which overall
slows everything down.
Below is a sample code to better illustrate how we're attempting to show custom
tooltips.
chart.getDom().addEventListener('mouseout', function(mouseEvent) {
showTooltip = chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
tooltipPosition = {
left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
top: `${mouseEvent.zrY}px`,
};
});
xAxis: {
axisPointer: {
show: true,
label: {
formatter: function(value) {
tooltipContent = getTooltipContentFromValue(value);
},
},
},
}
Any kind of pointers will help us a lot. Thanks for the awesome work!
Dhiraj
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
