# Position de la fenêtre d'informations des graphiques

**URL:** <https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553>\
**Category:** Demandes livrées\
**Tags:** feature-core, in-progress\
**Created:** [Juin 2, 2025, 4:59 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553 "2025-06-02T16:59:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Juin 2, 2025, 4:59 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/1 "2025-06-02T16:59:57Z")

</div>

Bonjour,  
Je ne sais pas si vous êtes dans le même cas pour l’affichage des graphiques.  
Les courbes ne sont généralement pas visibles, cachées sous la fenêtre. Est-ce qu’une fenêtre dynamique pourrait être configurée, mobile et ajustable en taille ?

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/c/b/cb3260a26fecdc994884580d9feed76c704e0ea1.png)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juin 4, 2025, 6:44 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/2 "2025-06-04T06:44:24Z")

</div>

Je ne sais pas si tu sais : tu peux renommer «&nbsp;Capteur luminosité Balcon nord (Luminosité décimale) (lx)&nbsp;» pour un titre moins long directement dans l’édition du widget, au moins ça réduira la largeur de cette fenêtre 🙂

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Juin 6, 2025, 10:51 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/3 "2025-06-06T10:51:23Z")

</div>

Merci @pierre-gilles, j’ai pu réduire le nombre de caractères sans toutefois parvenir à supprimer la parenthèse et l’unité qu’elle contient.  
Au final, le détail de la courbe reste toujours caché.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/4/d/4df537a3c5945a8c69dfc2bc93d9081199510d41.jpeg)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juin 6, 2025, 12:24 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/4 "2025-06-06T12:24:05Z")

</div>

Je ne suis pas certain de savoir ce que je vois… Tu as fais un montage avec les différents screenshots ?

Est-ce que tu peux me faire une capture d’écran complète, non-recadrée, du problème ?

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Juin 6, 2025, 1:59 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/5 "2025-06-06T13:59:46Z")

</div>

Voici la capture :

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/5/7540d2040c5e3649d210abb50f59691eeef5a2cf.png)  
L’idéal serait que la fenêtre soit décalée par rapport à la courbe.

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Juin 6, 2025, 2:03 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/6 "2025-06-06T14:03:53Z")

</div>

Afin de bien visualiser la courbe au fur et à mesure du déplacement du curseur.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/6/2/62e9ed099bd4fdeb77282da9fca485bc27134d46.png)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Juin 9, 2025, 6:57 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/7 "2025-06-09T06:57:32Z")

</div>

Ok je vois, effectivement j’ai le même comportement chez moi.

Il faut voir à quel point on peut personnaliser ça, on utilise le tooltip `apexcharts-tooltip-rangebar` d’ApexCharts 🙂

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Novembre 4, 2025, 9:31 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/8 "2025-11-04T09:31:54Z")

</div>

Bonjour,

J’ai toujours le même problème après avoir raccourci les informations. J’ai laissé sans connaître ses incidences, la longueur du nom des appareils. Avec beaucoup de scènes, c’est fastidieux de les raccourcir. La solution maintenant serait de détacher les infos des courbes pour les visualiser et les interpréter facilement.

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Mars 26, 2026, 1:41 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/9 "2026-03-26T13:41:46Z")

</div>

Je supprime le vote pour cette demande et quelques autres notamment pour les sujets qui n’ont pas intéressé.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 14, 2026, 9:28 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/10 "2026-08-14T09:28:21Z")

</div>

Salut @Jluc,

C’est corrigé :

 ![Capture d’écran 2026-08-14 à 11.27.21](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/7/a7f8f509b48b40c8d2869bad0ba89d838c8426d2.png)

La PR :

> <https://github.com/GladysAssistant/Gladys/pull/2866>
>
> \### 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.

Merci pour ton retour et désolé pour le délai 🙌  
On aurait dû le traiter bien avant ! Maintenant, avec Claude c’est beaucoup plus rapide ce genre de correctifs.

---

<div class="post-metadata">

**Author:** ![Jluc](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jluc/32/12397_2.png) [@Jluc](https://community.gladysassistant.com/u/Jluc)\
**Post date:** [Août 14, 2026, 9:41 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/11 "2026-08-14T09:41:20Z")

</div>

Salut @pierre-gilles ,

Pas de soucis pour le délai, à part @l.dolle personne ne semblait gêné par le sujet et avec toutes les nouveautés, je comprends bien.

Merci à toi.

i

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 14, 2026, 3:15 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/12 "2026-08-14T15:15:25Z")

</div>

Je ferme ce post car le fix est disponible dans Gladys Assistant 4.86 :

> [@Gladys 4.86 : la plus grosse release de l’histoire du projet rocket](https://community.gladysassistant.com/t/gladys-4-86-la-plus-grosse-release-de-l-histoire-du-projet/10554):
>
> Salut à tous ! Super heureux de sortir Gladys Assistant 4.86. C’est simple, c’est la plus grosse version depuis le début du projet, avec 68 PR fusionnées en une semaine exploding_head C’est juste incroyable, et ça montre le nouveau rythme qu’on peut tenir avec l’IA. L’objectif est maintenant clair : rattraper et dépasser Home Assistant rocket Je vous parle de ces 68 nouveautés ici : Merci à tous les contributeurs !!

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 14, 2026, 3:15 UTC](https://community.gladysassistant.com/t/position-de-la-fenetre-dinformations-des-graphiques/9553/13 "2026-08-14T15:15:28Z")

</div>


