Position of the chart info window

pierre-gilles · August 14, 2026, 9:28am

Hi @Jluc,

It’s fixed:

The PR:

github.com/GladysAssistant/Gladys

Dashboard: make chart tooltip follow the cursor instead of masking the curves (#2866)

master ← claude/affichage-temperatures-j0zcyh

ouvert 07:32AM - 14 Aug 26 UTC

Pierre-Gilles

+168 -15

### Description On dashboard charts, the tooltip was pinned to the top-left of …the chart (`fixed: { position: 'topLeft' }`), so it permanently covered the curves while hovering — especially with several series (e.g. multiple temperature sensors), where the tooltip is tall enough to hide most of the chart. **What this PR does:** 1. Removes the fixed tooltip positioning (`ApexChartComponent.jsx` for line/area/stepline/bar/energy consumption charts, `ApexChartTimelineOptions.js` for the timeline chart) and enables `followCursor`. 2. Keeps the tooltip **30px away from the cursor** (new `apexChartTooltipPositioning.js` module), preferring the bottom-right of the cursor and flipping to the other side near the chart edges — plain `followCursor` was not enough, the tooltip stuck to the pointer and still covered the curve under it. 3. Caps the tooltip width at `min(320px, 80vw)` and lets long device names wrap (`style/index.css`), so a device like `Capteur température terrasse (Température) (°C)` no longer stretches the tooltip across the whole chart. **Why a MutationObserver:** ApexCharts repositions its tooltip from several code paths — synchronously in its own mousemove listeners, but also from a ~100ms throttle timer (`seriesHoverTimeout`) that fires *after* the cursor stops moving. Positioning only from `chart.events.mouseMove` therefore always ends up overridden (this is the race that blocked the previous attempt in #2613). A MutationObserver on the tooltip element re-applies our position whenever ApexCharts moves it, as a microtask before the frame is painted: no flicker, and the native positioning can never win once the cursor stops. **Verified with Playwright** against the real ApexCharts build (line chart with axes + sparkline box, 3 long-named series): 30px gap maintained at chart center, edges, and after a fast sweep followed by a dead stop (the throttled ApexCharts redraw no longer wins the race). ## Forum Forum: https://community.gladysassistant.com/t/affichage-temperatures/10417 ### Checklist - [x] Tests pass: front-only change, no server code touched; behavior verified with Playwright against the bundled ApexCharts build - [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier-check` on front — 0 errors) - [x] No undocumented breaking change ## Summary by CodeRabbit * **Bug Fixes** * Updated chart tooltips to follow the cursor for more intuitive positioning. * Removed fixed top-left tooltip placement across standard and timeline charts. * Improved tooltip behavior near chart edges and on touch devices. * Ensured tooltip positioning remains consistent as chart content updates. * **Style** * Limited tooltip width and enabled long device names to wrap for improved readability.

Thanks for your feedback and sorry for the delay
We should have handled this much earlier! Now, with Claude, this kind of fix is much faster.

Topic		Replies	Views
Affichage températures tooltip masque la courbe? Configuration	3	73	August 14, 2026
Valeurs décimales ".00" dans l'ordonnée des graphiques alors que les valeurs sont entières Configuration graphique	6	102	February 28, 2025
Gladys Assistant v4.26.1 : Mosquitto fixé à la v2.0.15, Google Home, amélioration courbes Actualités	13	1227	August 22, 2023
Améliorer les graphiques Demandes livrées graphique	3	554	April 26, 2024
[Dashboard] Mieux gérer le 'survol' d'un graphique pour ne pas masque la courbe Demande de fonctionnalités feature-request-ux , dashboard	1	34	January 28, 2025

Position of the chart info window

Related topics