I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points.
The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area.
To address this issue and ensure the tooltip is only displayed upon clicking the points, I have configured the chart options to respond solely to click events like so:
options: {
events: ['click'],
.....
..
Kindly confirm if the above approach is correct for showing tooltips exclusively on click events and not other types of events.
As a result of this setup, neither the default Chart.js tooltip nor the custom tooltip automatically hides when the mouse is moved or clicked outside the chart canvas area.
If anyone could assist me in finding a solution to this issue, it would be greatly appreciated.
Here is the link to my JS Fiddle Example
Below is the complete code:
JS:
// JavaScript code here...
HTML:
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
CSS:
// CSS code here...