Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chart isn't displayed properly in dashboard #685

Open
4 tasks done
PetziAt opened this issue Mar 28, 2024 · 1 comment
Open
4 tasks done

chart isn't displayed properly in dashboard #685

PetziAt opened this issue Mar 28, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@PetziAt
Copy link

PetziAt commented Mar 28, 2024

Checklist

  • I updated the card to the latest version available
  • I cleared the cache of my browser
  • I verified that I'm really running the lastest version in my browser console
  • 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
Bildschirmfoto vom 2024-03-28 07-01-08
Bildschirmfoto vom 2024-03-28 07-35-26

Expected behavior
Displaying in the right way.
Bildschirmfoto vom 2024-03-28 07-54-44

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

@PetziAt PetziAt added the bug Something isn't working label Mar 28, 2024
@Styx85
Copy link

Styx85 commented May 8, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants