kalkih / mini-graph-card

Minimalistic graph card for Home Assistant Lovelace UI
MIT License
2.87k stars 231 forks source link

Is it possible to color each point/bar based on its own value? #1051

Closed psyhomb closed 6 months ago

psyhomb commented 6 months ago

This is my current configuration and if I set show.graph to line, line will be colored as expected but if I change it to bar all points/bars will be colored to first color from the list despite the value, in my case to green (#17a355).

type: custom:mini-graph-card
name: PM2.5
entities:
  - entity: sensor.mi_air_purifier_pro_pm2_5
    show_state: true
    state_adaptive_color: true
font_size_header: 13
font_size: 65
aggregate_func: max
hours_to_show: 24
points_per_hour: 2
line_width: 4
color_thresholds:
  - value: 12
    color: '#17a355'
  - value: 35
    color: '#e9d109'
  - value: 55
    color: '#ff8c00'
  - value: 150
    color: '#ea270d'
  - value: 250
    color: '#7c2c85'
  - value: 500
    color: '#66001f'
animate: true
hour24: true
show:
  graph: bar
  labels: true
  icon: false

This point/bar should be colored to yellow (#e9d109) and a few other points/bars on this picture (12 < x < 35). 2024-01-08_10-56

Is it possible to color each point/bar based on its own value?

psyhomb commented 6 months ago

It was my mistake, I've fixed color_thresholds range and now everything looks good.

type: custom:mini-graph-card
name: PM2.5
entities:
  - entity: sensor.mi_air_purifier_pro_pm2_5
    show_state: true
    state_adaptive_color: true
font_size_header: 13
font_size: 65
aggregate_func: max
hours_to_show: 24
points_per_hour: 2
line_width: 4
color_thresholds:
  - value: 0
    color: '#17a355'
  - value: 12
    color: '#e9d109'
  - value: 35
    color: '#ff8c00'
  - value: 55
    color: '#ea270d'
  - value: 150
    color: '#7c2c85'
  - value: 250
    color: '#66001f'
animate: true
hour24: true
show:
  graph: bar
  labels: true
  icon: false

2024-01-08_11-38