Lovelace: mini graph card


It might be a bug, I don’t remember doing it before the new threshold functionality.


If I remove the thresholds it shows the same color as the graph.


Yes, but that’s because the way it was working before was that the whole line was changing color (and therefore the filling) based on the above/belove functionality, maybe now he can’t hve the filling to change color with the threashold in specific places (not sure, just guessing)… or maybe its just a bug and might be easy to fix.

I would suggest you maybe to open an issue on Github?


When you use threshold do you define color in entity section? When I define it threshold not work


Interestingly enough these to sensors have minus values set in their thresholds, and the fill then defaults to the minus values color…image

                  - type: custom:mini-graph-card
                      icon: false
                      fill: fade
                      - sensor.temperature_storage
                    # height: 75
                      - value: -5
                        color: "#66B2FF"
                      - value: 3
                        color: "#87c087"
                      - value: 5
                        color: "#389638"


No, config as shown above. No default color set, only thresholds.

I will open an issue


One new thing I noticed, actually noticed, is that even if you have legend: true and a graph, if you have one entity the legend will not show up :slight_smile:


Can you emphasize a little on using color override? Have the following win an override for
entity: sensor.bedroom_climate_settemp

  - type: custom:mini-graph-card
    name: Температура
    icon: mdi:thermometer
      - entity: sensor.mys_bedroom_33_3
        name: Кровать
      - entity: sensor.bedroom_heat_temperature
        name: ZWave
      - entity: sensor.bedroom_climate_settemp
        name: Радиатор
        color: red
      legend: false
    decimals: 0
    hour24: true
    font_size: 80
      - value: 18
        color: "#6600cc"
      - value: 20
        color: "#005ce6"
      - value: 22
        color: "#009933"
      - value: 24
        color: "#99cc00"
      - value: 25
        color: "#ff8000"
      - value: 26
        color: "#cc2900"  

But still no red for me


That’s definitely not the intended behaviour.

The fill should be based on the current state threshold.

I tried to recreate the issue but failed at first, worked as expected for me in both Chrome and Firefox, but managed to recreate the issue in Safari.

I think it has something to do with the scope of the gradients, If you look at the first picture you posted, the first graph behaves correctly but the rest seems to just apply the fill of the first one. I’ll will have to investigate further.

No, when you define a color in the entity object it will override the threshold colors.

It should override any other color setting (line_color, color_thresholds), can’t recreate this issue, are you on the latest version, and have cleared cache since updating?

That’s intentional, I don’t see the need for a legend if you only have one entity in the graph.


I also noticed this, first is from mobile

and second from desktop. Same graphs. Cache on the phone? Desktop is the one showing correct.



Most likely related to the same issue, seems to behave differently depending on browser and which graph loads first.
I’ll make a unique id for each card, should resolve the conflicting references, if that’s the issue.

Wanna help me test it? I could send you a bundle with the fix if you want.


Of course I’ll help! If it’s ready soonish you can ping me on discord so I can go up to the computer again and fix.


I see the point on hiding when it is just one entity, but what about forcing it if legend: true is specified? ^^


Same here, i updated my old version to the latest, and changed the config. Now its just a blue line with orange fill. Tried with Firefox and on mobile with Chrome


  - value: 50
    color: blue
  - value: 65
    color: red


Legend is set to true by default, so making this change would result in the legend by default being visible even if there’s only one entity in the graph, which I don’t like.

The reason for the line being just blue is because the state never went above 65, which is your threshold for red.

As for the fill, I’ve squashed the bug with some help from @teachingbirds , and it should behave as expected in the next release.


Yes the latest one. [v0.2.4: Quick fixes]
Everything is working as it should. Learned my lesson. Although the browser cache was cleared. Page force reloaded with Shift+F5 several times - it was still cached somewhere. Pressing refresh in the lovelace interface fixed everything


I see, okay.

Any feedback for the wdth 0 graph true “issue”?

Cheers :slight_smile:


Caching is great, but can also be really annoying sometimes :upside_down_face:

Fixed, it’s now (I mean next release) possible to set height to 0. :wink:


Is there a way to force the graph to go down as soon as the value in the sensor is back to 0?

I have a water meter and obviously i’m not using water all the time. This is an example:

I’ve used water twice but the graph doesn’t go back to zero.


The graph is based on a moving average, which is not suitable for all use cases.
What you could try is to set an even higher points_per_hour.