This is indeed how I would like to have the background and the text. But I only get this when if I use the dark mode (which I don’t wont to have permanently activate).
Thanks for the update. I’ve pushed this back to priority number 1 billion for the moment. If I ever get around to it and find a working solution, I’ll post it here.
1 Like
Would love to know this yaml if you are sharing.
Thanks.
Ok, in the end I found a solution that is satisfactory for me, which uses highs and lows of the forecast. From these, the average is calculated. No gaps, no overlaps. I’m happy with it.
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
let result = (entry.temperature + entry.templow) / 2;
return [new Date(entry.datetime).setHours(cur_hour), result];
});
full code
type: custom:apexcharts-card
graph_span: 9d
span:
start: day
offset: '-3d'
header:
show: false
title: Temperatur
now:
show: true
label: jetzt
apex_config:
chart:
height: 200px
dropShadow:
enabled: true
opacity: 0.3
grid:
show: true
legend:
show: false
tooltip:
enabled: true
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
axisTicks:
show: false
axisBorder:
show: false
yaxis:
- show: true
decimals: 0
apex_config:
tickAmount: 2
update_interval: 1h
all_series_config:
stroke_width: 4
unit: °C
series:
- entity: weather.wetterstation
name: Temperature
attribute: temperature
fill_raw: last
extend_to: now
color: orange
opacity: 0.9
curve: smooth
group_by:
func: avg
duration: 1h
- entity: weather.forecast_home
color: orange
opacity: 0.5
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
let result = (entry.temperature + entry.templow) / 2;
return [new Date(entry.datetime).setHours(cur_hour), result];
});
3 Likes
This issue is marked as completed on Nov 13, 2022
I did give it a try. I can configure a ccomplete apexchart as scatter but not just one of the dataseries while the others in the same card are lines.
Did you ever get it working @AleXSR700 ?
I would love to have some help with this quite unique case, hoping someone has done this.
I have not found any information about how to manipulate normal history entity state and that particular datetime of state inside ApexChart. I would like to move simple semsor containing float value and show all last week values in ApexChart shifted 1 week forward.
Can data_generator manipulate entity.state object this way?
Do you want to change the dates of last week’s values? If not then why not use offset? Provide and example as this may help instead of theoretical stuff
1 Like
Thank you, offset was just the thing I was looking for! Now I hope I can manipulate data a bit more with transform and additional calculations.
Only thing left is to scale the offset data to the right way as it seems to stick with original data. 
I’m a bit baffled with my multi-Y axis config as the main chart does not honor the yaxis_id, but the brush honors it. I just can not find what’s wrong it, deleted series by series but no avail, -7d offset stays not multiplied on main chart. 
Long shot, if someone else can spot the reason in the chart code?
type: custom:config-template-card
variables:
MOVINGAVERAGE: states['sensor.nordpool_price_today_average_whole_day_longterm_mean']
entities:
- ${MOVINGAVERAGE.entity_id}
card:
type: custom:apexcharts-card
graph_span: 13d
span:
start: day
offset: '-7d'
apex_config:
xaxis:
labels:
datetimeFormatter:
day: dd ddd
chart:
height: 300%
yaxis:
- id: tanaan
decimals: 0
apex_config:
tickAmount: 4
- id: power
opposite: true
decimals: 0
min: 0
- id: temperature
opposite: true
decimals: 0
show:
last_updated: true
experimental:
brush: true
color_threshold: true
brush:
selection_span: 13d
apex_config:
xaxis:
labels:
datetimeFormatter:
day: dd ddd
header:
title: Sähkön hinta, tuulivoima ja lämpötila
show: true
show_states: true
colorize_states: true
now:
show: true
label: Nyt
series:
- entity: sensor.fingrid_wind_power_generation_forecast_hourly
yaxis_id: power
name: Windpower gen forecast
type: line
curve: stepline
stroke_width: 2
color: grey
data_generator: |
return entity.attributes.events.event.map((d, index) => {
return [new Date(d["start_time"]).getTime(), entity.attributes.events.event[index]["value"]*1];
});
show:
header_color_threshold: true
legend_value: false
in_header: false
name_in_header: false
extremas: true
- entity: weather.openweathermap
yaxis_id: temperature
name: Lämpötilaennuste
curve: stepline
stroke_width: 2
color: purple
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
show:
header_color_threshold: true
legend_value: false
in_header: false
name_in_header: false
extremas: true
- entity: sensor.weather_combined_temperature
yaxis_id: temperature
name: Lämpötila
curve: stepline
stroke_width: 2
extend_to: now
color: purple
show:
header_color_threshold: true
legend_value: false
in_header: false
name_in_header: false
extremas: true
- entity: sensor.nordpool_fi
name: Tänään
yaxis_id: tanaan
show:
in_brush: true
in_chart: true
extremas: true
in_header: raw
header_color_threshold: true
legend_value: false
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: ${MOVINGAVERAGE.state * 1}
color: lightblue
- value: ${MOVINGAVERAGE.state * 33}
color: darkgreen
- value: ${MOVINGAVERAGE.state * 75}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
- entity: sensor.nordpool_fi
name: Huomenna
yaxis_id: tanaan
show:
in_brush: true
in_chart: true
extremas: false
in_header: false
header_color_threshold: true
legend_value: false
type: column
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
color_threshold:
- value: ${MOVINGAVERAGE.state * 1}
color: lightblue
- value: ${MOVINGAVERAGE.state * 33}
color: darkgreen
- value: ${MOVINGAVERAGE.state * 75}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
- entity: sensor.nordpool_price_now_euro
name: Price_euro
yaxis_id: tanaan
show:
in_brush: true
in_chart: true
extremas: false
in_header: false
header_color_threshold: true
legend_value: false
type: column
transform: return x * 100;
color_threshold:
- value: ${MOVINGAVERAGE.state * 1}
color: lightblue
- value: ${MOVINGAVERAGE.state * 33}
color: darkgreen
- value: ${MOVINGAVERAGE.state * 75}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
- entity: sensor.nordpool_price_now_euro
name: Price_euro
yaxis_id: tanaan
offset: '-7d'
show:
in_brush: true
in_chart: true
extremas: false
in_header: false
header_color_threshold: true
legend_value: false
type: column
transform: return x * 100 * 3
color_threshold:
- value: ${MOVINGAVERAGE.state * 1}
color: lightblue
- value: ${MOVINGAVERAGE.state * 33}
color: darkgreen
- value: ${MOVINGAVERAGE.state * 75}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
After eliminating all other bells and whistles from chart, I definetely do not get why multi-Y is behaving like this:
type: custom:apexcharts-card
graph_span: 14d
span:
start: day
offset: '-7d'
yaxis:
- id: first
experimental:
brush: true
brush:
selection_span: 14d
series:
- entity: sensor.nordpool_price_now_euro
name: Price_euro
yaxis_id: first
offset: '-7d'
show:
in_brush: true
in_chart: true
type: column
transform: return x * 3
- entity: sensor.nordpool_price_now_euro
name: Price_euro
yaxis_id: first
show:
in_brush: true
in_chart: true
type: column
could please sure your code for this one?
How can I make some series not showing up when hoovering over it? In this graph only the yellow bars are important.
Hi All, I am having some issues with my Energy graphs - I have it configured to show monthly data, but for some reason if I compare it with the actual sensor history/statistics, it is clearly visible that the Apex card is missing data for some reason.
Screenshot of Apex charts
Configuration
type: custom:apexcharts-card
graph_span: 12months
header:
show: true
title: Monthly energy consumption
show_states: true
span:
start: month
offset: '-11 months'
series:
- entity: sensor.p1_meter_5c2faf042e4c_total_power_import
name: Electricity import
color: '#3b0145'
type: column
group_by:
func: delta
duration: 1 month
show:
datalabels: true
- entity: sensor.p1_meter_5c2faf042e4c_total_power_export
name: Electricity export
color: green
type: column
group_by:
func: delta
duration: 1 month
show:
datalabels: true
- entity: sensor.gas_meter
name: Gas consumption
color: '#450101'
type: column
group_by:
func: delta
duration: 1 month
show:
datalabels: false
- entity: sensor.vadgalamb_temperature
name: Weather
color: '#f0b002'
type: line
group_by:
func: avg
duration: 1 month
Screenshot of starting value (LTS) from the 1st of December
Screenshot of last recorded values from today
If you check the values, you can see that the delta is around 443 kWh, yet the card only shows around 374 kWh.
Any idea why?
I would like to improve this graph, it show’s the rainfal per month of the last 7 years, but with 7 bars per month the bars disappear at the edge of the graph. ‘Today’ marker is also out of the chart. Finally the extreme-labels do not appear above the right bar. I always want the chart to begin in January 1st and end in December 31th. If I change this, the monthly sums are calculated wrongly.
type: custom:apexcharts-card
graph_span: 1y
header:
show: true
title: Neerslag
show_states: true
colorize_states: true
now:
show: true
label: Nu
span:
end: year
yaxis:
- id: first
show: true
opposite: true
min: 0
max: 250
- id: second
show: false
opposite: true
min: 0
max: 250
apex_config:
legend:
show: true
position: right
labels:
colors: '#fff'
chart:
height: 460px
zoom:
enabled: true
foreColor: black
yaxis:
opposite: true
labels:
rotate: 45
style:
colors: '#fff'
xaxis:
labels:
rotate: 0
rotateAlways: true
format: MMM
style:
colors: '#fff'
datetimeFormatter:
month: MMM
day: dd MMM
hour: HH:mm
format: MMM
dataLabels:
enabled: true
dropShadow:
enabled: true
background:
enabled: true
borderWidth: 2
borderColor: '#dddd00'
foreColor: '#fff'
opacity: 0.5
borderRadius: 50
experimental:
color_threshold: true
series:
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#eeeeee'
type: column
opacity: 0.5
offset: '-6y'
show:
extremas: true
in_header: false
yaxis_id: first
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#cccccc'
type: column
opacity: 0.5
offset: '-5y'
show:
extremas: true
in_header: false
yaxis_id: first
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#aaaaaa'
type: column
opacity: 0.5
offset: '-4y'
show:
extremas: true
in_header: false
yaxis_id: first
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#7777aa'
type: column
opacity: 0.5
offset: '-3y'
show:
extremas: true
in_header: false
yaxis_id: first
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#5555aa'
type: column
opacity: 0.5
offset: '-2y'
show:
extremas: true
in_header: false
yaxis_id: first
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: '#3333aa'
opacity: 0.5
show:
extremas: true
in_header: false
yaxis_id: first
type: column
offset: '-1y'
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
- entity: sensor.ws2900_daily_rain_rate
name: Neerslag
color: Yellow
opacity: 0.5
type: column
statistics:
type: state
period: day
group_by:
func: sum
duration: 1month
yaxis_id: first
show:
datalabels: true
in_header: true
all_series_config:
stroke_width: 0.5
show:
header_color_threshold: true
legend_value: false
curve: straight
Have you tried to use diff instead of delta with start_with_last: true ?
Code
type: custom:apexcharts-card
chart_type: donut
layout: minimal
header:
show: true
title: Verbrauch
show_states: true
colorize_states: true
series:
- entity: sensor.daily_imported_energy
color: cornflowerblue
show:
legend_value: false
datalabels: percent
float_precision: 1
name: Netzbezug
- entity: sensor.daily_direct_energy_consumption
color: orange
show:
legend_value: false
datalabels: percent
float_precision: 1
name: Photovoltaik
apex_config:
legend:
show: false
dataLabels:
formatter: |
EVAL:function(value) {
return value.toFixed(0) + "%";
}
plotOptions:
pie:
startAngle: -120
endAngle: 120
donut:
size: 55
labels:
show: true
name:
show: false
total:
show: true
formatter: |
EVAL:function(w) {
return w.globals.seriesTotals.reduce((a, b) => {return a + b}, 0).toFixed(0).toLocaleString()+ " kWh";
}
Unfortunately, i don’t know how to bring the unit below the value.
1 Like
It’s exactly the same. It is as if it leaves out the statistics part of the data and only considers the delta between the lowest and highest point of the sensor history. As history turns into statistics, the value changes on the graph each day.
But how do I fix this?
Thank you very much!
Hi. I am using a RadialBar chart. This works great if the data is a percentage.
What if I want to display a temperature (35 - 65 degrees) over the whole range of the radial bar (which works with a simple transform) AND also display the actual temperature (rather than a %).
In my example below, a temp of 35 correctly shows as a minimum on the radial bar, but rather than ‘0%’, I would like the display to be ‘35’. And a temp of 65 correctly displays as a maximum reading on the radial bar, but rather than ‘100%’, I would like the display to be ‘65’.
Is it possible to achieve this?
type: custom:apexcharts-card
chart_type: radialBar
header:
show: false
apex_config: null
series:
- entity: sensor.hwc_percentage_remaining
color: '#E91E63'
- entity: sensor.hwc_temp
color: '#FF9101'
transform: return (x - 35) * 3.33
Hello everyone
I am also working with the Apex-Card at the moment and have already made a lot of progress thanks to the forum. But there is one point where I am not making any progress. My wife would like to have her weight fluctuations visualized as we have long-term statistics thanks to the Bluetooth scales. I have been able to create a suitable design, but I can’t set the 0 value or recognize which value the apex card has come up with.
The fluctuations in the card are between 54 and 56 kg, but I would like to set the desired weight as the “0” value so that I can see the fluctuations based on this value.
I am also considering doing the same with the ideal temperature in the rooms (if this is possible with the value)
Does anyone have any ideas?
Thanks in advance
type: custom:apexcharts-card
graph_span: 60days
experimental:
color_threshold: true
apex_config:
legend:
show: false
xaxis:
labels:
format: dd.MM.
header:
title: Gewichtsschwankung
standard_format: true
show: true
series:
- entity: sensor.influx_aileen_weight_365days
float_precision: 1
type: area
stroke_width: 0
color_threshold:
- value: 1
color: red
- value: 0
color: yellow
- value: -1
color: green
group_by:
func: diff
duration: 7d
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
let d = new Date(key).getTime();
if (d > 0)
res.push([d, value]);
}
return res.sort((a, b) => { return a[0] - b[0] });
1 Like
Is there some “magic” for accessing the history / statistic data? I have tested with several sensors that do have historical data stored for them, but cannot seem to get it to show on apex charts, just “N/A”. I’ve tested several options, but nothing works. Here is one example:
type: custom:apexcharts-card
header:
show: true
title: Statistics Test Card
show_states: true
colorize_states: true
series:
- entity: sensor.house_consumption_kwh
stroke_width: 2
statistics:
type: max
period: 5minute
align: middle
curve: stepline
Result:
…and as said, have tested with different sensors, different options etc. Something I need to enable somewhere before this works?