Firefox, Edge and iOS render graph line in black, but show blue in the legend

[gijs007]

When looking at the graphs on iOS, Microsoft Edge (127.0.2651.74), Firefox (128.0 and older) some graphs have a black line. Even though the colour should be blue, according to the legend.

This can be observed in the below screenshot on the "Current power usage and return graph" (left middle).

Version of the card Version: 2.1.2

To Reproduce This is the configuration I used:

type: custom:apexcharts-card
experimental:
  color_threshold: true
graph_span: 1h
show:
  last_updated: true
apex_config:
  yaxis:
    - id: first
      forceNiceScale: true
      decimalsInFloat: 3
header:
  standard_format: false
  show: true
  show_states: true
  colorize_states: true
  title: Current power usage and return
series:
  - entity: sensor.dsmr_reading_electricity_currently_delivered_watt
    name: Usage
    type: line
    group_by:
      func: last
      duration: 1m
    stroke_width: 5
    show:
      header_color_threshold: true
    color_threshold:
      - value: 0
        color: '#F8CFC9'
      - value: 0.5
        color: '#EE8E81'
      - value: 0.8
        color: '#E44D3A'
      - value: 1.5
        color: '#BC2C1A'
      - value: 3
        color: '#7E1E11'
  - entity: sensor.dsmr_reading_electricity_currently_returned_watt
    name: Return
    type: line
    group_by:
      func: last
      duration: 1m
    stroke_width: 5
    show:
      header_color_threshold: true
    color_threshold:
      - value: 0
        color: '#D4ECE7'
      - value: 0.5
        color: '#9CD3C6'
      - value: 0.8
        color: '#71C1AE'
      - value: 1.5
        color: '#38806F'
      - value: 3
        color: '#19391'

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.