How to visualize hourly UV index from weather forecast API in a chart?

Configuration Frontend
1

What kind of card would you recommend for that? Thanks!

2

I use the Australian ARPANZA service via a rest sensor and an apexchart for display:

Screenshot 2024-08-12 at 11-23-50 Administration – Home Assistant

type: custom:apexcharts-card
apex_config:
  chart:
    height: 100%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 24h
header:
  show: true
  show_states: true
  title: UV Index
experimental:
  color_threshold: true
yaxis:
  - id: left
    decimals: 1
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.uv_index
    stroke_width: 2
    type: line
    color: rgb(192,192,192)
    yaxis_id: left
    float_precision: 0
    statistics:
      type: max
      period: 5minute
      align: middle
    show:
      datalabels: false
      extremas: false
      name_in_header: false
    color_threshold:
      - color: '#b200ff'
        value: 10.5
      - color: '#e45e65'
        value: 7.5
      - color: '#ff8000'
        value: 5.5
      - color: '#e0b400'
        value: 2.5
      - color: '#0da035'
        value: 0
    header_actions:
      tap_action:
        action: more-info

If you want a bar chart that can be done too.

Screenshot 2024-08-12 at 11-23-02 Administration – Home Assistant

type: custom:apexcharts-card
apex_config:
  chart:
    height: 100%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 24h
header:
  show: true
  show_states: true
  title: UV Index
experimental:
  color_threshold: true
yaxis:
  - id: left
    decimals: 1
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.uv_index
    type: column
    float_precision: 1
    group_by:
      func: last
      duration: 1h
    show:
      datalabels: false
      extremas: false
      name_in_header: false
    color_threshold:
      - color: '#b200ff'
        value: 10.5
      - color: '#e45e65'
        value: 7.5
      - color: '#ff8000'
        value: 5.5
      - color: '#e0b400'
        value: 2.5
      - color: '#0da035'
        value: 0
    header_actions:
      tap_action:
        action: more-info
1 Like
3

Thanks. The issue is this is a forecast for the future (hourly) so I have a list of values. Can that be fed to a chart?

4

Possibly, have a look here: Apexcharts and Openweathermap Forecast examples

1 Like