Config-template-card doesn't keep the width configured in apexcharts-card

Coco128 · December 28, 2025, 10:58pm

Hi

I display custom apexcharts-card charts, and I found a solution for how to change the width. I wanted it to use the full vertical space of the screen.
It works fine.

            card:
              type: custom:apexcharts-card
              section_mode: true
              grid_options:
                rows: 7
                columns: 48

Then, I wanted to be able to dynamically modify the chart interval (1h, 1d, etc.), so I use custom:config-template-card.
That also works. Unfortunately, the width is no longer respected; it has become small again.

          - type: custom:config-template-card
            entities:
              - input_select.duree_du_graphique
            card:
              type: custom:apexcharts-card
              section_mode: true
              grid_options:
                rows: 7
                columns: 48

Do you have the same problem?
Or what other solution do you use to dynamically change the chart period without having to duplicate dashboards?

Thanks

boheme61 · December 28, 2025, 11:16pm

Have you tried with Card-mod , under the apexcharts-card
“full vertical space” which View are you sing for this “setup”, A single-card Panel-view ?


              apex_config:
                chart:
                  height: 312px
                  width: 100%

or width in px, i don’t know if either will overflow the “config-template-card”, but card-mod should

Ildar_Gabdullin · December 28, 2025, 11:30pm

First, the “grid_options” should be defined for the config-template-card (not for the inner card):

type: custom:config-template-card
card:
  ...
grid_options:
  ...

Next, about a card’s height (which you may not have noticed yet).
The config-template-card does not work nice in Horizontal stack card & Grid card (the latter is used inside sections).
Will be fixed as soon as this PR is merged (there are some things to be done before a next release is created).
Meanwhile, this can be fixed by card-mod.
Play with this:

type: grid
columns: 2
cards:
  - type: alarm-panel
    states:
      - arm_home
      - arm_away
    entity: alarm_control_panel.security
  - type: entity
    entity: sun.sun
  - type: alarm-panel
    states:
      - arm_home
      - arm_away
    entity: alarm_control_panel.security
  - type: custom:config-template-card
    card:
      type: entity
      entity: sun.sun
  - type: alarm-panel
    states:
      - arm_home
      - arm_away
    entity: alarm_control_panel.security
  - type: custom:config-template-card
    card:
      type: entity
      entity: sun.sun
    card_mod:
      style: |
        #card {height: 100%}

boheme61 · December 28, 2025, 11:43pm

He should set height in apex-chart-card, and btw, panel-view, for full width graph

Ildar_Gabdullin · December 28, 2025, 11:46pm

Height may be customized in apex-charts, of course.
But ANY cards in sections should follow a defined layout - i.e. occupy a provided height (defined by grid options).
When a card is placed into CTC - this breaks.
So => a solution was provided.

boheme61 · December 28, 2025, 11:49pm

Yeah, i still don’t use Sections in any view, plain-views only

EDIT: And i’ve tried and have apex-chard in config-template-card, in 3 types of views
Panel , Grid-View and Horizontal(layout-card)

Ildar_Gabdullin · December 28, 2025, 11:51pm

Using yaml dashboards only.
Storage dashboards (incl. sections) only for testing, examples etc.
(you know, these storage dashboards can be easily broken if you touch smth inaccurately…)

Ildar_Gabdullin · December 28, 2025, 11:54pm

Yes, and does it respect a height defined by a layout? )))

boheme61 · December 28, 2025, 11:55pm

I don’t think i can ever like or get use to these new “Views”, so mush “distractions”

Coco128 · December 29, 2025, 12:01am

Hi

Thank you all of you for your help. I’m beginner with HA. I started few weeks ago.
I don’t use a Single View Panel because I would like to display multiple charts on the same page. So I thought sections would be the good way.

It works with this config. I had to set the width in config-template-card with section_mode and column 48.
The height is set in apex_config of apexcharts-card.

type: custom:config-template-card
section_mode: true
grid_options:
  columns: 48
entities:
  - input_select.duree_du_graphique
card:
  type: custom:apexcharts-card
  header:
    title: Température
    show: true
  graph_span: "${DUREE_DU_GRAPHIQUE === '12h' ? '12h' : '24h'}"
  update_interval: 1min
  yaxis:
    - decimals: 0
      apex_config:
        title:
          text: C°
          rotate: 0
  apex_config:
    chart:
      height: 500px
      animations:
        enabled: false
    legend:
      show: true
      position: top
      horizontalAlign: left
    stroke:
      width: 2
  series:
    - entity: sensor.thermo_gaming_a_temperature

The config of my dashboard is like this. What shall I use if I want to add multiple charts on the same page ? Temperature, humidity, etc. with full witdh.

config_template_card_vars:
  DUREE_DU_GRAPHIQUE: states['input_select.duree_du_graphique'].state
views:
  - type: sections
    max_columns: 4
    title: Graphs
    sections:
      - type: grid
        cards:
          - type: heading
            heading_style: title
            heading: Température
          - type: custom:config-template-card
            section_mode: true
            grid_options:
              columns: 48
...
...

Thank you

boheme61 · December 29, 2025, 12:08am

yes, both if single card, or 2-3 columns, and upon eachother

