Detailed Charts Panel

Interactive High-Performance Charts for Home Assistant

The 📉 Detailed Charts Panel is a powerful visualization solution for Home Assistant, allowing for in-depth analysis of historical data from your sensors. It offers features that go far beyond standard history, such as zoom, pan, grid layouts, various chart types, and persistent configuration. Furthermore, everything runs entirely locally using the Home Assistant WebSocket API.

The panel automatically saves your settings (selected sensors, colors, view options) in the browser (Local Storage), ensuring your analysis environment is ready immediately after a reload.

If you like this panel, I would be very happy about a star rating ⭐. 🤗

• 📉 Interactive Charts: Smooth zoom & pan (touch & mouse wheel) with automatic data reloading.
• 📉 Previous Year Comparison: Compare current data directly with the previous year.
• 📉 Short-Term & Long-Term Charts: Supports short-term and long-term data analysis.
• 🌍 Multilingual: Full translation support for English and German.
• ✨ Panel Mode & Card Mode: Two viewing options — full panel view or as a dashboard card.
• ⚡ Auto-Scale (W ➡ kW): Automatically converts values from W/Wh to kW/kWh — no mental math required!
• 🍩 Donut Sidebar: Optional sidebar showing percentage distribution (ideal for power consumption).
• 📊 Flexible Layouts:
  • Combined: Everything in a single chart.
  • Grid: 1 to 4 columns side by side.
  • Mixed: Overview on top, details below.
• 🔴 Reference Lines: Add any number of reference lines, each with its own color and label.
• 📐 Manual Y-Axis: Optionally set a fixed Y-axis min/max (leave empty for autoscale).
• 🏷️ Sensor Aliases: Give each sensor a custom display name.
• 🧱 Stacked Area: Additional stacked area chart type.
• 🧮 Meter Sensors (m³, kWh): Cumulative counters (total_increasing, e.g. water/gas in m³ or energy) are aggregated as consumption (sum of increases) instead of being averaged.
• 🔧 Display Options: Hide the legend, hide the min/max highlight button, and choose the date format (day.month / month/day).
• 📊 Live Range Statistics: Statistics recalculate for the currently visible range while zooming/panning.
• 🎨 Color Palette: One click assigns a harmonious, theme-friendly color set ("shuffle colors").
• ➕ Multi-Add & Areas/Devices: Select several sensors at once, or add all sensors of a whole area or device.
• 📍 Peak Markers: Optional min / max / current markers with labels directly on the line.
• 🕒 Now Line & Day/Night: Optional "now" line and day/night background shading for easier reading.
• 💾 Dual Storage: Save views locally in the browser or globally in a file.
• 📈 Live Statistics: Min / Max / Average / Sum / Current — intelligently calculated.
• 🏗️ Drag & Drop: Easily rearrange charts in grid mode using drag & drop.
• 🌑 Modern UI: Full support for Home Assistant themes (light & dark mode).
• 🟢 Binary Sensors: Automatic detection and visualization of binary sensors (e.g. heating, windows).
• 🎯 Precision & Rounding: Values in tooltips and statistics respect the sensor’s display_precision setting from Home Assistant.
• 💡 Smart Tooltips: The info popup automatically moves away from the cursor to avoid covering the chart.

• Add this repository via the link in Home Assistant.

  

• The "Detailed Charts Panel" should now be available in HACS. Click on "INSTALL".

• The resource will be automatically added to your Lovelace configuration.

• Create the file detail-charts-views.js in the /config/www/ folder.

To display the dashboard in the sidebar, you must add the following code to the beginning of your configuration.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