history-graph - respect order - have similar alignments

[mdeweerd]

I've been using the history graph to compare different actions with each other and one thing that is bother is the x-axis alignments.

There are several reasons for the x-axis of the different graphs of the same "history-graph" instance to not be aligned:

• The labels for the individual series have different widths leaving more or less room for the graph, impacting the width of each individual graph;
• The data available is not covering the requested time span - the time span is then adjusted to the available data.

Further, I tried ordering the series, but the binary sensors always appear at the top, and series using the same unit are always grouped together, even when there are one or more series with a different unit in between them.
For instance, I want to separate the dew points from the real tempatures to make it easier to read the graphs, or seperate the % of battery levels from the humidity percentage or percentage of opening.
I realize that it is possible to create multiple history graphs to compensate that, but then they have to be put in a vertical layout to benefit from comparing the events on the time axis by scrolling the view.

Anyway, here is an example where the time axis of the binary sensor is clearly smaller than the other ones so that 10:30 on the first graph is not aligned with the other ones.

I think that a good way to solve this is to add options to:

• Allow adjusting the time range to the data or to keep it fixed otherwise;
• Strictly respect the order of the series and not group series if they are not adjacent in the list, and allow grouping irrespectively of the order as it is done now;
• Have the same (or fixed % width) for the labels/y-axis column, or let it adjust with each individual graph.

[vaibhav2912]

I also want to see this implemented. Sad that no one has looked at this since you created a feature request in Oct 2021.

[nukefrenzy]

I also would like to see this issue resolved, but there doesn't seem to be any traction on it as evidenced by how old this issue is, others like it, and feature requests on the forums.

So I'm trying to share my solution to help everyone else frustrated with this issue. I’ve started using the below card as a permanent replacement for the History Panel and History Graph Card. These features make it a huge improvement:

• Easily recreate the existing History Panel with timelines and graphs. Colors can be transferred over so it looks identical and it can be added to the sidebar to mimic existing panel
• Duration selector at the top to quickly pick timeframes to view
• Graphs can be panned by dragging the mouse to show more data (all graphs move together)
• All dates/times line up vertically, which is a major nuisance with the existing History Panel
• Entities can be setup manually in YAML so a default, defined view is always immediately ready (similar to the old History Panel)
• Entities can be added on the fly using the entity picker drop down (this can be pre-filtered to only those entities that are actually recorded in your database with recordedEntitiesOnly: true)

New interactive history explorer custom card
https://github.com/alexarch21/history-explorer-card

I put a couple screenshots of my setup here: https://community.home-assistant.io/t/request-common-or-aligned-time-axis-on-all-history-graphs/246613/4?u=hassbrad

[mdeweerd]

I already had history-explorer-card installed, but I did not look into it yet.
A quick try shows that it is quite flexible, and that some investigation is needed to set up the graphs I wanted (for instance, grouping option), but the graphs line up.
So it looks like a good alternative.

[zsarnett]

#11265