How can I modify the hitbox for tooltips in linecharts for a touchscreen device?

1 Answer 53 Views
Charts Styling Tooltip
Leo
Top achievements
Rank 1
Iron
Leo asked on 12 Aug 2024, 10:09 AM | edited on 12 Aug 2024, 10:10 AM

Hey there,

I have a line chart with invisible markers.
The marker (and therefor the tooltip) should only appear when hovered or touched, which it does so far.

But for a touchscreen device the hitbox to trigger the tooltip on a marker that is not visible seems very small, so one has to be very exact in hitting the line, for me it usually takes 2 or 3 times to hit it correctly. Is there any possibility to increase the hitbox without showing and / or increasing the marker size? I found out increasing the marker size without showing the markers does not help either.

I tried various css modifications for k-marker something along these:

.k-marker {
margin: 20px !important;
background-color: yellow !important;
padding: 50px !important;
border: 2px solid red !important;
}

to get any visual representation or feedback, but nothing seems to work.

I am aware that I can increase line thickness, but visually this is not an option.

On a different note, once I hit one point, it seems easier to hit another point on that line. It seems somehow there is an "active" line, is it possible to preselect the "active" line to get a workaround?

Am I missing something?
Any help is appreciated.
Best regards,

Leo

Yanmario
Telerik team
commented on 15 Aug 2024, 05:30 AM

Hi Leo,

The SeriesMarkersComponent provides a size option that makes the targeting of the specific series easier in my testing:

https://stackblitz.com/edit/angular-x8lgwu

There isn't a way to directly increase the hitbox of the Charts. However, you might consider submitting a feature request on our feedback portal. One possible improvement could be to add a targeting feature so that when a user taps a specific area of the Chart, it targets the nearest data point. This might enhance interaction, but our developers would need to figure out the best way to implement such a feature, especially for use on smaller devices.

Regards,
Yanmario
Progress Telerik

1 Answer, 1 is accepted

Sort by
0
Leo
Top achievements
Rank 1
Iron
answered on 15 Aug 2024, 07:20 AM

Hey,
Thanks for the input, yes the size of the markers seems to be an option if markers are set to be visible. If not the size does not seem to change anything except the visual if you do hit one.

I will get to submitting a feature request.
To me this seems something that could be beneficial to others as well.

Best Regards,
Leo

Tags
Charts Styling Tooltip
Asked by
Leo
Top achievements
Rank 1
Iron
Answers by
Leo
Top achievements
Rank 1
Iron
Share this question
or