Doesn't support layout_options option in sections panel (Home Assistant v2024.7)

[xiaodong-lx]

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 In sections view(Home Assistant v2024.7), cards could be resized link, even custom cards(such as custom:webrtc-camera). But apexcharts-card show error if i wrote any other options.

Version of the card Version: v2.1.2

To Reproduce This is the configuration I used:

type: custom:apexcharts-card
update_interval: 1min
header:
  ....
yaxis:
  ....
series:
  - entity: sensor.xxx
layout_options:
  grid_columns: 4
  grid_rows: 4

Screenshots

Expected behavior Support layout_option option

Desktop (please complete the following information):

• Browser [Microsoft Edge]
• Version [125.0.2535.85]

Smartphone (please complete the following information): no

Additional context no

[RomRider]

You can disable the config validation:

experimental:
  disable_config_validation: true

I'll update the code to make it possible to use that option without disabling the config validation

[xiaodong-lx]

layout_options.grid_columns works, but layout_options.grid_rows not works, maybe the card has a fixed height?

layout_options:
  grid_columns: 3
  grid_rows: 3
experimental:
  disable_config_validation: true

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

[kthofmann]

@xiaodong-lx I can confirm "grid_columns:" works for me, "grid_columns: " I have the same issues, even without fixed height.

[TylonHH]

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
    borderColor: "#E0E0E0"
  chart:
    height: 250px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
header:
  show: true
  title: Strompreis
  show_states: true
  colorize_states: true
  standard_format: false
graph_span: 48h
now:
  show: true
  color: 9E9E9E
span:
  start: day
series:
  - entity: sensor.tibberpreisrest
    name: Preis
    show:
      in_header: before_now
      name_in_header: false
    color_threshold:
      - value: 0
        color: 4DD0E1
      - value: 10
        color: 26A69A
      - value: 15
        color: 4CAF50
      - value: 20
        color: 7CB342
      - value: 25
        color: FBC02D
      - value: 30
        color: EF6C00
      - value: 40
        color: B71C1C
    type: line
    curve: stepline
    extend_to: false
    stroke_width: 2
    float_precision: 2
    data_generator: |
      const noon = new Date()
      noon.setHours(0, 0, 0, 0)
      const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
      const data = [];
      for(let i = 0; i < prices.length; i++) {
        data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
      }
      return data;

So how to handle this with the new section view in HA?