Lovelace: mini graph card

Look at this (card-mod):

type: 'custom:mini-graph-card'
style:
  .icon ha-icon:
    $: |
      ha-svg-icon {
        color: red !important;
      }
entities:
...

But here I can select ONE colour - ‘red’.
To set a colour dependingly on some entity’s value I think you must use something like “config-template-card” only …
Or you can ask the author of ‘mini-graph-card’ to add a feature “change colour accordingly to threashold”…

1 Like

Card-mod supports templates. It’s right there in the docs with an example.

1 Like

My mistake, you’re right!

изображение

type: 'custom:mini-graph-card'
style:
  .icon ha-icon:
    $: |
      ha-svg-icon {
      {% if states('sensor.calc_co2_diff_cg1_cg2')|float >= 30%}
        color: red !important;
      {% elif states('sensor.calc_co2_diff_cg1_cg2')|float >= 25%}
        color: cyan !important;
      {% elif states('sensor.calc_co2_diff_cg1_cg2')|float >= 23%}
        color: magenta !important;
      {% else %}
        color: green !important;
      {% endif %}
      }
entities:
  - entity: sensor.calc_co2_diff_cg1_cg2
    name: ''
    unit: ''
    show_state: true
    show_indicator: false
    show_graph: true
    show_line: true
    show_fill: true
    show_points: false
    show_legend: false
    state_adaptive_color: false
    fixed_value: false
...
color_thresholds:
  - value: 0
    color: green
  - value: 23
    color: magenta
  - value: 25
    color: cyan
  - value: 30
    color: red
color_thresholds_transition: hard
1 Like

Thanks!!!

type: 'custom:mini-graph-card'
style:
  .icon ha-icon:
    $: |
      ha-svg-icon {
      {% if states('sensor.xxx_remaining_range_total')|float <= 120%}
        color: orange !important;
      {% elif states('sensor.xxx_remaining_range_total')|float <= 80%}
        color: red !important;
      {% else %}
        color: white !important;
      {% endif %}
      }
entities:
  - entity: sensor.xxx_remaining_range_total
show:
  legend: false
color_thresholds:
  - value: 140
    color: '#3498DB'
  - value: 40
    color: red
name: xxx
line_width: 6
font_size: 75
animate: true
lower_bound: 0
upper_bound: 850
hours_to_show: 360
points_per_hour: 0.1
icon: 'mdi:gas-station'


1 Like

This is one of my favourite cards, however I seem to have an issue with the ‘delta’ function. If the diference between two days in my consumption calculation is next to zero, (1684.14 kWh > 1684.15 kWh) bar and value for this day are1684.15 kWh instead of 0.01 kWh. Also if the value for both days is identical, delta should be 0, no?

000131

upper_bound: 40 - this is why you don’t see the full height of the bar.

Would be very greatful someone could help…

Problem solved, I don’t know how though. I only changed the aggregate function to sum and then back to delta. Now it shows 0 in case there is no consumption…

Anyone else facing issues with graph color when actual value is very close to top or bottom of color range? Please see these 2 screenshots below. The upper line (black) represents inside temperature (|BTW you can see the very same error on the lower line, but with values being above, but very close to lower limit; line should become green instead of black):
image
The color thresholds are defines as follow:

        color_thresholds:
          - value: 25
            color: var(--alert-text)
          - value: 10
            color: var(--yellowish)
          - value: 0
            color: var(--greenish)
          - value: -10
            color: var(--cyanish)

Now, it is enough to change slightly the highest color threshold (from 25 to 24 degrees) to receive what it should be:
image

Obviously this is not permanent solution, since if temperature changes to one closer to threshold issue reappears.
Is there any permanent fix to this? Is it a bug?

I am using card to show daily energy consumption in last 15 days. It does show MIN & MAX values. But is it also possible to show average value?
Capture

Actually you are not displaying max & min values on the screen.
Look at this:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
color_thresholds:
  - value: 19.5
    color: '#00ff00'
  - value: 20
    color: '#ff0000'
  - value: 20.5
    color: '#0000ff'

