Where is the benefit from such sidebar panel mode… Instead of building a standard lovelace view with the charts and link to this view via a sidebar link?
To be honest, there isn’t really any. It was mainly a user request, I thought it would be a good idea and I completely forgot that you could simply link a dashboard to the sidebar. I guess the only advantage is if you don’t want to use multiple dashboards for some reason.
Thinking of it, I should probably revert this update and direct people to linking a dashboard in panel mode to the sidebar instead. Looking at the discussion with @pocket, the weird YAML creates a lot of confusion already.
1 Like
Many thanks for the replay. I’ll look at the examples. Hopefully, the custom YAML configuration will still be available.
Edit: I’m already using the sidebar YAML mode for multiple entities and colors on the same graph. It works beautifully.
Glad it works for you. YAML mode will always be available on this card. It’s just that there is a better way to put it on the sidebar, while keeping it a card, as outlined by @arganto. You are still able to use YAML to define entities.
As I understand it, a card will restrict the width when using a desktop browser. If so, I’ll keep the configuration I’m presently using. It’s plenty more than good enough.
Not if you put the view in panel view type:
However you can safely continue using the actual panel mode if you prefer. I did remove it from the readme and replaced it by a more elegant sidebar approach, but the technical backend to make the old style panel mode work will continue to be supported by the card in the future.
Oh! I misunderstood how it works. I’ll read up on your replacement and give it a go.
There’s so much I don’t know.
Many thanks.
Well, this worked out pretty well:
Apologies to those who already know these details, but here are a few notes for the rest:
When I removed the existing YAML and restarted HA, I attempted to add the component and its resource using the UI. Unfortunately, I couldn’t find any information regarding how to populate the URL to point to the resource file. I eventually figured out the resource needed to be in the configuration.yaml file because I was using YAML mode elsewhere.
My current configuration still uses some header information. I have a couple of configuration items above the graph information:
defaultTimeRange: 2d
decimation: true
The remainder of the original YAML now lives in the panel’s visual editor. As it’s YAML, it’s pretty sensitive to formatting. To make matters worse, the font used in the visual editor is not monospaced. I had to adjust the indentation of the graph section to make the panel function properly. Thanks to Studio Code, it didn’t take more than a few key strokes to get it working.
With the header on the banner, the hard-coded one in the JS file is superfluous, but that’s a pretty minor nit.
Thanks again for the very useful card.
You can remove it by adding this to your YAML:
header: hide
If you want to keep a little spacing between the HA header and the toolbar, use this instead:
header: ' '
(note the single space between the quotes).
Thank you. Obviously, I need to spend more time reading the notes. There’s also plenty more I’ll be doing with additional entities and ‘interior decorating.’
Much respect for the effort you’ve put into this.
V1.0.20 is now out. It adds support for the database performance optimizations in Home Assistant 2022.4, you can now use your mouse wheel to zoom in and out of the history (while holding the Ctrl key and having the pointer over a graph) and state color boxes can now be selectively hidden in tooltips (so that @arganto gets a few more pixels in his popups 
).
If you are using the newest HA version (2022.4 as of this post), I highly recommend updating the card to V1.0.20 or above. HA 2022.4 introduced new optimizations to the database structure that will make it load faster. If you are not (yet) on 2022.4 you can still update the History Explorer card for the other new features, the database changes in this card are backwards compatible. You just won’t get the performance improvements on older HA versions.
1 Like
You cannot get to much pixels. 
Is there a trick to zoom centered from the mouse cursor and not centered in the chart? If not, would be great but if technically not possible or a lot of effort, o.k. But if yes, I only wanted to be sure, that I don’t miss the trick.
@HeyImAlex,
I love what you have done. Myself, I prefer manual configuration in the overview raw configuration.
One, I like to overlay and set fill: rgba(0,0,0,0.0). Currently, I prefer the type: panel card, as it uses the width of the screen providing more detail. My question… When I attempt to add another cardName I get an error stating “This view contains more than one card, but a panel view can only show 1 card.” Interestingly … If I use the UI and add the other entity, it will display them both but without detailed configuration like removing the fill and overlay. Here is a screen capture:
and here is the raw code:
Any suggestions. Also, is there a link to all available user definable options. I have found some of your configuration options in your github read.me file.
As above. I would propose to use a standard dashboard with a view in panel mode, set a stack card (as the one allowed carD) and you can add how many you want with total width.
1 Like
FYI: https://www.home-assistant.io/dashboards/panel/
Essentially, the panel behaves as one full-width card. You can modify the content, but you can’t add another card.
Like you, I’m still learning. https://community.home-assistant.io/t/new-interactive-history-explorer-custom-card/369450/154
Yeah as others have said, the panel view mode only supports a single card. That’s what it was designed to do. If you want multiple cards in there at full width, you can use a vertical stack card inside the panel view and then add the history explorer card(s) to the vertical stack.
You are confusing entities with cards. You don’t need to have multiple cards just to display multiple graphs. Just add them under the graphs section and they will appear one after the other on the same card. Look at the advanced YAML example in the readme.
Everything is in the readme.
Re: v1.0.20, I’m seeing an issue with the use of timeline. This is what I currently see:
When the gaps in the data appear, they’re always at the initial view of the presentation, at a state change boundary, and always on the left side. Sometimes when I scroll back far enough in time, the presentation corrects itself. If I scroll back towards the initial view, it will reappear.
In this particular case, the gap is correlated to a server restart.
Yep, this is a limitation of how the database recorder component works in HA. When requesting a limited time range from the database, the initial start value is not always correctly returned (if there has been no state change within the requested range). There’s nothing I can do about this sadly. I have added a way to slightly mitigate this (it would have been much worse if using the raw states directly), but I can’t do more without seriously impacting performance.
The workaround is to scroll further left, so that the next slot ranges are loaded until a state change is found in the database, which will then complete the missing data. Or alternatively, you can temporarily select a larger range (like maybe a week or two) and then zoom back in.
Oh and this isn’t specific to V1.0.20, it’s always been like that. It depends on the data and the frequency of state changes. It will mostly appear on data with low frequency state changes, where a sensor stays in a single state for a long time.
Edit: there is one thing I could do to mitigate this issue a bit more, it’s something that has been on the todo for awhile. It won’t solve the issue entirely (the recorder component would have to be fixed for that), so you would still need to scroll further left or unzoom to make certain long states appear. But I could make it so that they don’t disappear again when you scroll back right once they’re loaded.
1 Like
@arganto,
Beautiful! I have never tried the Stacked Card before… Thank you. Exactly what I needed to build the display I want. 
Could you you automate the above at the initial view assuming the defaultTimeRange or a fixed time interval? I realize it might slow it down or have limited efficacy. Failing that, is it worthwhile to suggest a PR for the database implementation, or is that a 3rd-party component? I’ve seen databases that record changes of state or value, but perform full updates at fixed intervals to address similar issues.