took your gradient on the sun elevation.
2 Likes
… don’t use group_by it will get better result, and for this month i tried something ugly to insert an series mit offset to fill up the series and hide it - so i get a full month of data and the rendering is much better. Still hope to find a better way … if i get something nice out of it i will post. The Idea is to have some sort of "History Browser with Buttons for Monthly Summary to Daily Stats " - but lets see - still a lot of try and error 
.
Try using the --card-background-color variable instead. I’ve updated my sun card and it works for me.
color_threshold:
- value: 50
color: white
- value: 20
color: yellow
- value: 5
color: orange
- value: 0.1
color: steelblue
- value: 0
color: var(--card-background-color)
Note, minor change to gradient levels. Steelblue is now 0.1
Is i possible to use ApexCharts with an auto-entity and have individual charts for each entity like in a vertical stack?
Hello!
I hope that someone has already faced this problem here.
I have a chart which shows me how much natural gas did the boiler use. For the last 7 days, it works like a charm:
- card:
type: custom:apexcharts-card
graph_span: 7d
span:
end: day
header:
show: true
title: Ariston
show_states: true
colorize_states: true
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 5
min: 0
max: 10
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 5
min: 0
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
- 50
- 100
series:
- color: rgb(35,101,71)
entity: sensor.napi_felhasznalt_foldgaz
yaxis_id: first
type: column
name: Mai felhasznált földgáz
group_by:
func: last
duration: 24h
show:
datalabels: true
hidden_by_default: true
- color: rgb(235,10,104)
entity: sensor.napi_felhasznalt_foldgaz_ara
yaxis_id: second
type: column
name: Mai felhasznált földgáz
group_by:
func: last
duration: 24h
show:
datalabels: true
hidden_by_default: true
attributes:
label: Heti Gáz
I would like to also log how much did i use in the previous month. For this I’m using an utility meter, which resets next on February 1. 00:00:00. My problem is that the chart didn’t logged properly the last reset and it memorized even some value after the reset. What could be the problem here?
- card:
type: custom:apexcharts-card
graph_span: 12month
span:
end: month
header:
show: true
title: Ariston
show_states: true
colorize_states: true
yaxis:
- id: first
decimals: 0
apex_config:
tickAmount: 5
min: 0
max: 200
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 5
min: 0
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
- 50
- 100
series:
- color: rgb(35,101,71)
entity: sensor.havi_felhasznalt_foldgaz
yaxis_id: first
type: column
name: Havi felhasznált földgáz
group_by:
func: last
duration: 1month
show:
datalabels: true
hidden_by_default: true
- color: rgb(235,10,104)
entity: sensor.havi_felhasznalt_foldgaz_ara
yaxis_id: second
type: column
name: Havi felhasznált földgáz
group_by:
func: last
duration: 1month
show:
datalabels: true
hidden_by_default: true
attributes:
label: Éves Gáz
Try using statistics: under series:
statistics: # Grabs Long Term Statistics
type: state
period: day # Grabs 1 day at a time
align: start
show:
1 Like
Thank you very much!
1 Like
You are welcome
Hey, i do not know if this is my underestanding lacking, a bug, or a missing feature, but i have power data, that doesn’t update at a regular interval (it only updates on a sufficient change). A bit simplified, but a 2 kW load is on for 3 minutes out of every 15. (20% or so), but the sensor only updates with every change (so it updates to 2 kW at minute 0, ant then back to 0 at minute 3, to 2 kW at minute 15, 0 kW at 18 and so on.)
The actual average power over a 15 minut period shoud be 400W, but the graph shows the average as 1 kW. So just the average between measurements, not taking durations into account.
is there a way for me to fix that, apart from making some helpers that directly give me the correct average?
Hello there!
I am looking for a little bit of advice in configuring my radial card. I have two issues.
-
I need “ticks” or whatever it is called, the small lines you normally have on x and y axis at certain intervals. I need to grade my radial bar, but have no clue on how to configure this, since there is no “X or Y” axis here. Chatgpt and the documentation is clueless…
-
How do I get rid of the colored “dot” when the entity state is 0?
Here is a crappy image that might explain the issues
Post some card & code?
I donot think this exists, the ha-card is based on the js version and that one does not offer this
RadialBar / Circular Gauge Chart Guide & Documentation – ApexCharts.js
1 Like
Servus,
I am trying to show 1 Sensor with 3 different States in the chart ( off, stufe1, stufe2 ) . ( External Heating ) . So i want to see .
- External Heating State + “zulauf” Temperature
- Current Temp of the “Speicher”
- ( future Heatpump active / kw inserted - wait for the PAC2200 getting installed )
Currently i am doing something very urgly as i retrieve the same Series 3 times and use Transform to value the same and therefore because of 3 series color the different States .
Also if i define a min value for x: of 25 , and i have series data with 0 - i do not want to see the line plotted at 25 , but thats a minor of many others like having a square in the legend for those states.
What would be the non nyb way to get this done ?
thx, Dietmar
type: custom:apexcharts-card
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
header:
show: false
title: ""
show_states: true
colorize_states: true
update_interval: 5m
now:
show: true
span:
end: hour
graph_span: 12h
show:
loading: false
apex_config:
tooltip:
enabled: true
enabledOnSeries: undefinded
shared: Boolean
chart:
height: 320px
grid:
show: true
strokeDashArray: 0
borderColor: "#444444"
position: back
xaxis:
lines:
show: true
yaxis:
lines:
show: true
yaxis:
forceNiceScale: true
min: 25
xaxis:
tooltip:
enabled: false
xaxis.type: datetime
type: datetime
axisTicks:
show: true
labels:
format: HH:mm
lines:
show: true
series:
- entity: sensor.heizung_8
color: green
name: Speicher
type: line
invert: false
stroke_width: 4
group_by:
func: avg
duration: 10m
fill: last
show:
in_header: false
legend_value: true
in_chart: true
offset_in_name: false
extend_to: now
- entity: sensor.heizung_4
color: orange
name: Zulauf Fernwärme
type: line
invert: false
opacity: 0.6
show:
in_header: false
legend_value: true
in_chart: true
offset_in_name: false
extend_to: now
- entity: sensor.fernwaerme_state
color: ffab88
name: Stufe1
type: area
transform: "return x === 'stufe1' ? 30 : 0;"
invert: false
opacity: 0.4
curve: stepline
show:
in_header: false
legend_value: false
in_chart: true
offset_in_name: false
extend_to: now
stroke_width: 0
- entity: sensor.fernwaerme_state
color: ec5c51
name: Stufe2
type: area
transform: "return x === 'stufe2' ? 30 : 0;"
invert: false
curve: stepline
opacity: 0.4
show:
in_header: false
legend_value: false
in_chart: true
offset_in_name: false
extend_to: now
stroke_width: 0
- entity: sensor.fernwaerme_state
color: 7cd4fd
name: "Off"
type: area
curve: stepline
transform: "return x === 'off' ? 30 : 0;"
invert: false
opacity: 0.4
show:
in_header: false
legend_value: false
in_chart: true
offset_in_name: false
extend_to: now
stroke_width: 0
all_series_config:
stroke_width: 2
type: area
From what I read, the fernwaerme_state return depends on state and a color
For the stat you can combine the transform but fafaik you cannot do a function for color so you have no option other than 3 entities
1 Like
Oh ok, thanks. Any idea about how to remove the “dot” when the radial bar is 0?
Hi there.
How can I set my graph to show uniform times every half hour? So for example here it would show:
04:00am - 04:30am - 05:00am etc?
I’d also like the end to be the last half hour. So it should show the end as 5am until 05:30am where it would update the end to be 05:30am if that makes sense & is possible?
Probably only via card_mod / style and a template to change the color to transparent
1 Like
In this span, seemingly a day, not possible…that would mean 48 ticks on such a small scale. Not sure what you expect to see in the end.
span has end: hour or minute, not 30min
Look at the docs?
Servus,
Is it somehow possible to get a history entity state ( in my case a Date for Sun rise and setting ) in the apex chart for annotations ? I got it working for “today” ( thx to someone posted it here … ) , but i also have an history Daily graph where it would be very nice if the annotations are correct .
i have some nyb problem to understand how i would be able to retrieve a entity states[‘sensor.home_sun_rising’].state from - X days . I use the custom-template already for buttons …
- type: custom:config-template-card
card:
type: custom:apexcharts-card
card_mod:
style: |
ha-card { border: none; box-shadow: none; }
now:
show: false
apex_config:
annotations:
xaxis:
- x: ${new Date(states['sensor.home_sun_rising'].state).getTime()}
label:
text: ☼
borderWidth: 0
style:
background: "#0000"
- x: ${new Date(states['sensor.home_sun_setting'].state).getTime()}
label:
text: ☾
borderWidth: 0
style:
background: "#0000"
I guess this needs to be done in JS , and i have looked into some samples but i lost how to try and error on this here .
so Variables in the card template , but how
var d = new Date();
d.setDate(d.getDate() - 5);
d should be a date 5 days ago
Any help would be great on this.
thx, Dietmar
I don’t expect to see a lot of data in my graph.