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.

5 Likes

This looks awesome - Ive had to manually create “attribute as entities” for a bunch of devices just so i can graph their info.

Big feature request: the native history *(not history card) lets you add devices, labels, floors and areas as a target, not just entities.

It even lets you expand the list - you can start with a label, expand it to show all individual devices, then further expand to show the sub entities (and then remove specific entities etc)

The big downside is it doesn’t let you save that dynamic view as a card.
If you save the view to a card, it does so by statically including the list.

Any chance of porting that part of the native history view to this card?

Is custom:a-better-history-card supposed to be able to work as a direct drop in replacement for type: history-graph?

Ive been using template cards + auto entities to let me easily pick the time range to view + include the entities i want, works great for the standard history card but if I try and switch to a-better-history-card it fails to render.

Unsure if its handling the entities list being passed to it directly, as it seems to fail even if i just run it under custom:auto-entities.


type: custom:config-template-card
variables:
  - states['input_select.hours_to_show'].state
entities:
  - input_select.hours_to_show
card:
  type: custom:auto-entities
  filter:
    include:
      - label: "*basementthermsensor*"
        attributes:
          device_class: temperature
      - entity_id: sensor.iaqm_129*
        attributes:
          device_class: temperature
      - options: {}
        label: climate
        attributes:
          device_class: temperature
    exclude:
      - label: bed
      - label: dry
      - label: hvac
      - name: "*Wax*"
  sort:
    numeric: true
    reverse: true
    method: state
  show_empty: false
  unique: true
  card: #type: custom:a-better-history-card
    type: history-graph
    hours_to_show: ${vars[0]}
    refresh_interval: 1
    uix:
      style: |
        ha-card {
          --chart-max-height: 1000px !important;
          border: none;
        }

Try add card_param: series (default entities) as this is where entities go for custom:a-better-history-card

e.g.

...
card:
  type: custom:auto-entities
  card_param: series
  filter:
...

Then if you want to add any config for series put the config under options in each filter.

@AJolly try 0.3.0

I have added the label/devices/rooms selector

Also you can now export the current chart as a card

I’ve installed the card & rebooted. When I try to create a card it either can’t see a sensor entity or can & it claims to save, but what I’ve entered disappears so the card is empty. What am I doing wrong?

@Gnat54 When you’ve selected an entity, it should open a new selector where you can select the whole entity ( in blue ) , or some attributes ( orange )