Lovelace: mini graph card

[typxxi (wolf)]

I am just digging into mini graph card and my current issue is the question of how the grouped _by: hour / date work beyond date or in particular in that “interval” cause I have not found any example about that.

group_by: interval
Where can I define that interval for weekly or monthly or so ?

I will need it for power consumption and I hve already the hourly, daily, weekly, monthly sensors set up that count the values up and will be rested at midnight in case day or week or month ends. Any ideas or examples ?

SOLVED by me a week later and described below or here

[Dragonu]

Hi,
I love your graph for the Purifier.
Are there any chances to share your configs for the mini graph?
Maybe somewhere on github … or at least share here the mini graph …
Thanks

[binaryMind]

Hi there!

Sure, it’s not a secret or something I actually already did in Button card thread here. You will find latest pic and config for all the components.

[moonthisisgood (Moon Goo)]

Anyone knows if I am able to do some math functions (/1000) for one of the entities in the graph?

[paddy0174 (Patrick)]

Have you tried this:

ApexCharts card - A highly customizable graph card

Hi folks, I’ve built a new card to display some graphs in Lovelace . It is in its early stage and is not meant to replace the mini-graph-card at all. It gives some new possibilities to display data in Home-Assistant and has some extensive customizability. It is based on ApexChartsJS, and you’ll find all kind of examples of what you could build over here [Image] Usage stable releases documentation can be found here beta/dev releases documentation ca…

[Ildar_Gabdullin]

@moonthisisgood

Anyone knows if I am able to do some math functions (/1000) for one of the entities in the graph?

Try using “value_factor” option.

[Simon_Bunn]

I am trying to set color thresholds but not seeing any result. I ahve three pen traces on the trend and want only one of them to be blue if positive and red if negative.

type: custom:mini-graph-card
entities:
  - entity: sensor.meter_power_a
  - entity: sensor.meter_power_b
  - entity: sensor.meter_power_c
    color_thresholds:
      - color: blue
        value: 100
      - color: red
        value: -100
name: Solar Power
hours_to_show: 24
points_per_hour: 4

[typxxi (wolf)]

Change the lines / attributes cause this one works

    color_thresholds:
      - value: 100
        color: blue
      - value: -100
        color: red

at least here - used for weight / scale with different threshold values of cause.

[Ildar_Gabdullin]

@Simon_Bunn

color_thresholds:

Wrong indentation. This is a property of the card, not for some entity.

[LarsA]

hey friends of ha.

I actually want to make a graph like in the picture.

That if I have power left over from the solar panels, the beam goes up, and I consume more power than I generate, the beam goes down and turns red…

Who already made this? And can share the code with me?

[maximtg (Maxim)]

Hello,
I am trying to change the color of the temperature value based on some predefined values ​​but I am not very good with css and consequently it does not work.

This is the code:

      - type: custom:mini-graph-card
        style: |
          ha-card .states.flex .state .state__value.ellipsis{
          {% if is_state_attr('sensor.ble_moisture_xxxxx', 'median', >=21)}
            color: orange;
          {% elif is_state_attr('sensor.ble_moisture_xxxxx', 'median', <=20)}
            color: red;
          {% endif %}
            color: green;
          }
        entities:
          - entity: sensor.ble_moisture_xxxxxxx

The color is always white as you can see from the image below:

I took a cue with this portion of code I found on this post:

style: |
  ha-card .states.flex .state .state__value.ellipsis{
    color: orange;
  }

Thank you for you help!

[typxxi (wolf)]

@maximtg

change the color of the temperature value

I can only see a 20% figure and no temperature °C
From my experience you will be able to change the white 20 but not the colour of the unit % which is a tinted white. You can choose orange and the 20 will be orange and the % will be in a different kind of orange.

But I guess you want to let the 20 figure display or represent the sensors value / color.

[maximtg (Maxim)]

@typxxi You are right, my mistake. The sensor is like a water sensor of a plant and I have also a temp sensor.
Anyway what I would like to do is to change the colour of 20 with the values above. So if the sensor value is >=21 the colour will be organge or if the sensor value is <=20 the sensor value will be red.

I do not care about the kind of colour of “%” or “C°”.

Thanks.

[typxxi (wolf)]

I had used this to change color and size of the particular figure

style: |
  ha-card .states.flex {
    color: white;
    font-size: 22px;
  }

and it worked out for me.

I guess you got the wrong object. So you might try this one out first with orange instead of my white and see if that works. If it does work then change color depending on your measurement results. I am not an expert but had played around with this particular topic recently and all the things possible and tricks Ildar_Gabdullin had shown here before.

[Ildar_Gabdullin]

@maximtg

{% if is_state_attr('sensor.ble_moisture_xxxxx', 'median', >=21)}

Should be:
{% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
Regarding the styling itself - did not check it by myself, use this tutorial.

[Ildar_Gabdullin]

@typxxi

From my experience you will be able to change the white 20 but not the colour of the unit % which is a tinted white. You can choose orange and the 20 will be orange and the % will be in a different kind of orange.

Look at this, there are 2 options:

1. Setting a color for the state also affects on a color for it’s unit (same color but a bit pale).
2. Setting different colors for the state’s value & unit.
   
   

[typxxi (wolf)]

yes, we had this topic last week and it was about that pale issus cause figure and unit will always look different colorwise. You can not get them matched, you will get white and kind of grey, red and a different red. That’s why I mentioned it cause I had played around with that last week when you had shown me the examples. Just a bit weird that you can not get the exact same colour for the unit that you had chosen for the figure.

[Ildar_Gabdullin]

@typxxi

You can not get them matched

No, you can:

type: custom:mini-graph-card
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
style: |
  ha-card .states.flex .state .state__value.ellipsis {
    color: magenta;
  }
  ha-card .states.flex .state .state__uom.ellipsis {
    color: magenta;
    opacity: 1;
  }