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```I am a new user of HA and the ApexCharts. I am using ApexCharts to monitor various power entities from the Solarman integration. We are subjected to regular power cuts (so-called load-shedding) in South Africa.
The Grid graph drops to 0 at the beginning of the cut but then builds up as if it is interpolated. The only samples for the grid are just before the power cut and then again just after power is restored. I’ve used 2 different entities but the behaviour is the same.
Edit: In effect, I’ll have to use either the grid frequency or grid status to force 0 values during the power cut, but how do I access those entities in the transform for the grid power?
sensor.solarman_external_ct_l1_power # blue
(The second y-axis for power only appears if I enable the Load graph.)
The history of the same entity as a Gauge
I also have the following 2 entities sensor.solarman_grid_frequency and sensor.solarman_grid_connected_status
I tried various Transform combinations to force the Grid value to 0 during the power cuts in an attempt to fix the Grid display but had no success.
Any help in this regard will be highly appreciated.
Creating an alternating background effect to highlight change of day
I needed a way to visually highlight the change of day so it would be easier to roughly estimate the time of day (night, evening etc.) in multiday graphs eg. weather forecast. First I thought vertical grid line, then annotations but could not make them work.
Then I though “hacking” it with the use of data generator. And this is the end result. If there is a native way I will gladly switch to it.
- entity: weather.openweathermap
name: ' '
yaxis_id: dayshading
type: area
color: white
opacity: 0.05
stroke_width: 0
show:
legend_value: false
in_header: false
data_generator: |
let res = [];
var startOfToday = new Date(Date.now())
startOfToday.setHours(0,0,0,0)
startOfToday.setDate(startOfToday.getDate() + -6)
var endOfToday = new Date(startOfToday)
endOfToday.setHours(23,59,59,0)
for (let i = 0; i < 12; i++) {
var start = new Date(startOfToday)
start.setDate(start.getDate() + i)
var end = new Date(endOfToday)
end.setDate(end.getDate() + i)
res.push([new Date(start), (i %2)]);
res.push([new Date(end), (i %2)]);
}
return res
Hi all, i’m using 4 months monthly bar chart to show 4 total increasing sensors. Problem is that a small part on the graph right side is missing (label is not shown). I was not able to find a way to show the missing part. Can someone help me?
type: custom:apexcharts-card
all_series_config:
stroke_width: 1
show:
offset_in_name: false
legend_value: false
extremas: false
name_in_header: false
graph_span: 4months
span:
end: month
apex_config:
chart:
type: area
height: 250px
legend:
show: true
dataLabels:
style:
fontSize: 11px
background:
enabled: true
padding: 2
borderRadius: 1
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.3
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
header:
show: true
title: Energia Severina ultimi 5 mesi
show_states: false
colorize_states: true
series:
- entity: sensor.azzurro_seve_total_pv_generation
name: Efv
color: green
show:
datalabels: true
opacity: 1
statistics:
type: sum
align: start
type: column
group_by:
func: diff
start_with_last: true
duration: 1month
float_precision: 0
- entity: sensor.azzurro_seve_total_load_consumption
name: Eu
color: orange
show:
datalabels: true
opacity: 1
statistics:
type: sum
align: start
type: column
group_by:
func: diff
start_with_last: true
duration: 1month
float_precision: 0
- entity: sensor.azzurro_seve_total_energy_sold
name: Eg+
color: violet
show:
datalabels: true
opacity: 1
statistics:
type: sum
align: start
type: column
group_by:
func: diff
start_with_last: true
duration: 1month
float_precision: 0
- entity: sensor.azzurro_seve_total_energy_bought
name: Eg-
color: red
show:
datalabels: true
opacity: 1
statistics:
type: sum
align: start
type: column
group_by:
func: diff
start_with_last: true
duration: 1month
float_precision: 0
Hi, I thought to have seen this topic before but could not find it. I have two charts with each 6 series and for some odd reason:
I have not defined anything for the y-axis, so why is it not showing a y-axis till max 100 and why are they different?
Answering myself: in this case the issue is with HA, the created sensors may show the same value but HA initiated them with a much (!) higher value and different values per sensor. This seems to be an existing erroneous behavior from the side of HA
Anyone been able to use a variable value as a color threshold? If so, how were you able to do this?
See here, you can use an attribute
any example yaml code for this?
This is a cut down version of one of mine that uses an attribute:
- type: custom:apexcharts-card
series:
- entity: climate.downstairs
attribute: current_temperature
name: Current
stroke_width: 2
color: orange
fill_raw: last
group_by:
func: avg
duration: 5min
show:
extremas: true
extend_to: now
yaxis:
- min: -10
max: 40
apex_config:
tickAmount: 5
header:
show: true
show_states: false
title: Downstairs
now:
show: true
label: Now
graph_span: 24h
span:
start: day
it throws an yaml error on my side
edited:
fixed
type: custom:apexcharts-card
series:
- entity: binary_sensor.8_8_8_8
attribute: current_temperature
name: Current
stroke_width: 2
color: orange
fill_raw: last
group_by:
func: avg
duration: 5min
show:
extremas: true
extend_to: now
yaxis:
- min: 0
max: 40
apex_config:
tickAmount: 5
header:
show: true
show_states: false
title: Downstairs
now:
show: true
label: Now
graph_span: 24h
span:
start: day
You’ll need to change to the correct attribute
Google pings Apex Chart.
type: custom:apexcharts-card
series:
- entity: binary_sensor.8_8_8_8
attribute: round_trip_time_max
name: Maximum
stroke_width: 2
color: orange
fill_raw: last
group_by:
func: raw
duration: 5min
- entity: binary_sensor.8_8_8_8
attribute: round_trip_time_min
name: Minimum
stroke_width: 2
color: blue
fill_raw: last
group_by:
func: raw
duration: 5min
- entity: binary_sensor.8_8_8_8
attribute: round_trip_time_avg
name: Average
stroke_width: 2
color: red
fill_raw: last
group_by:
func: raw
duration: 5min
yaxis:
- min: 0
max: 1000
apex_config:
tickAmount: 5
header:
show: true
show_states: false
title: Google Ping
now:
show: true
label: Now
graph_span: 24h
span:
start: day
and if you want current state in header just change show states to true under header
header:
show: true
show_states: true
title: Google Ping
Thanks, but not quite what I’m looking for. I’m using the Entsoe integration and have a bar graph of the electricity prices for today ant tomorrow. In the integration there is another entity which shows you the current % of the maximum price. I would like to color the bars according to
current % entity > 20 green,
current % entity > 50 yellow
current % entity > 80 red
For example. Not sure if you can use another entity as the input for a threshold value.
Oeps sorry, my apologies!
Hi everybody,
I have a question regarding my chart: I use ApexCharts to display my daily power consumption from my heat pump - this works fine:
Now I would like to display the sum of e.g. the last week or last month or something like that, but if I triy for example to use just the last 3 days and sum them up I get crazy values:
My code looks like this:
type: custom:apexcharts-card
header:
show: true
show_states: true
colorize_states: true
title: Wärmepumpe / Tag
graph_span: 3d1s
span:
end: day
show:
last_updated: false
apex_config:
chart:
type: area
stacked: true
height: 320
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
xaxis:
labels:
format: dd-MMM
fill:
type: gradient
gradient:
shadeIntensity: 0.8
opacityFrom: 0.7
opacityTo: 1
inverseColors: true
start:
- 0
- 90
- 100
cache: true
update_interval: 10min
series:
- color: rgb(10, 102, 25)
entity: sensor.warmepumpe_heizenergie_taglich
name: Heizen
type: column
group_by:
func: sum
duration: 3d
show:
datalabels: true
Any idea what I am doing wrong would be appreciated.
Thanks
Is it possible to have threshold colours for the y axis scale (not the graph line, but the actual scale)? I would like the positive bit of the scale to be red, and the negative bit of the scale green…
yaxis:
- id: elec_cost
show: true
opposite: false
apex_config:
forceNiceScale: true
labels:
style:
colors: '#ff0000'
tickAmount: 8
decimalsInFloat: 2
I tried this, which does not error but only gives the y axis scale in black:
yaxis:
- id: elec_cost
show: true
opposite: false
apex_config:
forceNiceScale: true
labels:
style:
color_threshold:
- value: 0
color: green
- value: 0
color: red
tickAmount: 8
decimalsInFloat: 2
Is it possible to hide certain values of a series in the chart? For example: I am trying to build a chart that shows the value of a stock. I would like to hide the weekends from the chart as the market is off on those days.
