Click the “pencil” in top right corner, the click pencil to the left, edit view, chose Panel view
If you want more cards in your view, you should either use Grid, or start with a vertical-stack
You use most likely Masonry-View
1 Like
Thank you very much.
1 Like
I’m struggling with setting dynamically axis min and max.
I haved used custom:config-template-card successfully for dynamic graph span, but cannot do it for min/max, because it’'s a numeric value that confic template card gives to apex chart. Numeric values are given with ‘-7384.97’ meaning number between singlequotes, but Apex does not accept single quotes. For span add the “h” character to the numeric value and then confic template card gives the result without singlequotes and it works.
here is my code:
type: custom:config-template-card
variables:
hours: '`${states[''input_number.total_nordpool_hours_available''].state -1}h`'
maxY: '`${states[''sensor.maximum_forecast_value''].state}`'
minY: '`${states[''sensor.minimum_forecast_value''].state}`'
entities:
- input_number.nordpool_available_hours
- sensor.maximum_forecast_value
- sensor.minimum_forecast_value
card:
type: custom:apexcharts-card
graph_span: ${hours}
span:
start: minute
header:
show: true
title: EMHASS Optimization Plan
show_states: true
colorize_states: true
now:
show: false
label: now
yaxis:
- min: ${minY}
max: ${maxY}
decimals: 2
apex_config:
forceNiceScale: true
tick_amount: 4
series:
- entity: sensor.p_pv_forecast
curve: stepline
stroke_width: 2
color: '#FFD966'
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_pv_forecast];
});
- entity: sensor.p_load_forecast
curve: stepline
type: line
color: '#5AB4DE'
show:
in_header: false
legend_value: false
stroke_width: 2
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_load_forecast];
});
- entity: sensor.p_grid_forecast
curve: stepline
color: '#FF7E7E'
type: area
show:
in_header: false
legend_value: false
stroke_width: 1
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_grid_forecast];
});
- entity: sensor.p_batt_forecast
curve: stepline
color: '#8CC63F'
type: area
show:
in_header: false
legend_value: false
stroke_width: 1
data_generator: |
return entity.attributes.battery_scheduled_power.map((entry) => {
return [new Date(entry.date), entry.p_batt_forecast];
});
- entity: sensor.total_cost_fun_value
unit: €
name: Plan Value
show:
legend_value: false
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_today
unit: kWh
name: Solar Production Forecast
show:
legend_value: false
in_chart: false
view_layout:
position: main
And error:
/// apexcharts-card version 2.0.4 /// Bad yaxis min/max format: -7375.97
type: custom:apexcharts-card
graph_span: 11h
span:
start: minute
header:
show: true
title: EMHASS Optimization Plan
show_states: true
colorize_states: true
now:
show: false
label: now
yaxis:
- min: '-7375.97'
max: '6255.39'
decimals: 2
apex_config:
forceNiceScale: true
tick_amount: 4
series:
- entity: sensor.p_pv_forecast
curve: stepline
stroke_width: 2
color: '#FFD966'
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_pv_forecast];
});
- entity: sensor.p_load_forecast
curve: stepline
type: line
color: '#5AB4DE'
show:
in_header: false
legend_value: false
stroke_width: 2
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_load_forecast];
});
- entity: sensor.p_grid_forecast
curve: stepline
color: '#FF7E7E'
type: area
show:
in_header: false
legend_value: false
stroke_width: 1
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_grid_forecast];
});
- entity: sensor.p_batt_forecast
curve: stepline
color: '#8CC63F'
type: area
show:
in_header: false
legend_value: false
stroke_width: 1
data_generator: |
return entity.attributes.battery_scheduled_power.map((entry) => {
return [new Date(entry.date), entry.p_batt_forecast];
});
- entity: sensor.total_cost_fun_value
unit: €
name: Plan Value
show:
legend_value: false
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_today
unit: kWh
name: Solar Production Forecast
show:
legend_value: false
in_chart: false
view_layout:
position: main
Problem is here. Should be without single quotes to work:
yaxis:
- min: '-7375.97'
max: '6255.39'
Would be nice if apex chart accept the values in single quotes. If anyone have some ideas how to overcome this, would be great
Try this to see if it solves your issue:
type: custom:config-template-card
variables:
hours: '`${states[''input_number.total_nordpool_hours_available''].state -1}h`'
maxY: '`${states[''sensor.maximum_forecast_value''].state *1}`'
minY: '`${states[''sensor.minimum_forecast_value''].state *1}`'
Thanks for your reply, but nope, still has single quotes:
/// apexcharts-card version 2.0.4 /// Bad yaxis min/max format: -12000
yaxis:
- min: ‘-12000’
max: ‘13804.11’
It seems thay every numeric value from config-template-card will be handled in apex chart with single quotes. Or to precise, config-template-card will serve numeric values with single quotes.
EDIT: This did the trick:
yaxis:
- min: '${parseFloat(minY)}'
max: '${parseFloat(maxY)}'
1 Like
How possible is it to get the additional Apexchart types available in this - especially the polar chart would be uniquely useful as there’s no other chart like this for home assistant?
hi,
i have to apex charts below each other using the vertical stack.
but how can i align them properly?
the second chart (not the axes) starts a little bit more to the left, than the first one.
can i adjust this in any way?
Thanks
Anyone can advise how can I display entity attribute instead of entity value?
type: custom:apexcharts-card
span:
offset: '-1sec'
apex_config:
chart:
type: area
height: 250
stroke:
show: true
width: 1
curve: smooth
legend:
show: false
dataLabels:
enabled: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
header:
show: true
show_states: true
colorize_states: true
graph_span: 12h
update_interval: 1h
series:
- color: rgb(138,43,226)
entity: sensor.home_pm2_5
attribute: percent
type: column
- color: rgb(235,10,104)
entity: sensor.home_pm1
attribute: percent
type: column
- color: rgb(19,173,24)
entity: sensor.home_pm10
attribute: percent
type: column
all_series_config:
curve: smooth
stroke_width: 30
statistics:
type: mean
period: hour
show:
extremas: true
When I’m trying like above:
`entity: sensor.home_pm10
attribute: percent`
it doesn’t work.
I would like to separate power and temperature into 2 different axis on the left and right side. How can I do that?
I would like to draw a graph of daily usage of electric power. I am drawing a sensor sensor.emporiavue2_total_daily_energy and graph looks like this.
Now, the problem. I am drawing the value of sensor.emporiavue2_total_daily_energy and graph says today’s total daily power consumption is 4580 Wh. However, current reading of this value on other card says that the correct value is 4815 Wh. Why?
Another thing: I would like that labels on a bar chart have unit also (so 4580 Wh and not just number). And maybe a legend under the graph?
And the third question. I am showing daily energy consumption on a header (left). I would like additionally show current total power (emporiavue2_total_power), but just in header, not in the graph. How to do that?
Hi.
I’m trying to dynamically show/hide an entity in my graph. To do this I’ve got a sensor that returns a boolean as true/false.
When I try and put this for the in_chart value I just get told that it isn’t a boolean…
- entity: sensor.heat_pump_state4
opacity: 0.6
stroke_width: 0
color: 4CAF50
name: Drying
type: area
show:
legend_value: false
in_header: false
in_chart: {{ states('sensor.heat_pump_state4_truefalse') }}
curve: smooth
yaxis_id: State
I get this error:
/// apexcharts-card version 2.0.4 /// value.series[4] is not a ChartCardSeriesExternalConfig; value.series[4].show is not a ChartCardSeriesShowConfigExt; value.series[4].show.in_chart is not a boolean
And it seems to get returned to apexcharts as a null:
- entity: sensor.heat_pump_state4
opacity: 0.6
stroke_width: 0
color: 4CAF50
name: Drying
type: area
show:
legend_value: false
in_header: false
in_chart:
'[object Object]': null
curve: smooth
yaxis_id: State
Devtools clearly shows that it does indeed return a true/false boolean…
Maybe this will work?
in_chart: ${{ states['sensor.heat_pump_state4_truefalse'].state }}
That returns a “not a boolean” too, doesn’t seem to get parsed to anything, not even object. And is just returned as a string:
Solved by using config-template-card:
type: custom:config-template-card
variables:
heat_pump_state4: states['sensor.heat_pump_state4_truefalse'].state
entities:
- sensor.heat_pump_state4_truefalse
in_chart: ${heat_pump_state !== 'False'}
1 Like
For the chart_type: donut, is there a way to stack one donut within another?
I’d like to show the balance of phases as a thin like within the breakdown of my loads. (combining these two charts)
Did you ever find a way to achieve this?
What am I doing wrong, I just can’t get the extrema’s to show in my column graph…
My yaml:
type: custom:apexcharts-card
apex_config:
chart:
height: 180px
experimental:
color_threshold: true
graph_span: 23h
span:
start: day
offset: +1h
update_interval: +1h
header:
show: true
standard_format: true
show_states: true
now:
show: true
label: NU
series:
- entity: sensor.current_electricity_price_all_in
name: Nu
color_threshold:
- value: 0
color: green
- value: 0.2
color: orange
- value: 0.3
color: red
show:
extremas: true
in_header: raw
stroke_width: 3
type: column
float_precision: 2
data_generator: |
return entity.attributes.prices.map((record, index) => {
return [record.from, record.price];
});
- entity: sensor.lowest_energy_price_today
float_precision: 2
show:
in_chart: false
in_header: raw
- entity: sensor.highest_energy_price_today
float_precision: 2
show:
in_chart: false
in_header: raw
yaxis:
- decimals: 2
min: 0
max: '|+0.10|'
Perfect, no more 32.999999999999997 LOL (or similar)
Hi, is there any option to show/hide serie in graph, clicking on header label? For example if there are 3 series (and 3 labels), clicking on label 1 i can switch show/hide respective series 1? Thanks
I found out that the data from the last hour are not present on the graph. After midnight (let’s say at 0:35), I can see value 0 Wh on a graph, but current value of sensor.emporiavue2_total_daily_energy is above 0.
Why?