Lovelace: mini graph card

I am not 100% sure on how it exactly works, maybe the user still cache it but the system send a new tag for it when there is an updated version? That would make lot of sense and is actually how the caching layers do work :slight_smile:

Any possible way to do the following?

  • Adjust height of the card. I have a bunch of temperature sensors that I want to view, but I have to scroll a lot now. If I could shrink the height of the card, that would help.
  • Have 2 labels on card. If I have 2 sensors (temp, humidity), and want to see the current value with the big bold number on the card, I’d like to have temperature readout on the left side of the card, and maybe humidity on the right side. Currently, we can have multiple sensors per card, but only one big number shows.
1 Like

Hi, you can use:
height to adjust the height, default is 150

For the second bit you add on each identity that you want to see the value on the top:
show_state: true

Technically, is always true for the first identity, so you can add it on the second (the second will be showen on the right side)

Example:
image

Let me know :slight_smile:

1 Like

Thanks! That definitely helps. Any suggestions on the graph? Individually, the graphs look good when the sensors change, but once put together since the numbers (temp/humidity) are vastly different, they are pretty much flat. Is there a specific way I should be configuring the axis to display it better? or is it just the downfall with the 2 sensors im putting into each box?

3

Also, the moment I add the height info to all of the cards, I now get a vertical scroll bar immediately to the right of my vertical stack that has all of the cards in it.

That’s strange, the heigh shoul be just for the single graph card oO

Regarding the two different unit, I was facing a similar issue for speedtest, between donwload/upload and ping.

I ended up using two differeng graph one above the other.
It might be a little complex to write, but the result is good, here is what it looks like on mine for speedtest:
image

This is basically 4 graph-card put togheter, I didn’t do something like this for temp/humidity, I actually let them separate because my idea is that I will have more temp sensors and more humidity sensor on each graph (per room or zone in the house), in that case to don’t mess things up too much I think two separated graph is a better soution :slight_smile:

You have the two options upper_bound and lower_bound to customize the y-axis, but wouldn’t really help achieve what you are after, you could also increase the height.
I would however recommend you to just keep them in two separate cards though.

Strange, never seen that, you are using the cards height option and not card modder or anything else to set the height right?

I’ve looked at the documentation but I can’t figure this out. I’m trying to figure out how to use dynamic line color on a two-entity card, but no matter where I try to put color_thresholds: in the code below I get an error like this:

while parsing a block mapping in “/config/ui-lovelace.yaml”, line 177, column 21 expected <block end>, but found ‘-’ in “/config/ui-lovelace.yaml”, line 179, column 21

Code in ui-lovelace.yaml:

      - type: custom:mini-graph-card
        name: Main House
        icon: mdi:thermometer
        entities:
          - entity: sensor.family_room_temperature
            show_state: true
          - entity: sensor.main_floor_temperature
            show_state: true

Can someone show me how it’s supposed to be formatted? I’d like the line to go dark blue when the temperature goes below 60 for both graph lines and stay the default color when above. Thanks!

You can achieve this in a few ways, here are two examples:

- type: custom:mini-graph-card
  name: Main House
  icon: mdi:thermometer
  entities:
    - entity: sensor.family_room_temperature
      show_state: true
    - entity: sensor.main_floor_temperature
      show_state: true
  line_color:
    - navy # first graph entry color
    - navy # second graph entry color
  color_thresholds:
    - value: 60 # color when above 60
      color: insert_default_color_here # 'var(--primary-color)' for example
- type: custom:mini-graph-card
  name: Main House
  icon: mdi:thermometer
  entities:
    - entity: sensor.family_room_temperature
      show_state: true
    - entity: sensor.main_floor_temperature
      show_state: true
  color_thresholds:
    - value: 0 # or any other value the temp won't go below
      color: navy # color when above 0
    - value: 60
      color: insert_default_color_here # color when above 60
1 Like
      - type: custom:mini-graph-card
        name: Main House
        icon: mdi:thermometer
        line_color: 
          - blue
          - blue
        color_thresholds:
          - value: 60
            color: red
        entities:
          - entity: sensor.family_room_temperature
            show_state: true
          - entity: sensor.main_floor_temperature
            show_state: true

This should work technically :slight_smile:

2 Likes

@kalkih @SeLLeRoNe Thanks so much for the help! I’ve used the first version by Kalkih and it works (threshold is set at 65 just to make the colors change, and there’s a lack of data on the right side of the lower dip) :

