Graph legends after latest update 2025.2.0

[maryandmike]

After the latest update, I noticed the graph card legend has changed to a one-line with arrows for forward/backward. This is very difficult to use on small screens, ie iphone.

Is there a way to put the legend back the way it was before this update? yaml?
At least make it optional…
thx

[DerDaku]

Yes please! For graphs with a lot of entities in one graph it's quite unusable now.

See this image:

I would love an option to set it back to multiple lines

[douweyntema]

Yes please put it back as it was before, this is a really bad modification

[xyCommander]

Yes, please revert or let the users choose. I renamed everything to make it fit in there without the arrows...

[DerDaku]

I did some research and apparently the echarts library, that was switched to in 2025.2 is to blame.
It does not really support dynamic height of the legend.

This is what happens, when you change the legend type from 'scroll' to 'plain':

Spacing from Top of container to top of graphs has to be set to a fixed value in echarts. There is no easy way to have it dynamic according to the legends height.
This is probably why the developers here chose to set it to scroll.
IMHO this would be a reason not to switch to this library. The older one seemed to be able to handle this way better, since it didn't put the actual legend in the canvas but in its own html container above it.

I for myself downgraded to 2025.1.4 for now. Usable graphs are one core component of home assistant for me, and the current legend breaks this for me. Hope some solution will be found eventually, but I think we are a minority who care about this and the echarts lib doesn't offer a solution. Rollback to charts.js is probably not an option either, so not sure how to proceed here.

Whoever stumbles upon this and wants to downgrade as well:
Only do this if you know what you do and are willing to potentially break your installation. Backup beforehand is absolutely necessary!!!

[ptowalski]

33 pages to click? Please revert it back or make the pagination optional.

[DerDaku]

I did something that might be able to function as a starting point for updating how the legend is rendered, to bring it more in line with how it previously worked, while still using echarts.
My TypeScript skills are not the best, so there might still be some problems.

DerDaku@5595194

[ildar170975]

https://community.home-assistant.io/t/2025-2-iterating-on-backups/842316/224?u=ildar_gabdullin
IMHO presenting a legend as a separate custom block is the best solution.
Currently echarts allows overlapping for a legend.

[MindFreeze]

The old charts didn't support the legend either. It was a custom component. The paginated legend was initially a quick fix but from a design perspective it is better so it was shipped. The old one used far too much space. After all what is more important to see, the chart or its legend?
If we decide to create a custom legend again, it will not be exactly the same as before. It will be compacted in some way. Also we may want to upstream a better legend to echarts (in the canvas) instead of just using it for HA and that would take more time.

[ildar170975]

@MindFreeze
Petar, please have a look, could it be considered as a possible solution?
#24119 (comment)

[DerDaku]

@ildar170975 hardcoding the top value is not a good solution. It will break again for a larger number of entries and look weird + use too much empty space for less entries.

[ildar170975]

@DerDaku I did not suggest using a fixed value, please check my suggestions on the provided link.

[cwitting]

I would argue that the legend is at least as important as the chart. The chart is meaningless if you do not know what is plotted.
I would also much rather have a legend which uses more space, and the paginated one is definitely not better than the old legend.

[dxmnkd316]

I strongly disagree with this. A list of 30+ pages showing three at a time makes the chart itself unusable. This was a key component of the chart.

not being able to filter devices on things like the energy dashboard, which is NOT quick to add/remove devices, is a big downgrade in usability.

[douweyntema]

A graph without a decent legend is useless.

You ruined something that worked well

[ildar170975]

Sometimes a migration to more promising tools may cause temporary failures - they can be fixed hopefully.

[ptowalski]

The legend is a core feature of a plot. I often use screenshots to exchange plots with others and analyze issues. If a legend can't be shown properly, the plot is mainly modern art with little value. If it is not possible to display a legend in a normal way the switch to echarts should not have been done in the first place. IMHO upstream changes should have been implemented first to enable proper legend function before switching.

[chairstacker]

Same here!
A graph without a legend is in most cases a just useless group of wiggly lines.
I have one chart that shows the production of each one of my 19 micro inverters - what a pain it is with the new chart layout to see which is which.

[ildar170975]

In life-critical cases - suggest to switch temporary to some custom card (mini-graph-card, apexcharts, history-explorer, ...) until a better solution is found.

[GeekyNuggets]

I would also like to show support for exploring alternate options or something that can be toggled between to display all the items and paginating. Legends on the charts are extremely helpful and the pagination makes toggling the individual elements for isolation and comparison quite cumbersome. If it's worth handling this upstream, I'm happy to show support for any comments there as well.

I've migrated my dashboard charts to the Plotly Graph card in the meantime but I like the design of the history graph better in some instances and would like to switch back in the future. I'm not aware of how to change the individual device usage card on the energy dashboard and would frequently show/hide elements there for comparison but it's far too cumbersome now to scroll back and forth looking for the different items.

[marcinbauer85]

Hi, I'm Marcin from the Nabu Casa product team.
I'm working implementing some of your feedback to the next release to make the chart legends better. We plan to add back the standard way of just displaying all of the selected series in charts, with a small improvements. This would be defaults for Energy dashboard.

To that we would like to introduce a togglable option (for card charts), to show a new overflow version of the legend.

Please feel free to comment on the proposals.

[wittypluck]

Another idea which would be useful to declutter legends would be to add the possibility to override the name of each series in the legend.
So for example a graph which displays the battery level of twenty devices doesn't need to repeat twenty times "device xxx battery level" in the legend, and I would override it to show a short name.
I think this is possible in some cards (like the energy dashboard) but not in the history graph or statistics graph.

[maryandmike]

Yes, I think this is a good alternative. Should work like before with the legend below.

[karwosts]

I think this is possible in some cards (like the energy dashboard) but not in the history graph or statistics graph.

You can already do this.

https://www.home-assistant.io/dashboards/history-graph/#name
https://www.home-assistant.io/dashboards/statistics-graph/#name

[KNXBroker]

Having this functionally in the GUI would indeed be very helpful.

[dxmnkd316]

Strongly prefer the old method. Adding extra clicks to open and close a list seems less efficient to me and less readable when displaying data and sending screenshots.

Thank you for taking the time to read all of this feedback and incorporate it into the design decisions.

[KNXBroker]

The old style should be kept, for me it's most important to see at once which information is in the graph. The drop down menu cannot provide this. Dropdown is better than left/right arrows, maybe useful for many graphs in one plot. Personally I do not have more than 4 graphs in a plot, but, for whatever reason people need this (perhaps to see outliners), dropdown could be a nice option.

[creativethings]

I note the chart legends as shown above by @marcinbauer85 have already landed in the last release, and generally I am very happy with it, thanks!

One suggestion though: May I please set the number of things that needs to be displayed before the "view more" is shown? As it happens it now defaults to 7 for me, where I always have 8 legend items. The number 8 legend item therefor always ends up under the "view more". I would be happy to trade some extra space for the last legend item and not having to use the view more and I think it should be left to the creator of the dashboard and the graph to decide how important it is to show all legend items (or not).
If my display is in portrait a longer legend might actually not be an issue at all.

[karwosts]

expand_legend option will show all 8 items right?

[creativethings]

It does indeed! I overlooked that as for me that option is not in the GUI config of the card, sorry for that.
I do note if you set expand_legend true it will show all items, but it will also still show the more/less menu option, which seems a bit silly as all items are there already?

[wittypluck]

Looks great, thanks!