Lovelace: mini graph card

Did you figure it out?
xD

i’m interested if you had figured it out?

Is there a way to get rid of the labels for Night, Temperature & Humidity on this card?

My code:

type: custom:mini-graph-card
name: Wohnzimmer
icon: mdi:water-thermometer
entities:
  - entity: binary_sensor.night
    color: grey
    y_axis: secondary
    aggregate_func: max
    show_line: false
    show_points: false
    show_state: false
  - entity: sensor.wohnzimmer_humidity
    color: '#457b9d'
    line_width: 3
    name: Luftfeuchtigkeit
    show_state: true
    show_points: false
  - entity: sensor.wohnzimmer_temperature
    color: '#9b2226'
    line_width: 3
    name: Temperatur
    show_state: true
    show_points: false
state_map:
  - value: 'off'
    label: Day
  - value: 'on'
    label: Night
line_width: 2
hours_to_show: 168
points_per_hour: 0.75
show:
  labels: false
  labels_secondary: false

This is in the docs:

show_legend: false

And for the title, try:

name: ""
1 Like

yeah, sometimes it can be that easy. Thanks much Pieter!

Hi All,
I have been trying out the mini graph card. I am looking for a way to increase the height of the graph without increasing the size of the card.

is this possible?

image

I just tried this with custom:stack-in-card, what seems to be working, need to do some more tweaking for myself but you could give it a try.

Example humidity and temp…

image

Mind sharing the code, please?

Sure, tweak as you like, could use less code, didn’t clean up yet.

type: custom:stack-in-card
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.lumi_lumi_weather_52b3df07_humidity
    name: Vochtigheid (24h)
    icon: hass:water-percent
    line_color: null
    line_width: 1
    hours_to_show: 168
    points_per_hour: 1
    font_size_header: null
    font_size: null
    hour24: true
    animate: true
    group: false
    lower_bound: 10
    upper_bound: 90
    show:
      name: false
      icon: false
      legend: false
      state: false
      labels: false
      fill: true
      points: false
    color_thresholds_transition: smooth
    color_thresholds:
      - value: 30
        color: '#ff0000'
      - value: 35
        color: '#c53100'
      - value: 40
        color: '#8b6100'
      - value: 45
        color: '#519200'
      - value: 50
        color: '#17c200'
      - value: 55
        color: '#11a240'
      - value: 60
        color: '#0c8180'
      - value: 65
        color: '#0661bf'
      - value: 70
        color: '#0040ff'
    style: |
      ha-card {
        box-shadow: none;
        margin-bottom: -120px;
        margin-left: 0px;
        border-radius: 0px;
      }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.lumi_lumi_weather_52b3df07_temperature
    line_color: null
    line_width: 1
    hours_to_show: 168
    points_per_hour: 1
    font_size_header: null
    font_size: null
    hour24: true
    animate: true
    group: false
    lower_bound: 10
    upper_bound: 30
    show:
      name: false
      icon: false
      legend: false
      state: false
      labels: false
      fill: true
      points: false
    color_thresholds_transition: smooth
    color_thresholds:
      - value: -24
        color: '#e246d5'
      - value: -22
        color: '#ef5de3'
      - value: -20
        color: '#fb74f0'
      - value: -18
        color: '#c965f3'
      - value: -16
        color: '#9756f6'
      - value: -14
        color: '#6448f9'
      - value: -12
        color: '#3239fc'
      - value: -10
        color: '#002aff'
      - value: -8
        color: '#3355ff'
      - value: -6
        color: '#667fff'
      - value: -4
        color: '#99aaff'
      - value: -2
        color: '#ccd4ff'
      - value: 0
        color: '#ffffff'
      - value: 2
        color: '#d1fcff'
      - value: 4
        color: '#bdf3e3'
      - value: 6
        color: '#a9eac7'
      - value: 8
        color: '#96e1ac'
      - value: 10
        color: '#6ecf74'
      - value: 12
        color: '#8bd05d'
      - value: 14
        color: '#a8d146'
      - value: 16
        color: '#c5d32e'
      - value: 18
        color: '#e2d417'
      - value: 20
        color: '#ffd500'
      - value: 22
        color: '#ffaa00'
      - value: 24
        color: '#ff8000'
      - value: 26
        color: '#ff5500'
      - value: 28
        color: '#ff2b00'
      - value: 30
        color: '#ff0000'
      - value: 32
        color: '#e80000'
      - value: 34
        color: '#d00000'
      - value: 36
        color: '#b90000'
      - value: 38
        color: '#a10000'
      - value: 40
        color: '#8a0000'
      - value: 42
        color: '#910033'
      - value: 44
        color: '#980066'
      - value: 46
        color: '#a00099'
      - value: 48
        color: '#a700cc'
      - value: 50
        color: '#ae00ff'
    style: |
      ha-card {
        box-shadow: none;
        margin-top: 0px;
        margin-left: 0px;
        border-radius: 0px;
      }

