Thanks all! I will have a play and see what I can do 
Success!
Here you go @SeLLeRoNe - make sure to install Lovelace Card Mod first, then add the following:
style: |
ha-icon {
color: [[ if(sensor.xxx_temperature >= 30, "rgb(255, 0, 0);", if(sensor.xxx_temperature >= 22, "rgb(255, 153, 0);", if(sensor.xxx_temperature >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
}
Adjust values and colours to suit.
I’m also using FontAwesome like you - so I have along with using the different thermometer icons, I have also added fas:termperature-hot and fas:temperature-frigid for the extremes:
Hope thats of some use!
1 Like
That’s amazing thanks!
Just one note tho, you might want to use the var so that the config is always the same, basically as it is for the icons:
style: |
ha-icon {
color: [[ if(vars[0] >= 30, "rgb(255, 0, 0);", if(vars[0] >= 22, "rgb(255, 153, 0);", if(vars[0] >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
}
1 Like
You are right, it doesn’t.
It did change the color to red so I thought the temperature was in the range but today after a more accurate check I noticed it was setting the first color for all (red)
That’s very unfortuante, using the vars would have been much easier
I’m using v0.5 from HACS and I really like the look of the card. I’m using it to show my realtime home energy production/consumption, which means that it can swing between around -4kW to 6kW. I created a sensor that always reports 0 and added it as an entity to display a line at 0 and I change the line color between green and red as it crosses 0.
I would really like to see the graph better reflect signed values, including filling from zero to the value (positive or negative) and not just from the bottom of the graph. Here’s an example where the fill covers the region from the lowest value in the graph to the line, while the more logical choice in my usage would be for the fill to extend from the green line to zero on the y-axis.
As solar production goes down and energy consumption goes up, it becomes more interesting to see how far above 0 the line is, so I’d like the fill to represent the area above zero.
Is there a way to do this with the options the card has today?
Having some trouble with a card with multiple graphs. I’ve installed via HACS and it says I have the latest version.
In the first picture the graph names are above the graph - if I do fill: false the names move beneath the graphs. Can I keep them above the graphs?
If I hover over the points, whichever graph, it will show in the left state field. Is it possible to make it show in the “corresponding” field? i.e. update the right field if I hover over the pink graph.
I read that the card now can open the more-info dialog on both entities. That doesn’t work - it will only open the first entity wherever I click.
I am getting an error in the lovelace editor that is driving me nuts!
YAML Error: YAMLException: bad indentation of a sequence entry at line 10, column 14: show_line: false ^
My config:
type: 'custom:mini-graph-card'
name: Allergy Index
icon: 'mdi:tree'
hours_to_show: 72
show:
points: false
entities:
- sensor.allergy_index_today
- sensor.allergy_index_tomorrow
show_line: false
line 10 is show_line: false and column 14 is the colon
Any line entered below a dict throws an error, so it appears as if no individual sensor configs can be done. Name, color, show… all of them.
Hass version: 0.96.5 - Docker on Ubuntu
Shouldn’t it be:
entities:
entity: sensor.allergy_index_today
entity: sensor.allergy_index_tomorrow
show_line: false
omg… so simple and simply overlooked… the shame
Thank you!
1 Like
i am having an issue when trying to add the secondary y-axis.
currently i am just pulling in my energy meter for hte past 24 hours and trying to overlay a "nightmode’ binary sensor to compare day/night visually.
the example shows an input number. must it be so or can in be on/off?
I would need your help. I start with HA. I’m trying to understand how custom cards work.
I wanted to install mini-graph-card.
Can you tell me or I’m wrong. I would like to keep the card configurator.
-
I sent the file mini-graph-card-bundle.js in / config.
-
I added at the top of the configuration editor the line:
Attractions:
- type: module
url: /local/mini-graph-card-bundle.js?v=0.5.0
3. I created a card and I put the code:
- type: custom: mini-graph-card
entities:
- ssensor.processor_use
show:
labels: true
color_thresholds:
- value: 20
color: "# f39c12"
- value: 21
color: "# d35400"
- value: 21.5
color: "# c0392b"
it does not work.
The .js needs to be in /config/www
thank you for the answer.
it’s the same thing
The red error box is telling you the problem.
It says that your indentation is off. And it’s telling you exactly where the indentation is off - in line 2.
Look at line 2. You should see how bad the indentation starting there is compared to everything else.
sorry but what is indentation?
1 Like
One thing I noticed, ssensor should be sensor 
So basically it should be (once indentation is fixed):
- type: custom: mini-graph-card
entities:
- sensor.processor_use
show:
labels: true
color_thresholds:
- value: 20
color: "# f39c12"
- value: 21
color: "# d35400"
- value: 21.5
color: "# c0392b"
Yes, that’s by design.
No.
Yep, seems broken indeed, not sure when this broke, will look into it.
As long as it reports its state as a value 0-1 for example, I believe it should work.
If it doesn’t you would have to create a template sensor or similar of that entity, that treat on as 1 and off as 0 e.g.
1 Like