Show state at legend's label (or name at state's label)

[bobloadmire]

For instance, if I have a graph with inside and outside temperature, it's not immediately apparent which value is being displayed at the top of the card (It's whatever entity is listed first, but this isn't obvious at first glance)

I propose a way to list the current value next to the label on the graph, and get rid of the single value at the top of the card. Not only would this make things more clear, it would also eliminate all the white space to the right of the card, making it more space efficient.

Maybe there is a way to do this currently, but looking through the config, I didn't see any options to allow this.

[jlsjonas]

Great suggestion, this is definitely something we'd like to add in the future! Feel free to suggest a more concrete UI example (pictures say more than a thousand words, after all ;) ) so we can also gauge interest

[ildar170975]

to list the current value next to the label on the graph

Do you mean smth like this? https://community.home-assistant.io/t/lovelace-mini-graph-card/71385/1957?u=ildar_gabdullin

[bobloadmire]

That's exactly what I would like, thanks!

[ildar170975]

Displaying states near the legend breaks the card integrity:

1. You cannot show the "main" state's values on the top of the card because it'll duplicate already displaying states.
2. You cannot show points & states for selected points because of the para above.

So, the only suitable case for "displaying states near the legend" feature is "do not display main states, do not display points". That is why I propose this feature to be achieved by card-mod only, not as a native mini-graph-card feature. I suggest to close the issue.

[bobloadmire]

Well that's pretty disappointing because in it's current form it's pretty poor UI design, unlabeled values and wasted white space, but you guys are the boss. Could you maybe add a different card format all together to achieve this?

[ildar170975]

unlabeled values

To "label" values, you may use same colors for graphs & states by using already available state_adaptive_color: true options: This example has "card-moded" colored scales & legend's labels too. Also, you may change a font size (by card-mod or available "font_size_header" & "font_size" options).

See, the changes you are proposing may be implemented in future by someone; I am trying to propose alternative ways for you.

[bobloadmire]

This assumes that you're using two sets of data that have different units though, if you want to compare inside and outside temperature on a chart or inside and outside humidity, it makes it a mess. I'm not entirely sure, for example, why you would compare temperature to CO2?

[ildar170975]

This was just an example of using available options & styling. Surely you may display graphs for data of the same type on one Y-axis:

Btw, sometimes it is useful to display two different values on one graph since these values are related - like temperature & humidity.

[bobloadmire]

yeah that is better, but it would still be much better to get everything all inline, there is still a ton of dead space on the card because of the layout, and you still have to read the card a bit to figure out which color corresponds with which dataset to know which temp corresponds with which label.

[ildar170975]

Similarly to https://github.com/kalkih/mini-graph-card/issues/507:

1. Either show state in the "legend line" (see example above).
2. Or show name in the "state line":

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[bobloadmire]

Saw it was marked stale, I'm assuming there has been no movement on this?

[stale[bot]]

Still an active issue, got it! Removing stale label.

[bobloadmire]

Just checking in to see if there has been anymore thought about implementing this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[skvalex]

Hope to see this feature implemented too

[stale[bot]]

Still an active issue, got it! Removing stale label.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

[d3m3trius]

still active

[stale[bot]]

Still an active issue, got it! Removing stale label.

[humplemann]

+1 - have the same exact issue.

[jlsjonas]

To be considered when implementing this:

• show.state (true & last)
• show the value in the respective legend label, hiding other states to avoid confusion
• documentation: indicate that this is intended for minimal compact layout scenarios only

[lecourtb]

Love to see that !

[sirmeili]

Would love to see this too. Currently showing 5 temps as an overview and showing all the states and the legend looks horrible

[sirmeili]

I hacked the code abit. it was all of 4 lines of code to do this with a new config called "show_legend_with_state". I know that it could be better and I probably used the wrong CSS classes/etc, but this was more of a proof of concept. I don't mind putting in a PR if it's acceptable to be included into a future release.

[d3m3trius]

Also, consider how apexcharts card handles the state: Somethings similar would be cool.

[sirmeili]

I condensed it more to just 1 new line (moved the new lines into the same span). I also added a config for a separator. it's on the same line so that you can so something like household: and the : sits right next to the name.

Note my example below has some card-mod styling added to shrink the states on the side and increase the main state font size. just looks better on my phone, which is where I'm intending to show this specific card.

the actual code. Again, I'm sure it could be cleaned up a bit (moved out to a separate function for instance) ${entityConfig.show_legend_with_state ? (entityConfig.name || entity.attributes.friendly_name) : ''}${entityConfig.show_legend_with_state ? (entityConfig.legend_state_separator || '') : ''}

[markfrancisonly]

bump

[jonprobst]

I condensed it more to just 1 new line (moved the new lines into the same span). I also added a config for a separator. it's on the same line so that you can so something like household: and the : sits right next to the name.

Note my example below has some card-mod styling added to shrink the states on the side and increase the main state font size. just looks better on my phone, which is where I'm intending to show this specific card.

the actual code. Again, I'm sure it could be cleaned up a bit (moved out to a separate function for instance) ${entityConfig.show_legend_with_state ? (entityConfig.name || entity.attributes.friendly_name) : ''}${entityConfig.show_legend_with_state ? (entityConfig.legend_state_separator || '') : ''}

Where do you put this code in Home Assistant? Sorry if this is a dumb question. CSS noob here

[jonprobst]

Took way too long to figure things out, but hey, now I know more about CSS than I did yesterday. It's not dynamic like sirmeili's is but I couldn't figure out where to put his code to get it to work.

card_mod:
  style: >
    .states.flex .state.false {
      font-size: 16px;
    } 
    .states.flex .state.false .state__value.ellipsis:before {
      content: "Avg:";
      font-size: 12px;
    }
    .states.flex .states--secondary {
      font-size: 10px;
    } 
    .states.flex .state.state--small:nth-of-type(1) .state__value.ellipsis:before {
      content: "Living Room:";
    } 
    .states.flex .state.state--small:nth-of-type(2) .state__value.ellipsis:before {
      content: "Office:";
    } 
    .states.flex .state.state--small:nth-of-type(3) .state__value.ellipsis:before {
      content: "Spa Room:";
    } 
    .states.flex .state.state--small:nth-of-type(4) .state__value.ellipsis:before {
      content: "Garage:";
    } 
    .states.flex .state.state--small:nth-of-type(5) .state__value.ellipsis:before {
      content: "Outside:";
    }

The first entity is a helper (template - sensor) that takes the avg of two sensors. I'm sure there's an avg function I could use but this works

{% set ns = namespace(values=0) %}
{% for e in expand('sensor.living_room_temperature', 'sensor.office_temperature') %}
{% set ns.values = ((ns.values | float) + (e.state | float)/2) %}
{% endfor %}
{{iif(ns.values != '', ns.values,'Error')}}