Lovelace: mini graph card

[haze.1986 (Hay Kay)]

color of contents within the “style box”

[Ildar_Gabdullin]

The “style box” is not a native card’s feature.
This is a card-mod trick.
You may put whatever you want into this box of any color.

[haze.1986 (Hay Kay)]

Hi sorry I might have not been clear enough, would I be able to have the contents of the style box have the color based on different state value? Do I need to look more into card-mod for this?

[Ildar_Gabdullin]

@haze.1986

would I be able to have the contents of the style box have the color based on different state value?

Whatever you want using jinjia & state objects.

@haze.1986

Do I need to look more into card-mod for this?

As always - we are not supposed to use smth just by “copy/paste”.
Card-mod will allow you to set CSS properties.

[TommySharpNZ (Tommy)]

Probably a super simple thing but I can’t figure out or find any way to show the timeline at the bottom that will tell me the time of day?

[parautenbach (Pieter Rautenbach)]

You can’t — it’s kind of a feature. Have a look at ApexCharts card - A highly customizable graph card as an alternative.

[jchh (my username is my initials (and my first name isn't John))]

does this still work? I cannot get it to work for me.

[Ildar_Gabdullin]

It works as I already demonstrated in your Github issue.
Show your SHORT code which does not work.

[jchh (my username is my initials (and my first name isn't John))]

Hi - I have tried it now for hours before posting and thought I should not continue that other thread as it is a different topic:

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.outside_temp
        state_adaptive_color: true
        show_fill: false
      - entity: sensor.hottest_temp
        color: grey
        y_axis: secondary
      - entity: sensor.coolest_temp
        color: var(--paper-card-background-color)
        y_axis: secondary
    [...]
    card_mod:
      style: |
        .fill { white;
          opacity: 1 !important;
        }

thanks.

[Ildar_Gabdullin]

@jchh

    card_mod:
      style: |
        .fill { white;
          opacity: 1 !important;
        }

Made an an error while copy/paste.
Find a proper code here.

[jchh (my username is my initials (and my first name isn't John))]

Thanks. Is card_mod supposed to be there (I have tried it with and without and it still does not work for me).

  - type: custom:mini-graph-card
    [...]
    card_mod:
      style: |
        .fill {
          fill: white;
          opacity: 1 !important;
        }

[Ildar_Gabdullin]

@jchh

Is card_mod supposed to be there

Yes, was answered here.
Take my example from that issue, just put your own sensors - check if it works.

[jchh (my username is my initials (and my first name isn't John))]

I used your example exactly from your post (my sensors) and here and it does not work for me - I still have transparency.

[Ildar_Gabdullin]

It works here:

Finally, my very quiet & humble question: do you have card-mod installed? ))

[jchh (my username is my initials (and my first name isn't John))]

I totally understand you asking that question but, yes, I do

…strange, isn’t it?

edit: If I change ‘white’ to ‘back’ the fill disappears, so card-mod is doing something.

    card_mod:
      style: |
        .fill {
          fill: black;
          opacity: 1 !important;
        }

[Ildar_Gabdullin]

Write me a PM. Otherwise we will occupy the thread)

[OzStone (Dan)]

Is there any way to only show the state on a mouse hover or on a tap of the point in question?
(but not show the state otherwise)

If I turn off state, then it doesn’t show on hover.

show:
  fill: false
  name: false
  icon: false
  state: false

Thanks for making this card!

Here’s my use case:
This is a 24-hour temperature graph of the different rooms in my house + 2 outside temperatures. I’m aiming for a minimalistic/simple look, but want to see the specific temperature when I interact with the graph.

---

How it looks if state is turned on and a point is selected. (Ideally, I wouldn’t want the graph to shift down when the state was shown only on hover)

[mikesweden (Mike)]

Thank you for this very nice card! I’ve been running an older version for a long time and just installed the latest but I get a triangle that looks like a warning, and I can’t find an error message:

[parautenbach (Pieter Rautenbach)]

Did you try a hard refresh or clear your cache?

[mikesweden (Mike)]

Thank you very much for your answer! I have tried hard refresh and clear cache but the problem remains, the triangle is there. I have gone back to the old version (not sure what version numer or where I can check) to get rid of the triangle. I would of course like to use the newer version if it was possible.