Edit: Nope not the height( in the apex-card, the card overwrites/ignore it (just had to make sure, so i set layout height to 200, nothing changed
… Who would set Layout height ?

boheme61 · December 29, 2025, 12:09am

you have to add “Series” 1 for each sensor

series

entity1
entity2
etc

Ildar_Gabdullin · December 29, 2025, 12:31am

BTW, the initial idea of placing a graph card inside CTC may be not the best way.
Any card placed in CTC only updates itself when a so called “monitored entity” is updated:

type: config-template-card
entities:
  ... list of monitored entities
card:
  ... some inner card reflecting a state of some entity(-ies)

A graph card like apexcharts should update itself automatically when a “graphed” entity is updated. When a graph-card is placed into CTC - it becomes like “isolated” from a system, so you will need to declare a “graphed” entity as “monitored”:

type: config-template-card
entities:
  - sensor.xyz # must be declared as "monitored"
card:
  type: some-graph-card
  ... sensor.xyz is used to build a graph

Then the graph card will update itself - but this MAY cause a flickering since the card will be fully redrawn (may also cause a rebuild of a view layout - unless you use it in a Grid card or sections with kind of “predefined cells” for every card).
Means - when a sensor is frequently changing, the card will flicker frequently too.

Ildar_Gabdullin · December 29, 2025, 12:37am

See my 1st post here, the apexcharts card may be placed in a horiz stack or in sections nearby other cards, they should respect a height of AVAILABLE space provided by a layout.
So, use masonry & enjoy a simpler life)

boheme61 · December 29, 2025, 12:50am

I Have it perfectly in a huge grid(layout-card), with areas and mediaquery, which adapt to various devices
the others(panel-horizontal-layout) i just tested in, but yes you are right, if i would have put as much effort in these, as i have with my HomeStatus-Grid-Layout, id probably have had “hit the wall”, i only use the CTC for my electricity-prices, and current/coming price levels, which updates per 15min

Nope i never set height in a horizontal-view(layout.card)

Coco128 · December 31, 2025, 9:22pm

I meant, I’ve several charts on the same page (temperature, relative humidity, absolute humidity, etc.). Each chats have ~13 series.
This is why I use a section with grid, I don’t know if there are other ways. I’m a beginner.

Coco128 · December 31, 2025, 9:25pm

Ah yes thank you for the hint.

I don’t really need an automatic refresh, the purpose of this dashboard isn’t to display it 24/24 on a screen but only on demand.
So I created a sensor now().minute which 5 minutes of increment (0, 5, 10, 15, …) and I added it in entities. CTC refreshes the charts evry 5 minutes, it’s better than no refresh.

Ildar_Gabdullin · December 31, 2025, 9:34pm

Good approach. Also, check if this conflicts with own mechanism of apexcharts card, it may has own algorithm of interpolating data.

Coco128 · December 31, 2025, 9:36pm

Thank you all of you for your help!

It works as I wanted.

I can select dynamically the duration with config-template-card (use 1.3.7-beta.1 instead of 1.3.6, we can define global variables or functions for the dashboard) and I display the charts with apexcharts-card

At the top of the dashboard I defined the duration and the aggreation (minute, hourly, daily, etc.) for the charts, thanks to :config-template-card

config_template_card_vars:
  DUREE_DU_GRAPHIQUE: states['input_select.duree_du_graphique'].state
  graph_span: |
    option => {
      if (option === '1h') { return '1h'; }
      else if (option === '3h') { return '3h'; }
      else if (option === '12h') { return '12h'; }
      else if (option === '1 jour') { return '1d'; }
      else if (option === '2 jours') { return '2d'; }
      else if (option === '1 semaine') { return '1w'; }
      else if (option === '2 semaines') { return '2w'; }
      else if (option === '1 mois') { return '31d'; }
      return '1h';
    }
  group_by: |
    option => {
      if (option === '1h') { return '1min'; }
      else if (option === '3h') { return '1min'; }
      else if (option === '12h') { return '1min'; }
      else if (option === '1 jour') { return '1min'; }
      else if (option === '2 jours') { return '1min'; }
      else if (option === '1 semaine') { return '1h'; }
      else if (option === '2 semaines') { return '1h'; }
      else if (option === '1 mois') { return '1d'; }
      return '1h';
    }
views:
  - type: sections
...
...

And apex charts using the config-template-card.
I could define the height of the chatrs with :apex_config.chart.height

          - type: custom:config-template-card
            section_mode: true
            grid_options:
              columns: 48
            entities:
              - input_select.duree_du_graphique
              - sensor.time_5minutes
            card:
              type: custom:apexcharts-card
              header:
                title: Moyenne humidité absolue
                show: true
                standard_format: true
              graph_span: ${graph_span(DUREE_DU_GRAPHIQUE)}
              update_interval: 1min
              yaxis:
                - decimals: 0
                  apex_config:
                    forceNiceScale: true
                    title:
                      text: g/m³
                      rotate: 0
              apex_config:
                chart:
                  height: 500px
                  animations:
                    enabled: false
                tooltip:
                  x:
                    format: HH:mm
                legend:
                  show: true
                  position: top
                  horizontalAlign: left
                stroke:
                  width: 1.8
              series:
                - entity: sensor.thermo_sous_sol_humidite_abs_moyenne
                  name: Sous-sol
                  group_by:
                    duration: ${group_by(DUREE_DU_GRAPHIQUE)}
                    func: avg
                - entity: sensor.thermo_rez_humidite_abs_moyenne
                  name: Rez
                  group_by:
                    duration: ${group_by(DUREE_DU_GRAPHIQUE)}
                    func: avg
                - entity: sensor.thermo_etage_humidite_abs_moyenne
                  name: Étage
                  group_by:
                    duration: ${group_by(DUREE_DU_GRAPHIQUE)}
                    func: avg
                - entity: sensor.thermo_maison_humidite_abs_moyenne
                  name: Maison
                  group_by:
                    duration: ${group_by(DUREE_DU_GRAPHIQUE)}
                    func: avg