Lovelace: mini graph card

IMHO the situation is strange.
Yes, this HA version has some issues with Recorder, history-graph & Logbook.
From other side, it is strange that - w/o any reboots - history-graph shows SOMETHING and mini-graph-card does NOT.
Whose fault it is? Bugs in HA? Or mini-graph-card is just NOT ADAPTED to some new requirements, I don’t know…

Then it is strange that rebooting HA (all-in-one) could not help.

I agree. I don’t remember if I just restarted HA or restarted the Container. This time I rebooted the host.

Btw, correct your code:

    extrema: true

is used inside “show” option.

    index: 0

is not a supported option.

And consider either closing your issue or commenting about your current status & possible reasons.

OK, thanks. :+1:

Only after the third restart did it somehow be fixed.
The question is what is wrong and how long it will last

Do not know… Myself experienced some issues with history-graph. The glitch came after some time after restart and gone after next restart.

I have a stupid question: I see peoples’ examples and they show the world MIN and MAX but I don’t know how to show these in my card? I see the code and I can’t find it so I’m confused. I will continue to play but if I am missing something basic (which I am sure I am) can you point me in the right direction?



  extrema: true

Thank you! I don’t know how or why but I popped up after I checked your recommendation! Thanks!

Maybe related.

1 Like

@VDRainer: Thanks for sharing.

I have a nice-looking card at the minute but want it to show the time of the next high/ low tide.

Would be great if I can show the data points on the peaks, or combine these to have a single graph with the visible time. Something in the top right that shows the next high/low tide.

Any help on here would be great

type: custom:stack-in-card
  margin: false
  box_shadow: false
  background: false
  - type: grid
    square: false
    columns: 2
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 1px !important;
        primary: Filey Tides
        icon: mdi:waves
        icon_color: blue
        tap_action: none
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
    alignment: left
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
    alignment: left
      - type: template
          action: none
        content: State - {{ states(entity) }}
        entity: sensor.filey_tide
        icon: |
          {% if is_state("sensor.filey_tide", "Falling") %}
          {% else %}
          {% endif %}
        icon_color: red
          action: none
          action: none
  - type: custom:mini-graph-card
      - entity: sensor.filey_tide
        attribute: next_high_tide_in
        name: High Tide
        color: '#2196f3'
      - entity: sensor.filey_tide
        attribute: next_low_tide_in
        name: Low Tide
        color: '#f44336'
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
      name: false
      icon: false
      state: false
      legend: true
      fill: fade
      labels: true
      hour24: true
1 Like

Can you please share the code for these cards?

Hello at all, I think I don’t unterstand the feature of an input_number helper for displaying night and day ? maybe you can explain how to get this nice desing online ?

Wouldn’t it be a good idea to allow a setting for maybe :slight_smile:

  show_daynight: true 
  show_daycoloer: #42344 (ex.)
  show_nightcolor: #98644 (ex.)

to get this bars dynamic drawn ?

Greetings from austria


Quick question. How can I show 2 values in a mini-graph. One aligned to the left and one aligned to the right?

Just specify 2 entities (take any example from here) - automatically one state will be on the left, another - on the right.

What are you using to do your speed test can you share your code?

Speedtest integration!

Hi All, just starting out to use mini graph and working through the examples, just wondering if anyone can share how I can set the temp and humidity within the “style” to change color based on state? Would I also be able to use 2 different ranges? one for temp and the other for humidity.

type: custom:mini-graph-card
  - entity: sensor.mbr_heatindex
    name: H-I
    show_line: false
    show_points: false
    show_legend: false
    state_adaptive_color: true
  - entity: sensor.rm4mini_temperature_round
    name: Temperature
    show_line: false
    show_points: false
    show_legend: false
  - entity: sensor.rm4mini_humidity_round
    name: Humidity
    show_line: false
    show_points: false
    show_legend: false
    y_axis: secondary
name: MBR
decimals: 1
hours_to_show: 72
points_per_hour: 6
icon: ' '
icon_adaptive_color: true
line_width: 1
  - value: 20
    color: '#f39c12'
  - value: 30
    color: '#d35400'
  - value: 40
    color: '#c0392b'
  labels: false
  labels_secondary: false
style: |
  ha-card .states.flex::after {
    content: "{{states('sensor.rm4mini_temperature_round')}} °C \A {{states('sensor.rm4mini_humidity_round')}} %";
    white-space: pre;
    background-color: rgba(80,80,80,0.1);
    padding: 5px 5px 5px 5px;
    border-radius: 5px;