1 Like

it is possible to set the lower and upper bound.

lower_bound: 0
upper_bound: 200

for example.

Any idea how to convert unit values in example this one to mm/h:

image

Same for the weather from mph to kmh.
Have a ecowitt weather station and would be nice to have some graphics.

Create template sensors with converted units.
Or, if this integration supports changing units - select required units in corresponding settings for this platform.

Hello,

is it possible to change the Icon Color or the Background of a Card Based on entity stat.
In my case i “set up” a graph for a socket and when i tap the card the machine turns on and off.

Now i want to show the Status from the ON/OFF Swicht in card. So my Idea were to change the color of the icon or the Background, but i dont know if this is possible?
I am not good at coding :joy:.

Here is my code for my card.

type: custom:mini-graph-card
name: La Pavoni
icon: mdi:coffee



tap_action:
  action: call-service
  service: switch.toggle
  service_data:
    entity_id: switch.socket_isomactea
entities:
    - entity: sensor.socket_isomactea_energy_power
      name: now
    - entity: sensor.socket_isomactea_energy_today
      name: today
      show_state: true
      show_indicator: true
      show_graph: false
    - entity: sensor.socket_isomactea_energy_yesterday
      name: yesterday
      show_state: true
      show_indicator: true
      show_graph: false
hours_to_show: 24
line_width: 3
hour24: true
aggregate_func: max
height: 50

Possible with card-mod.
Go to card-mod thread - 1st post - link at the bottom - styles for this card

You will have to )

Example to display prices:
post

изображение

Example of making a card more compact when used in a horizontal stack or a grid.

Consider this code:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - &ref_card
        type: custom:mini-graph-card
        entities:
          - entity: sensor.processor_use
        hours_to_show: 1
        points_per_hour: 60
        show:
          state: true
      - *ref_card
      - *ref_card
  - type: grid
    square: false
    cards:
      - *ref_card
      - *ref_card
      - *ref_card
  - type: grid
    columns: 4
    square: false
    cards:
      - *ref_card
      - *ref_card
      - *ref_card
      - *ref_card

which gives this card:

изображение

Add some styles:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - &ref_card
        type: custom:mini-graph-card
        entities:
          - entity: sensor.processor_use
        hours_to_show: 1
        font_size: 50
        points_per_hour: 60
        show:
          state: true
        card_mod:
          style: |
            .name {
              font-size: 10px;
            }
            .header {
              padding-bottom: 0px;
            }
            .states {
              padding-bottom: 0px;
            }
            ha-card {
              height: 100px !important;
              padding-top: 4px !important;
            }
      - *ref_card
      - *ref_card
  - type: grid
    square: false
    cards:
      - *ref_card
      - *ref_card
      - *ref_card
  - type: grid
    columns: 4
    square: false
    cards:
      - *ref_card
      - *ref_card
      - *ref_card
      - *ref_card

