Hi All,
does any one know a way or suggest a different card than apex?
below is the code:
type: custom:apexcharts-card
entity: sensor.sunsynk_total_pv_power
entity: sensor.solcast_pv_forecast_forecast_today
tom_l
July 19, 2025, 11:32am
2
Apexcharts has not been updated to work with the new sections view yet.
So put the apexchart card in a grid card. Turn off the “square grid” option. You should then be able to use the sections width control.
Also for future posts when sharing config, please format it correctly as per: https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371#oneone-format-it-properly-16 or use the </> button in the post toolbar (sometimes in the cog menu on small screens).
3 Likes
Lenbok
December 7, 2025, 2:48am
3
Did this actually work? I’ve tried setting square: false (docs ) and still can’t get the apex chart to display the full section width. Here’s what’s in my section (for the second graph section in the following image):
type: grid
square: false
cards:
- type: custom:apexcharts-card
header:
show: true
title: Solcast Dampening
show_states: false
apex_config:
legend:
show: true
tooltip:
"y":
formatter: |
EVAL:function(y) {return y.toFixed(3);}
enabled: true
marker:
show: false
graph_span: 23h
span:
start: day
yaxis:
- min: 0
max: 1
decimals: 3
apex_config:
tickAmount: 5
series:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Applied
color: orange
stroke_width: 1
type: line
show:
legend_value: false
in_header: false
data_generator: |
const factors = entity.attributes.detailedForecast;
return factors.map(entry => {
return {
x: entry.period_start,
y: entry.dampening_factor
};
});
- entity: sensor.solcast_pv_forecast_dampening
name: Base
color: grey
stroke_width: 0
opacity: 0.5
type: area
show:
legend_value: false
in_header: false
data_generator: >
const factors = entity.attributes.factors; const now = new Date(); //
local time (browser)
return factors.map(({ interval, factor }) => {
const [h, m] = interval.split(':').map(Number);
// Build a Date for "today" at the given hh:mm in local time
const x = new Date(
now.getFullYear(), now.getMonth(), now.getDate(), h, m
).getTime(); // epoch ms for ApexCharts
return { x, y: factor };
});
- type: heading
heading: New section
heading_style: title
grid_options:
columns: full
rows: 1
column_span: 2
gives me:
(I tried a similar thing for the first graph, also not working)
Lenbok
December 7, 2025, 3:02am
4
Ooooh! Some more tinkering, and it seems that you need to add grid_options to the apexcharts block, e.g.:
- type: custom:apexcharts-card
grid_options:
columns: full
[...]
However, now I’m not sure how to set the height. One of my graphs is over twice the height of the other one:
type: sections
title: Solar
path: solar
sections:
- type: grid
square: false
cards:
- type: custom:apexcharts-card
grid_options:
columns: full
rows: auto
header:
title: Solar forecast
show: true
show_states: true
colorize_states: true
apex_config:
chart:
height: 300px
tooltip:
enabled: true
shared: true
followCursor: true
graph_span: 24h
span:
start: day
yaxis:
- id: capacity
show: false
opposite: true
decimals: 0
max: 100
min: 0
apex_config:
tickAmount: 10
- id: kWh
show: true
min: 0
apex_config:
tickAmount: 10
- id: header_only
show: false
series:
- entity: >-
sensor.power_photovoltaics_fronius_power_flow_0_fronius_rancho_relaxo
name: Solar Power (now)
type: line
stroke_width: 2
float_precision: 2
color: Orange
yaxis_id: kWh
transform: return x / 1000;
unit: kWh
extend_to: now
show:
legend_value: true
in_header: false
group_by:
func: avg
duration: 5m
- entity: sensor.solcast_pv_forecast_forecast_today
name: Forecast
color: Grey
opacity: 0.3
stroke_width: 0
type: area
time_delta: +15min
extend_to: false
yaxis_id: kWh
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
- entity: sensor.solcast_pv_forecast_forecast_today
name: Forecast 10%
color: Grey
opacity: 0.3
stroke_width: 0
type: area
time_delta: +15min
extend_to: false
yaxis_id: kWh
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate10];
});
- entity: sensor.solcast_pv_forecast_forecast_today
name: Undampened
color: Blue
opacity: 0.7
stroke_width: 2
stroke_dash: 6
type: line
time_delta: +15min
extend_to: false
yaxis_id: kWh
show:
legend_value: false
in_header: false
in_chart: true
data_generator: |
return entity.attributes.detailedForecast.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate/entry.dampening_factor];
});
- entity: sensor.energy_day_fronius_inverter_1_fronius_rancho_relaxo
yaxis_id: header_only
name: Today Actual
stroke_width: 2
color: Orange
transform: return x / 1000;
unit: kWh
show:
legend_value: true
in_header: true
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_today
yaxis_id: header_only
name: Today Forecast
color: Grey
show:
legend_value: true
in_header: true
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_today
attribute: estimate10
yaxis_id: header_only
name: Today Forecast 10%
color: Grey
opacity: 0.3
show:
legend_value: true
in_header: true
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_remaining_today
yaxis_id: header_only
name: Remaining
color: Grey
show:
legend_value: true
in_header: true
in_chart: false
column_span: 3
- type: grid
square: false
cards:
- type: custom:apexcharts-card
header:
show: true
title: Solcast Dampening
show_states: false
apex_config:
legend:
show: true
tooltip:
"y":
formatter: |
EVAL:function(y) {return y.toFixed(3);}
enabled: true
marker:
show: false
graph_span: 23h
span:
start: day
yaxis:
- min: 0
max: 1
decimals: 3
apex_config:
tickAmount: 5
series:
- entity: sensor.solcast_pv_forecast_forecast_today
name: Applied
color: orange
stroke_width: 1
type: line
show:
legend_value: false
in_header: false
data_generator: |
const factors = entity.attributes.detailedForecast;
return factors.map(entry => {
return {
x: entry.period_start,
y: entry.dampening_factor
};
});
- entity: sensor.solcast_pv_forecast_dampening
name: Base
color: grey
stroke_width: 0
opacity: 0.5
type: area
show:
legend_value: false
in_header: false
data_generator: >
const factors = entity.attributes.factors; const now = new Date();
// local time (browser)
return factors.map(({ interval, factor }) => {
const [h, m] = interval.split(':').map(Number);
// Build a Date for "today" at the given hh:mm in local time
const x = new Date(
now.getFullYear(), now.getMonth(), now.getDate(), h, m
).getTime(); // epoch ms for ApexCharts
return { x, y: factor };
});
grid_options:
columns: full
rows: auto
column_span: 3
- type: grid
cards:
- type: heading
heading: New section
max_columns: 3
cards: []
header:
layout: start
badges_position: bottom
badges_wrap: wrap
tom_l
December 7, 2025, 3:26am
5
And this is the danger of responding to 5 month old posts. Apex Charts was given sections view support after that post was written.
Always check the integration documentation before responding to old posts. Things change fast around here.
Lenbok
December 7, 2025, 3:32am
6
Cool, thanks. At least the posts will be useful in case someone else is having difficulty so they know the path forward.
(BTW, I sorted the height issue out, one graph has auto height and the other was fixed at 300px).
