[Deprecated] Interactive history explorer custom card

About the second screenshot you posted there: are these dataset blobs appearing all the time or only when you hold the SHIFT key ? They’re not supposed to appear unless you press the key.

No not touching any key there.

And on the templates : these are JS templates, not Jinja, would that change things?

Maybe follow Ha yaml and simply state the input_boolean like we can do on numeric sensors ?

Wait, so you’re saying these data point dots are there all the time when you hover over the curve ? That’s absolutely not normal. They should only appear when you hit shift. Without shift, only the single datapoint you hover over should be highlighted. When did that start to happen ?

Ah yeah, didn’t notice. That would technically work, but it would still be a considerable amount of work for a very very niche feature.

really sorry, but which screen movie/shot now do you mean? Dont think I posted an issue on that functionality?

until its become mainstream ofc because is is so easy to do :wink:

just kidding, I get it.
would that be complex too when using something like:

       toolbar: input_boolean.hide_history_explorer_toolbar


just thinking of:

    - platform: numeric_state
      entity_id: sensor.outside_temperature
      # Other entity ids can be specified for above and/or below thresholds
      above: sensor.inside_temperature

where an entity_id can be used to specify the threshold (aware this is backend, but it clearly illustrates what I mean)

This one


These points (all together) should only be shown when pressing shift-key. Without shift is should only show the hovered data point.

ok, i see now, yes,
just retested that, and must have indeed clicked the shift key there, because without it is shows the one data point circle. see in the screen recording. also see the difference again between active and not active view of the graph.

Dec-26-2022 15-28-07

Ah okay, you got me worried there for a second :wink:

I think I found the reason you are having these rendering problem on iOS 16 and also Mac OS Safari 16.

Webkit bug #245145

Webkit bug #245465

That explains all glitches. It also explains wjy I haven’t been able to reproduce any of this. None of the devices I tried it on, nor the Mac at work, have iOS or Safari 16.

If it turns out to be that, unfortunately there’s nothing I can do about it. And since Apple never gives any feedback or comments on bug reports, one can only wait and hope.


during the holidays U had another go at it with ChatbotGPT :wink:

if you have a moment, I’d appreciate some pro feedback, (in a discussion at the repo, not to pollute here)

be safe!

V1.0.42 with some new features and fixes (changelog here).

For those who like having higher time tick densities (more time ticks on the horizontal axis), there are two new densities available now (@josdegroot):

timeTickDensity: higher     # More ticks !
timeTickDensity: highest    # A lot more ticks !

The highest setting is really cluttered unless you display your graphs full width on a 4k screen (apparently some people do this :wink:). And yes I realize that I will need to come up with yet another superlative term once people start using 8k wallmount dashboards (highestest ?!) :stuck_out_tongue:

You can now also use the defaultTimeOffset setting to get a custom time offset on your graph(s) when you open the card or click the date button. Examples:

type: custom:history-explorer-card
defaultTimeOffset: 1h       # Add 1 hour of empty space after the current time
defaultTimeOffset: -1d      # Show the previous days' data

Both options also work for the infoPanel.

This release also improves the way invalid data is handled (mostly skipped) in line, arrow and bar graphs. When you get an empty or null state in your energy meter data, for example.

Last but not least, some performance enhancements on timelines and updated Spanish translations.


timeTickDensity doesn’t seem to work for Infopanel. Timeoffset works fine but density has no effect.

Because your info panel window is not wide enough to support the higher density. Tick density is limited by the width of your graph. This is normal and by design, so to avoid tick labels to run into each other. higher density is available at graph widths from 1300 pixels upwards and highest density from 1900 pixels and above.

As reference here are the minimum widths for each density level to become available:

  • low: from 0 upwards (always available)
  • medium: from 650 pixels upwards
  • high: from 1100 upwards
  • higher: from 1300 upwards
  • highest: from 1900 upwards

You can force lower density levels on larger width, but you cannot force higher density levels on smaller widths. The latter would otherwise lead to situations where labels will be drawn on top of each other.

But the stock infopanel shows more time scale ticks. Why can’t I enable at least the same amount with history explorer?
Attached pictures of stock card and HE replacement card:

Because it is not designed to be a copy of the native one. If you prefer the native one, you can easily disable the override in the menu.

The native one is useless since they made those “improvements” few months ago.

Hi, I really love your card! it is excellent. Is there a way to change the font? with e.g. card-mod?

I’m afraid there isn’t. You can change the font colors, but not the font itself.

ok, that’s a shame. thank you for replying


History Explorer card works perfectly with various browser under Windows but, at least for me, only on Blink based browser (Chrome, Opera) under Android. Under other Android browser (I tried a lot) the filtered popup list of entities don’t pop when start typing in entity field so it’s impossible to select the entity to draw.

Strange is I didn’t found report about this. I am alone ? Problem is, under Android, there is no kiosk browser based on Blink available, unfortunately Android Chrome and Opera doesn’t have kiosk option.

Thanks for help.

Thanks a lot! It’s working great now!