Detailed Charts Panel - Interactive High-Performance Charts for HA

Share your Projects! Dashboards & Frontend
, ,
1

Hi, I would like to show you my custom card project, which allows you to clearly display your statistics in HA. The :chart_with_downwards_trend: 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.

You can configurate a complete panel linked to the sidebar or you can use the dashboard card to configurate your graphs.

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

image
image1080×648 141 KB

Features

  • :chart_with_downwards_trend: Interactive Charts: Smooth zoom & pan (touch & mouse wheel) with automatic data reloading.
  • :chart_with_downwards_trend: Previous Year Comparison: Compare current data directly with the previous year.
  • :chart_with_downwards_trend: Short-Term & Long-Term Charts: Supports short-term and long-term data analysis.
  • :earth_africa: Multilingual: Full translation support for English and German.
  • :sparkles: Panel Mode & Card Mode: Two viewing options — full panel view or as a dashboard card.
  • :zap: Auto-Scale (W :arrow_right: kW): Automatically converts values from W/Wh to kW/kWh — no mental math required!
  • :doughnut: Donut Sidebar: Optional sidebar showing percentage distribution (ideal for power consumption).
  • :bar_chart: Flexible Layouts:
    • Combined: Everything in a single chart.
    • Grid: 1 to 4 columns side by side.
    • Mixed: Overview on top, details below.
  • :red_circle: Thresholds: Set warning lines (e.g. at 600 W) as visual references.
  • :floppy_disk: Dual Storage: Save views locally in the browser or globally in a file.
  • :chart_with_upwards_trend: Live Statistics: Min / Max / Average / Sum / Current — intelligently calculated.
  • :building_construction: Drag & Drop: Easily rearrange charts in grid mode using drag & drop.
  • :new_moon: Modern UI: Full support for Home Assistant themes (light & dark mode).
  • :green_circle: Binary Sensors: Automatic detection and visualization of binary sensors (e.g. heating, windows).
  • :dart: Precision & Rounding: Values in tooltips and statistics respect the sensor’s display_precision setting from Home Assistant.
  • :bulb: Smart Tooltips: The info popup automatically moves away from the cursor to avoid covering the chart.

image
image1080×540 102 KB

You can also look at this video to see it in action, but don’t expect too much, I’m not a YouTuber, but it shows all the basic functions and you can turn on the subtitle translation

https://www.youtube.com/watch?v=o3h9qdb1-Fk

Installation via Hacs is possible.

Important Note to get the Sidebar link.

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

Project on github

I have also written a small wiki:

1 Like
2

Hi, I’ve been busy tinkering yesterday and today and have restructured the card for HACS accordingly. Just like with my other cards, the files in GitHub are now bundled via a workflow, so when you update or install, you’ll only receive a single file. The chart libraries were a real pain to deal with, but it’s all working now. :slightly_smiling_face:

Please give it a try, I think it will be a good and simple solution for many, without having to use external tools.

I’ve added a year-over-year comparison feature, which can be activated from the left sidebar menu.

image
image705×479 7.4 KB

VERY IMPORTANT: With the last update, I already changed the setup so that detailed-charts-views.js is placed in the www directory. This has not changed, as it ensures a fixed storage location that won’t be overwritten during future updates. Starting with this update (v_2.6), the detailed-charts-views.js file is no longer included! So if you’re doing a fresh installation, you’ll need to manually create the detailed-charts-views.js file inside the www folder.

You can find more details in the Wiki, which I’ve revised accordingly.

Here’s a quick overview of what’s new (v_2.6):

  • English and German translations are now available
  • New toggle for year-over-year comparison
  • The sidebar now remembers its state after refreshing or changing the view
  • New code structure (files are now generated via GitHub workflow)
  • Optimized for HACS
  • Wiki updated
1 Like