# 📉 Detailed Charts Panel - Interaktive High-Performance Charts für Home Assistant - HACS **URL:** \ **Category:** HACS Integration\ **Tags:** custom-card, charts, hacs, homeassistant\ **Created:** [11. Januar 2026 um 19:07 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775 "2026-01-11T19:07:50Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 19:07 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/1 "2026-01-11T19:07:51Z")
# Detailed Charts Panel Interaktive High-Performance Charts für Home Assistant _ **Ich möchte euch gerne mein neues und bisher größtes Projekt vorstellen. 🙂** _ Wir alle kennen das Problem der Auswertung in HA. In den letzten Wochen habe ich versucht in diese Richtung ein Projekt aufzuziehen. Die einfache Auswertung von Sensoren ist immer wieder Thema und das Detailed Charts Panel soll hoffentlich die Lücke etwas schließen. Schaut es euch gerne an, ich bin auf das Feedback gespannt. Es wird auf opensource Bibliotheken für die Charts gesetzt, damit verbringe ich eigentlich auch die meiste Zeit, weil es eine Menge Abhänigkeiten und Mathematik gibt. Das Projekt ist inzwischen ziemlich umfangreich geworden (7 notwendige Dateien), ich denke aber mit der aktuellen Version ab 2.0 sollte es für den ersten offiziellen Release bereit sein. Die Versionen davor funktionieren auch, haben aber immer entsprechend weniger Funktionen, daher ladet bitte die aktuellste Version herunter. * * * Das 📉 **Detailed Charts Panel** ist eine leistungsstarke Visualisierungslösung für Home Assistant, um historische Daten deiner Sensoren tiefgehend zu analysieren. Es bietet Funktionen, die weit über die Standard-History hinausgehen, wie z.B. Zoom, Pan, Grid-Layouts, verschiedene Diagrammtypen und eine fortbestehende Konfiguration. Zudem läuft alles rein lokal mit Hilfe der Websocket Api von Home Assistant. Das Panel speichert deine Einstellungen (ausgewählte Sensoren, Farben, Ansichten) automatisch im Browser (Local Storage), sodass du deine Analyseumgebung nach einem Neustart sofort wieder vorfindest. Du kannst auch mehrere Ansichten definieren und einzeln speichern. Aktuell arbeite noch an den Feinheiten für die Card auf dem Dashboard. Im Fokus steht aber das Panel! Wenn euch das Panel gefällt, würde ich mich sehr über ein Stern auf github ⭐ freuen. 🤗 Das sollte dem Algorithmus helfen, das Panel etwas zu pushen. Lieben Dank. Schaut bitte unbedingt in Ruhe die Doku an. [![Wiki](https://img.shields.io/badge/%F0%9F%93%96_Doku-Wiki-blue?style=for-the-badge)](https://jayjojayson.github.io/detailed-charts-panel/) [![](https://community-smarthome.com/uploads/default/original/2X/3/36e8fb0bcce5811a4a4a9113642a5eca782d027b.jpeg "Detailed Charts Panel for Home Assistant") ](https://www.youtube.com/watch?v=o3h9qdb1-Fk) ## Features - **📉 Interaktive Charts:** Stufenloser Zoom & Pan (Touch & Mausrad) mit automatischem Nachladen der Daten. - **📉 Vorjahresvergleich:** Vergleiche aktuelle Daten direkt mit dem Vorjahr (als graue Hinterlegung). - **📉 Short-Term & Long-Term Charts:** Unterstütz die Kurz- und Langezeitedaten-Auswertung. - **🌍 Mehrsprachig:** Komplette Übersetzung in Deutsch und Englisch. - **✨ Panel Modus & Card Modus:** Zwei Möglichkeiten der Betrachtung, komplettes Panel oder als Dashboard Card. - **⚡ Auto-Scale (W ➡ kW):** Rechnet Werte von `W`/`Wh` automatisch in `kW`/`kWh` um – kein Kopfrechnen mehr! - **🍩 Donut Sidebar:** Optionale Seitenleiste für die prozentuale Verteilung (ideal für Stromverbrauch). - **📊 Flexible Layouts:** - _Combined:_ Alles in einem Chart. - _Grid:_ 1 bis 4 Spalten nebeneinander. - _Mixed:_ Übersicht oben, Details unten. - **🔴 Thresholds:** Setze Warnlinie (z.B. bei 600W) als visuelle Referenz. - **💾 Duales Speichern:** Speichere Ansichten lokal im Browser oder global in einer Datei. - **📈 Live-Statistiken:** Min / Max / Durchschnitt / Summe / Aktuell – intelligent berechnet. - **🏗 Drag & Drop:** Ordne Charts im Grid-Modus einfach per Maus neu an. - **🌑 Modern UI:** Voller Support für Home Assistant Themes (Light & Dark Mode). - **🟢 Binary Sensoren:** Automatische Erkennung und Darstellung von binären Sensoren (z.B. Heizung, Fenster). - **🎯 Präzision & Rundung:** Werte in Tooltips und Statistiken verwenden `display_precision` Einstellung des Sensors aus HA. - **💡 Intelligente Tooltips:** Info-Fenster weicht dem Mauszeiger automatisch aus, um den Chart nicht zu verdecken. * * * **Panel Mode** ![details-chart-panel](https://community-smarthome.com/uploads/default/original/2X/f/f909eb0b9048f1a2bfd4980abdb371800681c468.png) **Card Mode** ![Screenshot 2026-01-05 230721](https://community-smarthome.com/uploads/default/original/2X/0/02e58399d33a0f30cd9c5ba5ccc029b363b0b8f2.png) * * * ## Installation ### HACS (Empfohlen) - Das github über den Link in Home Assistant einfügen. - Das „Detailed Charts Panel“ sollte nun in HACS verfügbar sein. Klicke auf „INSTALLIEREN“. - Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefügt. > **Manuelle Installation über Hacs** > > ### Manuelle Installation über Hacs > > Öffne HACS in Home Assistant. > > - Gehe zu „Frontend“ und klicke auf die drei Punkte in der oberen rechten Ecke. > - Wähle „Benutzerdefinierte Repositories“ („Custom repositories“) aus. > - Füge die URL zu diesem GitHub-Repository hinzu und wähle „Lovelace“ als Kategorie. > - Klicke auf „HINZUFÜGEN“ („ADD“). > - Das „Detailed Charts Panel“ sollte nun in HACS verfügbar sein. Klicke auf „INSTALLIEREN“. > - Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefügt. > **Manuelle Installation in HA** > > ### Manuelle Installation in HA > > 1. **Dateien herunterladen:** > > 2. **Dateien in Home Assistant hochladen:** > > 3. **Ressource zu Home Assistant hinzufügen:** * * * ## WICHTIG! Damit das Dashboard in der Sidebar angezeigt werden kann, müsst ihr in der configuration.yaml am Anfang diesen Code einfügen: ```yaml panel_custom: - name: detailed-charts-panel sidebar_title: Detailed Charts sidebar_icon: mdi:chart-bell-curve-cumulative module_url: /local/community/detailed-charts-panel/detailed-charts-panel.js ``` * * * | [![HACS validation](https://img.shields.io/github/actions/workflow/status/jayjojayson/detailed-charts-panel/validate.yml?label=HACS%20Validation)](https://github.com/jayjojayson/detailed-charts-panel/actions?query=workflow%3Avalidate) | [![hacs_badge](https://img.shields.io/badge/HACS-Custom-41BDF5.svg)](https://github.com/hacs/integration) | [![GitHub release](https://img.shields.io/github/v/release/jayjojayson/detailed-charts-panel?include_prereleases&sort=semver&color=blue&style=flat-square)](https://github.com/jayjojayson/detailed-charts-panel/releases/) | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G01VCROJ) * * * > **[GitHub - jayjojayson/detailed-charts-panel: 📉 Charts (Bars, Lines, Donuts) for Home Assistant...](https://github.com/jayjojayson/detailed-charts-panel)** > > 📉 Charts (Bars, Lines, Donuts) for Home Assistant Sidebar and Dashboard ---
**Author:** ![mafe68](https://community-smarthome.com/user_avatar/community-smarthome.com/mafe68/32/3049_2.png) [@mafe68](https://community-smarthome.com/u/mafe68)\ **Post date:** [11. Januar 2026 um 19:31 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/2 "2026-01-11T19:31:10Z")
Jetzt ist es endlich raus, hast es aber noch sehr spannend gemacht und noch schön gewartet! 😃 ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 19:34 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/3 "2026-01-11T19:34:48Z")
@mafe68 hat ja schon immer mal wieder für mich getestet, lieben Dank. 🙂 Ich denke es kann wirklich für sehr viele eine Alternative darstellen, Langzeitstatistiken anzuzeigen und auszuwerten. Aber natürlich auch alle möglichen anderen Sensoren können ausgewertet werden. ![example2](https://community-smarthome.com/uploads/default/original/2X/a/a5b730d13ed954b9fb72ed23cde65fc861a6fdf0.png) ---
**Author:** ![meins57](https://community-smarthome.com/user_avatar/community-smarthome.com/meins57/32/406_2.png) [@meins57](https://community-smarthome.com/u/meins57)\ **Post date:** [11. Januar 2026 um 19:36 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/4 "2026-01-11T19:36:40Z")
das wird auf jeden Fall getestet. Laut deinen Bildern sehr Interessant. ---
**Author:** ![mafe68](https://community-smarthome.com/user_avatar/community-smarthome.com/mafe68/32/3049_2.png) [@mafe68](https://community-smarthome.com/u/mafe68)\ **Post date:** [11. Januar 2026 um 19:37 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/5 "2026-01-11T19:37:08Z")
Eines fällt mir schon mal auf in der v2.1 das man die Sensoren nicht rauf und runter schieben kann wenn man sie hinzugefügt hat! Oder war das nur in der Testversion? ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 19:38 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/6 "2026-01-11T19:38:26Z")
Ich habe dir doch geschrieben ab der nächsten Version für dich.. 😉 Da warst du zu schnell. Die neue Version wo das funktioniert, kommt die Tage heraus. Da muss ich noch ein paar Dinge verändern, die ich optimiert habe. ---
**Author:** ![MarzyHA](https://community-smarthome.com/user_avatar/community-smarthome.com/marzyha/32/11668_2.png) [@MarzyHA](https://community-smarthome.com/u/MarzyHA)\ **Post date:** [11. Januar 2026 um 19:42 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/7 "2026-01-11T19:42:32Z")
Wow, das sieht super aus! 🤩 Ich werde mich morgen nach der Arbeit direkt mal dran setzen und ausgiebig testen 😊 ---
**Author:** ![mafe68](https://community-smarthome.com/user_avatar/community-smarthome.com/mafe68/32/3049_2.png) [@mafe68](https://community-smarthome.com/u/mafe68)\ **Post date:** [11. Januar 2026 um 19:47 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/8 "2026-01-11T19:47:12Z")
Vor allem braucht man sich nicht viel rein arbeiten, sondern einfach die Sensoren aussuchen und die Grafik wird dir dann erstellt! ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 19:49 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/9 "2026-01-11T19:49:13Z")
So soll es sein, leicht und hoffentlich intuitiv zu bedienen. 🙂 ---
**Author:** ![mafe68](https://community-smarthome.com/user_avatar/community-smarthome.com/mafe68/32/3049_2.png) [@mafe68](https://community-smarthome.com/u/mafe68)\ **Post date:** [11. Januar 2026 um 19:52 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/10 "2026-01-11T19:52:22Z")
So einfach mal schnell 3 Sensoren genommen hinzugefügt und schon habe man eine schöne Grafik! Hat keine 2 Minuten gedauert! 😃 ![Bildschirmfoto zu 2026-01-11 20-52-15](https://community-smarthome.com/uploads/default/original/2X/d/d2076dbbecf1aaada31919992f8ce0f2a8208222.png) ---
**Author:** ![meins57](https://community-smarthome.com/user_avatar/community-smarthome.com/meins57/32/406_2.png) [@meins57](https://community-smarthome.com/u/meins57)\ **Post date:** [11. Januar 2026 um 20:39 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/11 "2026-01-11T20:39:21Z")
Unter der HA App verschwindet das linke Menü wenn man deine Integration auf hat (hochkant) Man muss das Smartphone erst drehen damit es wieder erscheint und man wieder zurück kommen kann. Ob es ein Fehler ist sei mal dahin gestellt, wollte es aber erwähnen. ![image](https://community-smarthome.com/uploads/default/original/2X/0/05144a9887e37231f52a767ae8ad0cb2c163d5eb.png) ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 21:09 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/12 "2026-01-11T21:09:02Z")
Gut beobachtet. Ist bei mir auch so, ich denke mal du wirst wie ich in den HA Einstellungen die Seitenleiste immer ausblenden auf Handy und Tablet? Daran liegt es, aktiviert man die Seitenleiste wird alles korrekt angezeigt. Ansonsten auf dem Handy einfach „zurück wischen“ oder zurück Button nutzen und du kommst wieder auf das Dashboard. ---
**Author:** ![geloeschterUser1](https://community-smarthome.com/letter_avatar_proxy/v4/letter/g/bb73d2/32.png) [@geloeschterUser1](https://community-smarthome.com/u/geloeschterUser1)\ **Post date:** [11. Januar 2026 um 21:45 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/13 "2026-01-11T21:45:45Z")
Also bei mir klappt das nicht, nach dem Klick auf Okay ![2026-01-11_22-44](https://community-smarthome.com/uploads/default/original/2X/8/8dfa4b4b701c47ac2e27ca68e6c27e3b61539d6a.png) Gibt es nur einen schwarzen Bildschirm 🙂 ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 21:55 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/14 "2026-01-11T21:55:53Z")
Wie hast du das angelegt? Hast du in der config.yaml den Eintrag hinterlegt, wie oben beschrieben? Der Link hat nach Aufruf in der Seitenleiste dieses Format: `http://192.168.178.1xx:8123/detailed-charts-panel` ---
**Author:** ![geloeschterUser1](https://community-smarthome.com/letter_avatar_proxy/v4/letter/g/bb73d2/32.png) [@geloeschterUser1](https://community-smarthome.com/u/geloeschterUser1)\ **Post date:** [11. Januar 2026 um 22:00 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/15 "2026-01-11T22:00:02Z")
> [@jayjojayson](#): > > Wie hast du das angelegt? Per HACS Link. dann runtergelanden, dann installiert und den Yaml Eintrag gemacht, geprüft, keine Fehler, HA und das System (Hardware neu gestartet. ![2026-01-11_22-59](https://community-smarthome.com/uploads/default/original/2X/c/c075176cdd69cde0c27bc0a218e43ea67944bcea.png) ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 22:07 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/16 "2026-01-11T22:07:21Z")
Hast du mal mit dem File Explorer geschaut, ob die Dateien alle im Ordner liegen nach der Installation? Er sagt ja als Fehler er findet die Datei nicht. ```yaml /local/community/detailed-charts-panel/.... /local/community/detailed-charts-panel/detailed-charts-panel.js ``` Und dann auch mal den Cache resettet? Obwohl das ja bei Neustart auch passieren sollte. Unter Einstellungen, Dashboard, rechts oben die drei Punkte und dann Ressourcen sollte so ein Eintrag vorhanden sein, nach der hacs Installation. ![image](https://community-smarthome.com/uploads/default/original/2X/a/a2818b382b4bcca2fee01f5fb1630833529d8e8b.png) ---
**Author:** ![geloeschterUser1](https://community-smarthome.com/letter_avatar_proxy/v4/letter/g/bb73d2/32.png) [@geloeschterUser1](https://community-smarthome.com/u/geloeschterUser1)\ **Post date:** [11. Januar 2026 um 22:14 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/17 "2026-01-11T22:14:59Z")
> [@jayjojayson](#): > > Und dann auch mal den Cache resetet? Ja… > [@jayjojayson](#): > > ob die Dateien alle im Ordner liegen nach der Installation? Kann ich nicht, finde "/local/… " nicht, wird aber daran liegen das ich den File Explorer nicht Bedienen kann 🙂 Der ist da ![2026-01-11_23-14](https://community-smarthome.com/uploads/default/original/2X/f/f2cf1209c3d21ab8899d21c3539b95be5f5d6483.png) ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 22:18 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/18 "2026-01-11T22:18:22Z")
Na das mit der js file in Ressourcen ist schon mal sehr gut! Ohne die läuft nichts, dann sollte die Datei eigentlich auch im Ordner liegen. Im File Explorer ist local = www. Du musst nach dem Ordner www ziemlich weit unten schauen. Der liegt im selben Verzeichnis, wo auch die config.yaml liegt und dann community/detailed-charts-panel/… ---
**Author:** ![geloeschterUser1](https://community-smarthome.com/letter_avatar_proxy/v4/letter/g/bb73d2/32.png) [@geloeschterUser1](https://community-smarthome.com/u/geloeschterUser1)\ **Post date:** [11. Januar 2026 um 22:20 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/19 "2026-01-11T22:20:32Z")
Ist alles da ![2026-01-11_23-20](https://community-smarthome.com/uploads/default/original/2X/e/ec9b54fbea40f3ec58d653e7319f31c4888f5095.png) EDIT: Lag an nicht richtig Gelöschten Cache.. hoffe ich, unter den FF lässt sich die Seite öffnen 👍 ---
**Author:** ![jayjojayson](https://community-smarthome.com/user_avatar/community-smarthome.com/jayjojayson/32/639_2.png) [@jayjojayson](https://community-smarthome.com/u/jayjojayson)\ **Post date:** [11. Januar 2026 um 22:27 UTC](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775/20 "2026-01-11T22:27:55Z")
Ja sieht alles korrekt aus. Und dein Eintrag in der config sieht wirklich so aus: ![image](https://community-smarthome.com/uploads/default/original/2X/c/c7d68b4e54ff8d45d22f63fa959fa4e7bbbfe3e1.png) Also mit /local/ und nicht mit /www/ im Link? Das wäre jetzt erstmal mein letzte Idee. **Ah na geht doch… 🙂 Sehr schön, dann viel Spaß beim basteln.. 🙂** Der Cache ist manchmal echt hartnäckig. [Nächste Seite](https://community-smarthome.com/t/detailed-charts-panel-interaktive-high-performance-charts-fuer-home-assistant-hacs/9775.md?page=2)