Do not bother about color_threashold - it is left from my test card.

@Ildar_Gabdullin, I think what @AbDhops is asking is how to display an average line on the graph, or to show the average between the two extrema values on the left (which happen to be the min and max). I’m assuming the latter but perhaps the defaults that you’ve shown would suffice too.

@AbDhops if you want to draw an average line then you can search the forums – there are a few examples. Basically, you’ll need to create a sensor that you set to the average using an automation (or you could use the stats integration).

1 Like

@parautenbach : Correct. Thanks. Got the idea…
@Ildar_Gabdullin: Thanks for prompt response… .

Do you mean this?
изображение

@Ildar_Gabdullin, yes…

Is it possible to graph line and bars on the same graph?

According to this:


not possible to have both line & bar graphs ((

Actually I prefer not to use a bar graph.
As I understood, a value for each DISPLAYED point is calculated dependingly on:

  • hours_to_show;
  • points_per_hour;
  • aggregate_func;
  • sensor’s value.
    It is an interpolation.
    For the bar graph there are less displayed points than for the line graph.
    That means that the bar graph may not reflect a real curve.

My proposal - use a line power consumption graph + line average graph.

1 Like

can anyone help me explain this in simple english / dutch. I also have solar panels, and would like to see my weekly consumption in + & -. so green if my net consumption is lower than 0, and red if it is above 0.

Styling the card with “card-mod”:

Changing background color:
Note: this style may be used to make a card transparent.
image

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(50,50,50,0.2);
    }

Background image:
image

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
card_mod:
  style: |
    ha-card {
      background-image: url("/local/images/blue_low_2.jpg");
      background-size: 100% 100%;
    }

All text is colored:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    ha-card {
      color: red;
    }

Colored title & icon:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .header.flex .name.flex {
      color: green;
    }
    .header.flex .icon {
      color: red;
    }

Resized icon:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_co2
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .header.flex .icon {
      --mdc-icon-size: 60px;
    }

Colored state & min/max/avg info:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .states.flex {
      color: orange;
    }
    .info.flex {
      color: red;
    }

Colored state value, colored unit:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .states.flex .state .state__value.ellipsis{
      color: orange;
    }
    .states.flex .state .state__uom.ellipsis{
      color: cyan;
    }

Colored info: different colors:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .info.flex .info__item .info__item__type {
      color: red;
    }
    .info.flex .info__item .info__item__value {
      color: green;
    }
    .info.flex .info__item .info__item__time {
      color: cyan;
    }

Colored info: only max:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .info.flex div.info__item:nth-child(3) {
      color: red;
    }

Colored info: only max, different colors:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .info.flex div.info__item:nth-child(3) .info__item__type {
      color: red;
    }
    .info.flex div.info__item:nth-child(3) .info__item__value {
      color: green;
    }
    .info.flex div.info__item:nth-child(3) .info__item__time {
      color: cyan;
    }

Colored labels:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .graph .graph__container .graph__labels {
      color: red;
    }

Colored labels (different colors):
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .graph .graph__container .graph__labels .label--max {
      color: green;
    }
    .graph .graph__container .graph__labels .label--min {
      color: red;
    }

How to style if secondary Y-axis is present:
Let’s add one more graph and set a style to labels:
изображение

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_temp
    name: Temp
    show_state: true
  - entity: sensor.cleargrass_2_co2
    name: CO2
    show_state: true
    y_axis: secondary
show:
  labels: true
  name: false
  icon: false
  average: false
  extrema: false
  labels_secondary: true
card_mod:
  style: |
    .graph .graph__container .graph__labels {
      color: red;
    }

Also we can style a color for the legend:
изображение

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_temp
    name: Temp
    show_state: true
  - entity: sensor.cleargrass_2_co2
    name: CO2
    show_state: true
    y_axis: secondary
show:
  labels: true
  name: false
  icon: false
  average: false
  extrema: false
  labels_secondary: true
card_mod:
  style: |
    .graph .graph__legend {
      color: red;
    }

Now let’s tune up colors for Y-axis & legend for every graph:
изображение

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_temp
    name: Temp
    show_state: true
    color: red
    state_adaptive_color: true
  - entity: sensor.cleargrass_2_co2
    name: CO2
    show_state: true
    color: green
    state_adaptive_color: true
    y_axis: secondary
show:
  labels: true
  name: false
  icon: false
  average: false
  extrema: false
  labels_secondary: true
card_mod:
  style: |
    .graph .graph__container .graph__labels.--primary.flex {
      color: red;
    }
    .graph .graph__container .graph__labels.--secondary.flex {
      color: green;
    }
    .graph .graph__legend div:nth-child(1) {
        color: red;
    }
    .graph .graph__legend div:nth-child(2) {
        color: green;
    }

Changing font-size:
For each element:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  average: true
  extrema: true
card_mod:
  style: |
    .header.flex .name.flex {
      font-size: 10px;
    }
    .states.flex .state .state__value.ellipsis {
      font-size: 15px;
      align-self: center;
    }
    .states.flex .state .state__uom.ellipsis {
      font-size: 18px;
      align-self: center;
    }
    .info.flex .info__item .info__item__type {
      font-size: 12px;
    }
    .info.flex .info__item .info__item__value {
      font-size: 18px;
    }
    .info.flex .info__item .info__item__time {
      font-size: 8px;
    }
    .graph .graph__container .graph__labels {
      font-size: 18px;
    }

For legend:
изображение

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.cleargrass_1_temp
    name: Temp
    show_state: true
  - entity: sensor.cleargrass_2_co2
    name: CO2
    show_state: true
    y_axis: secondary
show:
  labels: true
  name: false
  icon: false
  average: false
  extrema: false
  labels_secondary: true
card_mod:
  style: |
    .graph .graph__legend {
      font-size: 8px;
    }

Hiding dates for MAX & MIN data:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  extrema: true
card_mod:
  style: |
    .info.flex .info__item .info__item__time {
      display: none;
    }

Hiding MAX or MIN data:
изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
  extrema: true
card_mod:
  style: |
    .info.flex div.info__item:nth-child(1) {
      color: transparent;
    }
    .info.flex div.info__item:nth-child(2) {
      color: red;
    }

Hiding a unit for special cases:
изображение изображение

type: 'custom:mini-graph-card'
entities:
  - sensor.cleargrass_1_temp
show:
  labels: true
card_mod:
  style: |
    .states.flex .state .state__uom.ellipsis {
      {% if states('sensor.cleargrass_1_temp') in ['unavailable','unknown'] %}
        display: none;
      {% endif %}
    }
state_map:
  - value: unavailable
    label: Sensor off
  - value: unknown
    label: Sensor off

Animation - blinking name, resized & rotating icon:
post
1111
aaa


Display an additional info on the card:
post


Display additional text items (prefixes & suffixes):
post
image

Playing with animated curve:
post

One style for all graphs in a stack:
post


Solid fill:
All credits to @menloperk !
post
изображение


Place state values in one line (if you cannot live w/o it):
post
image


Show a graph for the 2nd sensor on the bottom:
post
изображение


Set a color for the last bar:
post
изображение


Place 2 sensors’ states on the left side:
post
image


Display states as a part of the legend:
post
image


Display a unit under the state:
post
image


Display a state & extrema data on the same line:
post
image
All credits to @reste_narquois !

15 Likes

I’m busy with integration my energy consumption and costs. Is there any way to combine the red and blue bars? Or to hide the blue bar, but only show the value when hovering over one of the red bars?

image

2 Likes

Is there a way to group by something less than 1 hour?

I am tracking energy costs, i have 30 minute updates on the tariff but the graph can only group by 1 hour intervals which makes it slightly incorrect.