Guidance for displaying an attribute containing a list

Configuration Frontend
1

I have the below entity (from Octopus energy integration) and would like to render the list(?) in the forecast attribute as a bar chart with each bar coloured according to the greenness_index or is_highlighted value. I’ve found the mini-graph-card plugin, but I’m struggling to figure out how to process the list in order to pass the data to this card correctly. Can anyone offer some pointers, please? I’ve tried googling, but I’m not even sure what keywords to search for :sweat_smile:

state_class: total
next_start: "2024-04-21T22:00:00+00:00"
next_end: "2024-04-22T05:00:00+00:00"
forecast:
  - start: "2024-04-21T22:00:00+00:00"
    end: "2024-04-22T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 12
    is_highlighted: false
  - start: "2024-04-22T22:00:00+00:00"
    end: "2024-04-23T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 17
    is_highlighted: false
  - start: "2024-04-23T22:00:00+00:00"
    end: "2024-04-24T05:00:00+00:00"
    greenness_index: MEDIUM
    greenness_score: 43
    is_highlighted: true
  - start: "2024-04-24T22:00:00+00:00"
    end: "2024-04-25T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 20
    is_highlighted: false
  - start: "2024-04-25T22:00:00+00:00"
    end: "2024-04-26T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 11
    is_highlighted: false
  - start: "2024-04-26T22:00:00+00:00"
    end: "2024-04-27T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 16
    is_highlighted: false
  - start: "2024-04-27T22:00:00+00:00"
    end: "2024-04-28T05:00:00+00:00"
    greenness_index: LOW
    greenness_score: 21
    is_highlighted: false
data_last_retrieved: "2024-04-21T11:48:12.426529+01:00"
icon: mdi:leaf
friendly_name: Greenness Forecast Current Index
2

Are you sure the Mini Graph Card is designed to do that?

According to its description, it graphs the history of an entity’s state value.

Screenshot_20240421-095447~2
Screenshot_20240421-095447~21299×282 35.8 KB

I took a quick look at its documentation and what you can pass to it is an entity_id. What gives you the impression you can pass a list to it?

3

Look at the Apex Charts frontend component in HACS. You can provide your own generator function.