A-better-history-card HA history under steroids

Hi,

Here's a small pair of custom cards that makes it easy to display charts in Lovelace, and can even replace the native HA history module — with a big bonus: you can chart entity attributes too. It's fully configurable from the UI and already supports quite a few features.

There are 2 cards:

  • A standard card to display chart(s) or a full history panel on the dashboard
  • A card that shows a button on the dashboard and opens a HA dialog window to display the chart.

Features:

  • Entity and attribute selector
  • JSON data import/export
  • Full configuration from the UI (chart, tooltip, toolbar, selectors, buttons, colors, etc.)
  • Display multiple series in the same chart, or in separate ones
  • Show charts in the dashboard (standard card) or in a dialog box (button card variant)
  • No dependency on a chart library — everything is rendered in SVG. Lightweight and performant.
  • Optimized chunked history loading. No browser freezing on large data series parsing




Install:

  • Add the repo in HACS:

Add this repository to HACS.

  • Install a-better-history-card from HACS
  • Configure it with UI.

Web component

For developers, the tool is also available as a web component, so you can use this History module in any custom HA card.

npm: https://www.npmjs.com/package/@kipk/ha-better-history


Usage

Dashboard chart card

Add the a-better-history-card card to your dashboard, then pick your entities and attributes. From there you can configure the time range, what to display in the chart, global styles, and the header.

Mixing attributes in the same chart — HA doesn't expose units for attributes, so to group multiple attributes on a shared Y-axis you have two options:

  • Set a unit directly on the attribute (e.g. °C, or the special key temperature which handles both °C and °F transparently).
  • Set a Group: give the same group name to all entities/attributes you want on the same axis. This works even across different unit types.

Button card

The second card variant shows only a button on the dashboard. Clicking it opens the full chart in a HA dialog — useful to keep your dashboard tidy.

Full-page history explorer

To mimic the native HA history panel, create a dashboard in Panel mode and add a-better-history-card without any entity or attribute. The card will expand to fill the entire screen, giving you a full history explorer.

Advanced — attribute unit mapping

To have attributes auto-grouped by unit without manual configuration, go to the Advanced tab and provide a JSON map of attribute paths to their units.
This is the same mechanism used by the Equinox card.
You can use its file as a reference:

Once set up, attributes sharing the same unit are automatically merged into the same chart, just like entities already are.

Runtime grouping

You can group entities/attributes directly from the chart without going through the config.

Right-click (or long-press on mobile) on an attribute chip at the top of the chart to open the grouping panel.

Assigning a numeric group value (1, 2, …) places that series on the 1st, 2nd, … chart respectively.

4 Likes