How to make my custom card wider in the lovelace?

L-earth · September 28, 2023, 5:51am

Hi,

I have created an apexcharts-card to my liking. The only thing that bothers me is that is only the default card size. I would like it to be wider than that. Maybe twice the width but full page wideness would be fine as well.

I found some hints about vertical stacks on here but I cannot make it work. I always end up with indentation errors or it won’t load.

Can you help me make my card wider? Here is my working Yaml code for the “small” card:

type: vertical-stack
panel: true
cards:
  - type: custom:apexcharts-card
    graph_span: 30 days
    header:
      show: true
      title: Stromerzeugung 30 Tage
      show_states: true
      colorize_states: true
    series:
      - entity: sensor.helper_solar_production_daily
        type: column
        group_by:
          func: max
          duration: 1day
        float_precision: 1
        show:
          datalabels: true

thanks a lot.

sparkydave · September 28, 2023, 6:01am

Perhaps try using this:

tom_l · September 28, 2023, 6:14am

You can also change the view type to “sidebar”. This gives one wide column and one skinny one:

sparkydave · September 28, 2023, 6:18am

I haven’t tried the sidebar option. Can you select which side is wide vs skinny?

tom_l · September 28, 2023, 6:21am

Nope, wide is always on the left. All you can do is move the cards from one to the other.