Lovelace: mini graph card

Catman · December 15, 2023, 3:43am

So sorry, I have not checked in for quite awhile! I hammered away at it and figured it out.
This is what I was trying to do:

type: vertical-stack
title: ''
cards:
  - type: horizontal-stack
    title: ''
    cards:
      - type: custom:mini-graph-card
        entities:
          - sensor.autumn_winds_elk_grove_greens_pm2_5
        color_thresholds:
          - value: 0
            color: '#00ff00'
          - value: 50
            color: '#ffff00'
          - value: 100
            color: '#ffa500'
          - value: 150
            color: '#ff0000'
          - value: 200
            color: '#ff00ff'
        show:
          fill: fade
        style: |
          ha-card .states.flex{
          font-weight: bold;
          }
        name: Elk Grove
        icon: mdi:none
        unit: PM2.5
        decimals: 0
  - type: horizontal-stack
    title: ''
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.air_quality_hm330_pm25
            color: green
            name: HM330
            show_state: true
          - entity: sensor.air_quality_pm900_pm25
            color: blue
            name: PM900
            show_state: true
        name: Indoor Air Quality
        icon: mdi:none
        unit: PM2.5
        decimals: 0
        show:
          fill: fade
        style: |
          ha-card .states.flex{
          font-weight: bold;
          }
        color_thresholds:
          - value: 0
            color: '#00ff00'
          - value: 50
            color: '#ffff00'
          - value: 100
            color: '#ffa500'
          - value: 150
            color: '#ff0000'
          - value: 200
            color: '#ff00ff'
  - type: custom:mini-graph-card
    entities:
      - sensor.wirelesstag_tag_a_temperature
    graph: line
    detail: 2
    name: Back Patio Temp
    show:
      fill: true
      average: true
      extrema: true
    style: |
      ha-card .states.flex{
        font-weight: bold;
      }
    color_thresholds:
      - value: 45
        color: '#0000ff'
      - value: 60
        color: '#00ff00'
      - value: 75
        color: '#ffff00'
      - value: 90
        color: '#ff0000'
  - type: custom:mini-graph-card
    entities:
      - sensor.processor_temperature
    graph: line
    detail: 2
    show:
      fill: true

gjaevert · December 15, 2023, 8:37pm

I have made this hourly electricity price graph, but I would like to have a vertical line that shows which is the current hour.
That is possible with Apex, but I have not found this for mini-graph-card, does anyone know if its possible?

Ildar_Gabdullin · December 15, 2023, 9:30pm

What is a source of these “hourly prices”?
Are the latest readings correspond to the latest hour?
If yes - then (hard to believe!) the “current hour” in this HOURLY graph is the LATEST one:

since the “mini-graph-card” (like a conventional History graph) takes data from DB where the latest entry correspond to the latest hour (if readings are made regularly).

gjaevert · December 16, 2023, 7:07am

The source is actually 48h individual sensor, which represents prices today and tomorrow. So your suggestion unfortunately won’t work.

I have thought of solving it through styling, “if entity value == current price value: then style color x”
Will see if I can try that

Ildar_Gabdullin · December 16, 2023, 7:35am

This may be achieved this way:

and you need to set the “INDEX” to a proper value.

kruton · December 16, 2023, 2:00pm

You can achieve that by setting state_adaptive_color to true for the entity in scope

Code example:

entities:
  - entity: sensor.average_temperature
    index: 0
    show_state: false
    state_adaptive_color: true

tbandras · December 18, 2023, 7:45pm

I am trying to do a replica of the energy Dashboard graph, but with different sensors. This is what comes closest to it - is it possible to do a similar setup, but with bars, so that the X axis would be somewhere in the middle acting as ‘0’?

Not sure how this graph was made, but this is what I am trying to achieve.

parautenbach · December 19, 2023, 3:53am

Set symmetric upper and lower bounds for the y-axis. You’d need to choose the value wisely, since it is then static. I don’t know of a dynamic way to do this.

Ildar_Gabdullin · December 19, 2023, 8:37am

This graph was made based on same ideas as my code, and you can see its code in that post.

sloma · December 19, 2023, 11:50am

I know that at the moment number formatting is broken and does not respect user profile setting, but is there a way to change this via card mod? I just don’t want to have any commas or dots in my numbers.

Ildar_Gabdullin · December 19, 2023, 12:03pm

“Broken” is a wrong word.
Just not following user profile, nothing else.
As well as some STANDARD ui elements like input_number entity-row.
Same entity:

sloma · December 19, 2023, 4:25pm

OK, but is there a way around it?

sloma · December 20, 2023, 1:57pm

I have another question, is there a way to exlude extreme values from a graph? I get sporadic signal loss from one of the sensors, and it is affecting the graph:

Ildar_Gabdullin · December 20, 2023, 2:00pm

No, the card is not filtering data. It may only perform interpolation.
Suggest to perform filtering on the entity’s level.

YuTendo · December 26, 2023, 10:20pm

Hello

I am looking for a way to change the date format that is displayed along with the extreme values (min/max). Right now it looks like “weekday, day, time” and I just want to display “weekday, time”.

I would appreciate any help or pointers. Thank you!

mr_aleks · December 27, 2023, 4:57pm

Is it possible to do something so that both values on the left and right change depending on where I move the mouse cursor on the graph strip to display the current value? My values change only from the left, regardless of where the mouse cursor points to the first or second graph? This is necessary so that you can quickly compare the values of two graphs…

Ildar_Gabdullin · December 27, 2023, 5:03pm

Please elaborate with screenshots, I do not get what you described.

mr_aleks · December 27, 2023, 5:16pm

I have a graph like this with two entities. Screen 1

Screen 2. if I hover over any point on the orange graph, the value only changes from the left, as it should be in my opinion

Screen 3. but if I point at the blue graph, the value changes which is from the left and not the right which is blue

PS I had to glue the screenshots together because… This “An error occurred: Sorry, new users can only put one embedded media item in a post.”

Ildar_Gabdullin · December 27, 2023, 6:21pm

There is a related issue in GitHub for this.
The left value on Screenshot 3 must be of blue color.
The left state is always used to show a selected point, it is by a design.
So, only a wrong color is the issue.

stephanschleichstr13 · December 29, 2023, 2:50pm

is there a way to select only one entitiy in the graph to check for a moment the points? normally i know that legends are pushable and than only these are showing up

type: custom:mini-graph-card
entities:
  - entity: sensor.wohnzimmer_temperatursensor_snzb_02_temperature
    show_state: true
    name: Temperatur
  - entity: sensor.wohnzimmer_temperatursensor_snzb_02_humidity
    show_state: true
    name: Humidity
    y_axis: secondary
  - entity: climate.wohnzimmer_comet_dect
    attribute: temperature
    show_state: true
    name: Thermostat
hours_to_show: 24
points_per_hour: 1
line_width: 3
hour24: ture
show:
  name: false
  legend: true
  icon: false
  labels: true
  labels_secondary: true