Lovelace: mini graph card

adnn-hassio · February 20, 2021, 11:49am

Thanks for this pure card… here my loveloce codes and sshot.

- type: vertical-stack
        cards:
          - type: 'custom:mini-graph-card'
            entities:
              - sensor.yatak_odasi_sicaklik
            name: BedroomHeat
            show:
              labels: true
              average: true
              extrema: false
            color_thresholds:
              - value: 26
                color: green
              - value: 26.8
                color: green
              - value: 27.3
                color: blue
              - value: 27.9
                color: red
            hours_to_show: 48
            points_per_hour: 1
            update_interval: 30
            line_width: 3
            font_size: 100
          - type: 'custom:mini-graph-card'
            entities:
              - sensor.yatak_odasi_nem
            name: BedroomHumidity
            show:
              labels: true
              average: true
              extrema: false
            color_thresholds:
              - value: 36
                color: red
              - value: 38
                color: orange
              - value: 40
                color: green
              - value: 42
                color: blue
            hours_to_show: 48
            points_per_hour: 1
            update_interval: 30
            line_width: 3
            font_size: 100

Minglarn · February 20, 2021, 6:11pm

Like the line colors! How did you manage that?

adnn-hassio · February 20, 2021, 6:20pm

yep, you can see under ‘‘color_thresholds:’’ section. Graphic colors change according to the data from the sensors and the choises under the ‘‘color_thresholds:’’ section. you can play around colors, if you like you can create rainbow.

Minglarn · February 20, 2021, 6:26pm

Yes of course… So simple… Thanks!
Sagol!

//Regards…

adnn-hassio · February 20, 2021, 6:34pm

Yes i just take a little exploration on add on. Rica ederim

kruton · February 27, 2021, 10:41am

Really enjoy the card for a long time now!
Only thing that is bothering me a little is the date and time for the extrema values in narrower cards. Is there a possibility to just show the extrema value?
See the following example: It works find with the wider card, but as soon as I place two cards in a row it gets very crowded.

Ildar_Gabdullin · February 27, 2021, 2:16pm

Card-mod is required.

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  extrema: true
style: |
  ha-card .info.flex .info__item .info__item__time {
    display: none;
  }

Mariusthvdb · February 27, 2021, 2:21pm

tldr… so sorry if this has been done before

Instead of coloring the graph line, I’d like to have the card show a background with colors along the y-axis, and the graph moving over that background. Could that be done? And of course I mean configured via the card settings, not some jpg as background, which would make it very flakey

a bit like this:

Ildar_Gabdullin · February 27, 2021, 2:22pm

BTW, you may also hide MAX or MIN value:

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  extrema: true
style: |
  ha-card .info.flex div.info__item:nth-child(1) {
    color: transparent;
  }
  ha-card .info.flex div.info__item:nth-child(2) {
    color: red;
  }

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