How to implement tooltip mode "single" in Chart.js 3? - chart.js

It seems that in Chart.js there was a tooltip mode "single", which resulted in displaying only a single entry in the tooltip label (https://www.chartjs.org/docs/2.7.3/general/interactions/modes.html#single-deprecated).
Chart.js 3 displays multiple adjacent items in tooltip by default. Is there a way to adjust the behavior to display a single nearest item?

As described in the docs you can use mode nearest with intersect true to return the nearest point or you can use mode point

Related

Is it possible to make x-axis values clickable in nivo charts

Is it possible to make x-axis values clickable in nivo charts to show desired output
looking for solution

How to add a text box in Chart.JS

I have created a simple Bar Chart in Chart.JS and all looks good. I now need to add a text box to the chart with rounded corners such as in the example below
I have tried the annotation plugin, but that only seems to add boxes and lines, not text. I don't want to overwrite defaults as I have several charts on my page, and only this one is to contain the text.
Is this possible?
Thanks

APEX Interactive Grid column width

I have an Interactive Grid with a lot of columns and APEX fits them all on the screen making them way to small to be useful.
How can I give them a default width and make them go off the screen with a scroll bar?
Changing the Width parameter for a column in the Appearance secion has no visual effect.
I'm using APEX 5.1
You need to set the Minimum Column Width property for each column in the Interactive Grid's Actions menu:
Once done, you can use Actions>Report>Save to save these settings permanently. The result (I just did this for 2 columns):

Chart.js - Tooltip hover issue

I am facing a problem. I created an chart using the time scale, but when I hover the first chart value for example, it displays the first tooltip of with the first sries's value. See the following screenshot:

Wrong stem position in balloon-style tooltips in report list-view

I'd like to change the default style of the list-view control's tooltips to balloon.
I first called ListView_GetToolTips() to get the HWND of the list-view's tooltips control, and then used GetWindowLongPtr()/SetWindowLongPtr() to add the TTS_BALLOON style.
I handle LVN_GETINFOTIP to customize the tooltip for the items (first column) in the list-view: the tooltip texts that appear for the first column items are actually a copy of the text of the third column. The other columns (subitems) are managed automatically by the list-view.
The balloon-style tooltips for the first column items seem OK; their stems are correctly positioned:
But the tooltips for the second column seem drawn wrongly, e.g. the balloon is drawn as if it was referred to a subitem in a row below the actual row pointed by the mouse cursor.
In the following picture, the "star" indicates the position in which the mouse cursor was when the tooltip appeared, but the tooltip's stem points to a row below, marked with an ellipse:
The strange thing is that the tooltips for the third column seem drawn correctly.
Is this a bug in the list-view control? (I'm using Windows 7.)
Or what am I missing here?
The ListView uses a tracking tooltip and positions it to unfold and reveal the hidden text in a column that's too small. It's not expecting its tooltip to be a balloon and so doesn't compensate for that.
You'd need to sub-class the tooltip itself, watch for TTM_TRACKPOSITION messages from the ListView, and adjust the coordinates.
Your second question - the shaded background comes from the system theme. You should be able to get it by calling SetWindowTheme on the tooltip (I'm not sure why the ListView disables themes for the tip).