chart isn't displayed properly in dashboard

[PetziAt]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the lastest version in my browser console
• [x] I checked if there is another issue opened with the same problem

Describe the bug After initial load of the dashboard the view of the chart is truncated on the right side. Display is ending on different points on every reload. Using "update_interval" is resetting the display error.

I also have an error "Unexpected value NaN parsing height attribute. apexcharts-card.js:1:187098" but I'm not sure about the dependency.

Use or removing of "experimental" has no impact.

Just this chart is affected on my site. Others are working fine.

Version of the card Version: v2.0.4

To Reproduce This is the configuration I used:

graph_span: 24h
header:
  title: 'Strompreis: Heute'
  show: true
  show_states: true
  colorize_states: true
span:
  start: day
now:
  show: true
  label: Now
series:
  - entity: sensor.epex_spot_data_net_price
    type: column
    extend_to: end
    unit: ct/kWh
    float_precision: 3
    yaxis_id: preis
    color: grey
    show:
      in_header: before_now
      extremas: true
      header_color_threshold: true
    color_threshold:
      - value: 2
        color: 00ed01
      - value: 3
        color: 3af901
      - value: 4
        color: 87fa00
      - value: 5
        color: cefb02
      - value: 6
        color: eeff00
      - value: 7
        color: ffde1a
      - value: 8
        color: ffa700
      - value: 9
        color: ff8d00
      - value: 10
        color: ff7400
      - value: 11
        color: ff4d00
      - value: 12
        color: ff4d00
      - value: 13
        color: ff0000
      - value: 14
        color: e60000
      - value: 18
        color: cc0000
      - value: 20
        color: b30000
      - value: 22
        color: '990000'
      - value: 26
        color: '800000'
      - value: 28
        color: '660000'
      - value: 30
        color: 4d0000
      - value: 40
        color: '330000'
    data_generator: |
      return entity.attributes.data.map((entry) => {
        return [new Date(entry.start_time), entry.price_ct_per_kwh];
      });
yaxis:
  - id: preis
    decimals: 0
    min: 0
    apex_config:
      title:
        text: ct/kWh
      tickAmount: 6
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59

Screenshots

Expected behavior Displaying in the right way.

Desktop (please complete the following information):

• tested on different browsers such as Firefox, Brave, Chrome

Smartphone (please complete the following information):

• Companion App

Additional context

[Styx85]

Have you added the colors as color_list in the main config part?

  type: custom:apexcharts-card
  graph_span: 48h
  experimental:
    color_threshold: true
  color_list:
    - 00ed01
    - 3af901
    - 87fa00
    - cefb02

[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.