and get this more compact view:

изображение

3 Likes

Hi to all, i’m using this awesome mod for display time of my Heather stay on.
I created a sensor with hystory stats that is displayed in hour and minuts, but in the graph the result Is wrong because for him minutes ar 100 not 60.
For example if the correct value Is 4h20 minutes, in the graph Is displayed 4h34 minutes.
Thanks for some solution

Post:

  1. A code for the history_stat sensor.
  2. A code for the mini-graph-card with this sensor which seems to be WRONG for you.
  3. Two screenshots: for the card mentioned above and for the conventional “history-graph” with the same sensor and same “hours_to_show”.

Hi all,
I would like to add an icon (battery) next to the temperature to show the battery level of this probe?
Or an other place in this card, and maybe more and more icon to show state of heating, cooling,… everything in same card.

image

type: custom:mini-graph-card
name: Température 24h
icon: mdi:home-thermometer-outline
entities:
  - entity: sensor.temperature_11
    name: Séjour
    show_state: true
  - entity: sensor.temperature_8
    name: Extérieur
    show_state: true
    y_axis: secondary
hours_to_show: 24
points_per_hour: 2
hour24: true
line_width: 2
show:
  labels: true
  name: true
  icon: true
  labels_secondary: true

Any one know how do this?
Thanks

wow, nice indeed!

I threw all graphs in asingle grid 3, and would love to set the colors in the main anchor… havent been able to find a way to do that. can we at all?

type: grid
columns: 3
square: false
cards:
  - <<: &graph
      type: custom:mini-graph-card
      card_mod:
        style: |
          .name {
            font-size: 10px;
          }
          .header {
            padding-bottom: 0px;
          }
          .states {
            padding-bottom: 0px;
            font-size: 6px;
          }
          ha-card {
            height: 100px !important;
            padding-top: 4px !important;
          }
      hours_to_show: 4
      font_size: 50
      points_per_hour: 30
      show:
        icon: false
        state: true
        legend: false
        fill: fade
    name: Living
    entities:
      - entity: sensor.temperatuur_living
        color: gold # <-- move to main config?
      - entity: sensor.luchtvochtigheid_living
        color: blue # move to main config?
        y_axis: secondary

was looking for a primary graph and secondary graph color (or axis maybe?), so we could add that to the anchor, and not have to repeat the on all entities individually
a bit like we can do:

labels_secondary: true

Probably best suited for a decluttering-card.

solution

yup:

default:
  graph: line

card:
  type: custom:mini-graph-card
  card_mod:
    style: |
      .name {
        font-size: 10px;
      }
      .header {
        padding-bottom: 0px;
      }
      .states {
        padding-bottom: 0px;
        font-size: 6px;
      }
      ha-card {
        height: 100px !important;
        padding-top: 4px !important;
      }
  hours_to_show: 4
  font_size: 50
  points_per_hour: 30
  show:
    graph: '[[graph]]'
    icon: false
    state: true
    legend: false
    fill: fade
    animate: true
  name: '[[name]]'
  entities:
    - entity: '[[sensor1]]'
      color: gold
    - entity: '[[sensor2]]'
      y_axis: secondary

and card config in dashboard:

type: grid
columns: 2
square: false
cards:
  - type: custom:decluttering-card
    template: temp_humidity_graph
    variables:
      - graph: bar
      - name: Living
      - sensor1: sensor.temperatuur_living
      - sensor2: sensor.luchtvochtigheid_living

  - type: custom:decluttering-card
    template: temp_humidity_graph
    variables:
      - name: Masters
      - sensor1: sensor.master_bedroom_hygro_temp_temperature
      - sensor2: sensor.master_bedroom_hygro_temp_humidity

  - type: custom:decluttering-card
    template: temp_humidity_graph
    variables:
     etc etc

very nice indeed, thanks!