Lovelace: mini graph card

kruton · February 27, 2021, 2:24pm

Awesome, thanks that did it!

Ildar_Gabdullin · February 27, 2021, 3:12pm

As far as I know - it cannot be done (please somebody correct me).

What you can do is:

Create a graph with TWO data:

required data (for example, Humidity);
data much bigger than the required data (for example, CO2 ppm).

Set an upper bound slightly bigger than the highest value of the required data.
Select color thresholds for equal intervals.
But it will be anyway not a nice as your picture:

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_humidity
    color: green
    show_state: true
    show_fill: false
    show_points: false
  - entity: sensor.cleargrass_1_co2
    show_state: false
    show_fill: true
    show_line: false
hours_to_show: 6
points_per_hour: 60
name: Humidity
show:
  labels: true
  legend: false
color_thresholds_transition: hard
font_size: 100
line_width: 2
height: 200
upper_bound: 60
lower_bound: 0
color_thresholds:
  - value: 0
    color: magenta
  - value: 12
    color: red
  - value: 24
    color: orange
  - value: 36
    color: yellow
  - value: 48
    color: '#ffffd3'

You may experiment with colors etc )))

RomRider · February 27, 2021, 3:44pm

You can do that with apexcharts-card

Mariusthvdb · February 27, 2021, 3:45pm

I was just writing up this in your thread… beat me to it

I’ll hop over then for this particular need thanks!

Please be prepared to give me a kickstart there for I did some initial scanning and am still rather without a clue…

lukasg · March 3, 2021, 9:37am

Hello everybody, Is it possible to show the actual temperature on the left and the humidity on the right?
I searched for it, but I could not find an example.

Balkon

type: 'custom:mini-graph-card'
name: Balkon
icon: 'mdi:sprout'
entities:
  - entity: sensor.lumi_lumi_weather_temperature
    name: Temperatur
    color: red
    show_line: true
    show:
      labels: true
      extrema: true
      show_points: true
      show_legend: true
  - entity: sensor.lumi_lumi_weather_humidity
    name: Luftfeuchtigkeit
    color: blue
    show:
      labels: true
      extrema: true
      show_points: true
      show_legend: true
    y_axis: secondary
show:
  labels: true
  labels_secondary: true

Thank you in advance!

Greetings,
Lukas

Ildar_Gabdullin · March 3, 2021, 10:04am

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_temp
    color: green
    show_state: true
    show_points: false
    name: Temp
  - entity: sensor.cleargrass_1_humidity
    color: blue
    show_state: true
    show_points: false
    y_axis: secondary
    name: Humidity
hours_to_show: 6
points_per_hour: 60
name: Climate
show:
  labels: true
  legend: true
  icon: false
  labels_secondary: true
line_width: 2
height: 200
lower_bound: 0

There are some errors in your code - the “show:” section must be only on the “root” level.

lukasg · March 3, 2021, 10:59am

Thank you. It works now!

sd_dracula · March 7, 2021, 9:43am

Can someone help me with getting the daily value bar chart to display the correct values.

This is the bar chart and for yesterday it is showing 8.31 kwh but the actual sensor value for yesterday was 17.97 so I am guessing my chart config might be incorrect

Daily sensor value:

The config:

type: 'custom:mini-graph-card'
name: Daily Energy Used
icon: 'hass:flash'
show:
  graph: bar
hours_to_show: 168
group_by: date
entities:
  - entity: sensor.daily_energy_peak
    name: Energy

ThaNerd · March 9, 2021, 5:44pm

is there a way to change the graph card’s height?

Czarnykowal · March 9, 2021, 6:05pm

Hi, you are awesome . I was looking to customize my graphs and this project is cool. One issue I have is with coping the examples I need to change the spaces or add remove “-” but I figure out it.

Ildar_Gabdullin · March 9, 2021, 11:00pm

ThaNerd · March 9, 2021, 11:16pm

Tried that it didn’t work.

fmon · March 10, 2021, 10:21pm

I’d like to do this as well, but someone asked above in the string (in 4/20) and the response was that it’s not possible without using another custom card type that allows you to define Jinja2 templates anywhere in Lovelace.

Ildar_Gabdullin · March 10, 2021, 11:32pm

It works for me:

ThaNerd · March 10, 2021, 11:54pm

Hmm… Maybe it’s my other card that is messing things up, will test and see.

ThaNerd · March 11, 2021, 12:32am

OK it works, was my other card that was blocking it plus I found there is a min height that this card can handle.

joristhiels · March 16, 2021, 8:08am

I’ve the same issue, so also looking for a solution.

sd_dracula · March 16, 2021, 9:07am

Worked it out:

type: 'custom:mini-graph-card'
name: Daily Energy Used
icon: 'hass:flash'
show:
  graph: bar
hours_to_show: 168
aggregate_func: max
group_by: date
entities:
  - entity: sensor.daily_energy_peak
    name: Energy

palivoda · March 16, 2021, 5:41pm

Wondering why its not part of the HA core. Super popular card! Looks like only lack of UI config form stops from being part of HA and more popularity.

FoxRx · March 16, 2021, 10:27pm

ABSOLUTELY love the card…awesome beyond all belief. I do have one question as
I am using it from my pool and spa temperatures when they are running.
When one or both are not running the state of the sensor is unknown.
Using the state_map I stated the value of unknown the label would be Pool Off
or for Spa it would be Spa Off. Is there a way to hide or blank the unit when
using this state_map method. He is how it currently looks for me…

PoolSpaOff

I would like to not see the F for Fahrenheit when using the state_map.

Thanks SO much in advance!!!