Lovelace: mini graph card

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.

Yes of course… So simple… Thanks!
Sagol! :slight_smile:

//Regards…

1 Like

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

1 Like

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.

1 Like

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;
  }

изображение

1 Like

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:

2 Likes

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;
  }

изображение

1 Like

Awesome, thanks that did it!

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

What you can do is:

  1. Create a graph with TWO data:
  • required data (for example, Humidity);
  • data much bigger than the required data (for example, CO2 ppm).
  1. Set an upper bound slightly bigger than the highest value of the required data.
  2. 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 )))

2 Likes

You can do that with apexcharts-card

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

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…

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

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.

2 Likes

Thank you. It works now!

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

image

Daily sensor value:
image

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

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

Hi, you are awesome :+1:. 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. :grinning:

Tried that it didn’t work.

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.