Install config-template-card Card integration and try this:
type: custom:config-template-card
variables:
- states['48_hour_anerage_electricity_profit_cost'].state
card:
type: custom:apexcharts-card
header:
[...]
apex_config:
annotations:
yaxis:
- 'y': ${vars[0]}
borderColor: '#00E396'
borderWidth: 4
label:
text: mean
Is there any way to change font-size for entities value in header when using:
header:
show_states: true
I’ve tried various card-mod but nothing seems to be able to change the font for those values. I only managed to change the font for the title.
Does Apexchart not working with Long Term Statistic ?
My Charts seems to not include the long term stats data?
It does. Have a look at the statistics options.
ChatGPT doesn’t understand what you’re doing, it suggests total nonsense.
Useful during the cold winter days:
type: custom:apexcharts-card
span:
end: day
header:
title: Airco Energy Consumption
show: true
colorize_states: true
graph_span: 7d
locale: en
apex_config:
chart:
type: area
xaxis:
labels:
format: ddd
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
series:
- entity: sensor.airco_energy
name: Airco Energie
yaxis_id: first
type: column
show:
datalabels: true
statistics:
type: sum
period: hour
group_by:
func: diff
duration: 24h
- entity: sensor.bresser_weather_station_temperature
name: Weerstation
yaxis_id: second
type: line
show:
datalabels: true
group_by:
func: min
duration: 24h
Hello
I was looking an implemetation for this also, but apexcharts only can use different entities for pie as far as I know.
Perhaps a Feature Request for apexchart to use values of the same sensor??
Meanwhile, I have configured some sensors to cover this.
Perhaps not the best one or the final one. But it could be an option
Here is the link with the implementation:
Sensor with different values in an apexchart pie – MelCloud – OperationMode example
I hope this helps
Best regards
Thx!
I have allmost the same using this code:
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 7d
span:
end: day
header:
show: true
title: WP werkingsstatus | dag
show_states: true
colorize_states: true
chart_type: pie
series:
- entity: sensor.wp_werking_geschiedenis_legionella
- entity: sensor.wp_werking_geschiedenis_koelen
- entity: sensor.wp_werking_geschiedenis_ontdooien
- entity: sensor.wp_werking_geschiedenis_stop
- entity: sensor.wp_werking_geschiedenis_verwarmen
- entity: sensor.wp_werking_geschiedenis_warm_water
but yours look better, so i borrow some of the code, great
I would like to use this feature of apex charts for smoother interpolations:
stroke: {
curve: “monotoneCubic”
}
I can’t figure out where to add it. I tried this, but it just stopped showing any plots:
apex_config:
stroke:
curve: monotoneCubic
Is there a way to make the graph using the full card, having no axis and name as well as state (center and a big font) on the top and above the graph?
Similar to the mock shown below?
I know the mini-graph-card, but there the graph is only a very small part of the card.
Here are a number of things you can play with
layout: minimal
apex_config:
legend:
show: false
grid:
margin:
left: 0
right: 0
xaxis:
axisborder:
show: false
axisTicks:
show: false
labels:
show: false
yaxis:
axisborder:
show: false
axisTicks:
show: false
labels:
show: falseThe layout: minimal does most of what I was looking for. Thanks for the hint.
Most of the other seem to redundant, when going with the minimal; at least, I don’t see changes, wehe playing with those.
Now I looks like this:
Is there a way to stretch the graph to the top of the graph (plotted behind the state value)?
How to move the state value to the middle?
Edit: Added the source, to have it together with the result.
type: custom:apexcharts-card
layout: minimal
header:
show: true
title: Außen
floating: true
show_states: true
colorize_states: false
graph_span: 24h
series:
- entity: sensor.lumi_lumi_weather_temperature_2
name: Außen
color: '#ff444f'
apex_config:
stroke:
width: 2
legend:
show: false
showForSingleSeries: true
position: top
horizontalAlign: center
fontSize: 40px
offsetX: 0
offsetY: -8
labels:
useSeriesColors: false
onItemClick:
toggleDataSeries: false
onItemHover:
highlightDataSeries: false
add floating: true to the header section
Had this already. Does only half of the expected stretching.
I’ve added my source to my posting above, to have source and result together.
Looking for some help here with the y-axis. The value does not correspond to the value of the combined values for both airco’s, it tops off at 16. Looking for some advise where I am going wrong with my config.
type: custom:apexcharts-card
stacked: true
span:
end: day
header:
title: Airco Energy Consumption
show: true
colorize_states: true
graph_span: 7d
apex_config:
chart:
type: area
xaxis:
labels:
format: ddd
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 4
forceNiceScale: true
series:
- entity: sensor.living_room_energy_consumption
name: Daikin
yaxis_id: first
type: column
show:
datalabels: true
statistics:
type: sum
period: hour
group_by:
func: diff
duration: 24h
- entity: sensor.daily_energy_airco_upstairs_2
name: Gree
yaxis_id: first
type: column
show:
datalabels: true
statistics:
type: sum
period: hour
group_by:
func: diff
duration: 24h
- entity: sensor.average_daily_outdoor_temp
name: Average temperature
yaxis_id: second
type: line
show:
datalabels: true
group_by:
func: min
duration: 24h
Hi guys,
does anyone have an idea, how I could align the columns correctly?
I think with this data generator I am just adding the start time, but no end time, so the columns are centered exactly at the hour:
But this example, the columns are right of the hour, as they seem to represent a duration of 1hr or have an end time:
How could I change the data_generator to get the same results as in the example?
There would be an attribute end_time available too.
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
border: none;
background: none;
box-shadow: none;
}
yaxis:
- decimals: 0
show: true
apex_config:
forceNiceScale: true
decimalsInFloat: 0
labels:
style:
colors: '#9b9b9b'
fontSize: 12
fontWeight: bolder
fontFamily: Roboto,Noto,sans-serif
apex_config:
tooltip:
x:
show: true
format: HH:00 - HH:59
chart:
height: 232px
grid:
show: true
borderColor: '#9b9b9b'
xaxis:
axisTicks:
show: true
color: '#9b9b9b'
labels:
style:
colors: '#9b9b9b'
fontSize: 12
fontWeight: bolder
fontFamily: Roboto,Noto,sans-serif
axisBorder:
show: false
graph_span: 36h
span:
start: hour
offset: '-2hr'
series:
- entity: sensor.epex_spot_at_net_price
show:
extremas: true
name: Strompreis
type: column
color: '#0288d1'
stroke_width: 2.5
unit: ct/kWh
extend_to: false
float_precision: 2
data_generator: >
return entity.attributes.data.map((entry, index) => { return [new
Date(entry.start_time).getTime(), entry.price_ct_per_kwh]; });
Thank you
Oliver
Please, can you share the code?
Hi,
I have added the complete card code now.
Thank you
If I look at the history graph, the measurements seem to be ‘on’ the hour so why would you want it to show ‘next’ to the hour, isn’t that twisting the data? I also donot know why you interpret the column to be a period but that is a different topic. Simple solution (?) would be to add a small offset to push it left or right as this seems stable ‘on-the-hour’
Because the now line is not correctly matching the columns. it’s now 08:35 and the now line indicates, that the price of the 09:00 column is active now, which is not correct.
Now using an offset of -30min seems to deliver the expected result, the now line is at the end of the 08:00 column and has not yet switched to the 09:00 column.
Many thanks for your hint!
chart_type: radialBar
show:
loading: false
header:
show: true
all_series_config:
max: 1
series:
- entity: sensor.muffa_indicatore_bagno
transform: return x / 255;
name: I
opacity: 1
apex_config:
legend:
show: false
dataLabels:
enabled: true```