minigraph

except both entities have the same line colors - and I don’t see that any of the other versions would change this. Can I have the Main Floor line be, say, orange, and the Family Room line be, say, light blue, and have each of those turn blue below 60?

color thresholds are applied to the whole graph at the moment, so that’s not possible, no.

You can override the color_thresholds for either entity by setting the color option in either entity object, but that would skip the thresholds completely and render that entity in a single color.

1 Like

Okay, thanks, I’ve got that working as you described by using the color option so only one graph will change color. Not exactly what I wanted but it will do for now :wink: If there’s any chance that at some point the the color thresholds could be on a per-graph basis, that would be really nice, but I understand that it may not be possible or easy to do. Thanks for all your hard work on this card, and your responsiveness in this thread - both are very much appreciated!

2 Likes

Thanks for the kinds words.
Could possibly be made available on an entity basis in the future, it’s definitely “doable”. :smiley:

2 Likes

Agree, would be very nice :slight_smile:

Andrea

1 Like

@SeLLeRoNe - great graph, would you be willing to share the latest config - trying to do similar and yours is way ahead. No point in reinventing.

Sure, no problem at all :slight_smile:
Here it is:

              - type: entities
                show_header_toggle: false
                entities:
                  - type: custom:mini-graph-card
                    name: Speed Test
                    more_info: false
                    group: true
                    height: 0
                    hour24: true
                    hours_to_show: 24
                    points_per_hour: 4
                    animate: true
                    decimals: 0
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: line
                      fill: false
                      points: false
                      legend: true
                      extrema: false
                      labels: false
                    entities:
                      - entity: sensor.speedtest_download
                        name: Download
                        color: "#3399ff"
                        show_state: true
                      - entity: sensor.speedtest_upload
                        name: Upload
                        color: "#ff6600"
                        show_state: true
                      - entity: sensor.speedtest_ping
                        name: Ping
                        color: "#33cc33"
                        show_state: true
                  - type: custom:mini-graph-card
                    more_info: false
                    height: 150
                    group: true
                    hour24: true
                    hours_to_show: 24
                    points_per_hour: 4
                    animate: true
                    decimals: 1
                    show:
                      name: false
                      icon: false
                      state: false
                      graph: line
                      fill: false
                      points: false
                      legend: false
                      extrema: false
                      labels: false
                    entities:
                      - entity: sensor.speedtest_download
                        color: "#3399ff"
                      - entity: sensor.speedtest_upload
                        color: "#ff6600"
                  - type: custom:mini-graph-card
                    more_info: false
                    group: true
                    height: 25
                    hour24: true
                    hours_to_show: 24
                    points_per_hour: 4
                    animate: true
                    decimals: 0
                    show:
                      name: false
                      icon: false
                      state: false
                      graph: line
                      fill: false
                      points: false
                      legend: false
                      extrema: false
                      labels: false
                    entities:
                      - entity: sensor.speedtest_ping
                        color: "#33cc33"
                  - type: custom:mini-graph-card
                    more_info: false
                    group: true
                    height: 0
                    hour24: true
                    hours_to_show: 24
                    points_per_hour: 4
                    animate: true
                    decimals: 0
                    show:
                      name: false
                      icon: false
                      state: false
                      graph: line
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.speedtest_download
                        color: "#3399ff"
                      - entity: sensor.speedtest_upload
                        color: "#ff6600"
                      - entity: sensor.speedtest_ping
                        color: "#33cc33"

I am looking forward for the additional info in the “extrema” part :slight_smile:

3 Likes

I was trying to get my solar output sensor to show as a bar chart. This sensor reports once a day and I wanted the chart to show 12 days output, one bar per day.
I have

- type: custom:mini-graph-card
            entities:
              - entity: sensor.power_gen_cum_prior
                name: ENERGY GENERATION
            show:
                graph: bar  
            hours_to_show: 288
            points_per_hour: 0.041666667
            lower_bound: 0
          - type: history-graph
            title: Power use Vs Gen
            entities:
               - sensor.energy_generation
            hours_to_show: 288
            refresh: 3600 

and I get


The bar chart is accurate for the first 4 and the last 4 days, but the middle portion is somehow averaged?
(History-graph is shown for comparison).
Anybody tried to do a monthly graph?

Is it possible that you don’t have correct data for those days?

I do have correct data, which is rendered correctly by the history graph.