I decided that a separate graph for tariff may make more sense and avoid the multiple y-axis. Easy, right?
Well now I have a new issue - when there is one series, the yaxis label and padding is closer to the left edge than when there is two or more. Any tips to get all of these aligned?
one more if I may:
Brush - can one brush apply to multiple charts in HA?
I see documentation supports chart ID for this, not sure this exists in HA?
You recently opened another post outside of this one where you showed a different resultset for 15-min data. Are you saying thet the 1-minute response looks different form the 15-minute reponse? Is there an option from OWM to provide different formats?
I myself am no datagenerator expert and do not have the time (incentive) to see if this would work at all with above data.
What could be done, is IF(!) the data cannot be provided alike the 15-minute response, you could use a curl and pipe the response through jq to reformat the output. I can try to help with that but that needs a different post as that has nothing to do with Apex itself
Ultimately you could aim for a format alike this:
forecast:
- dt: 1721214360,
precipitation: 0
- dt: 1721217900,
precipitation: 0
etc.
I also forgot if Apex responds well to timestamps but this you can check above in this post too I assume
Yes, that other post was OpenMeteo that I got working minutes after I realised how it worked.after your last reply. But then I found that while OpenMeteo provide 15 min data for a whole day, and OpenWeatherMap provides 1 min data for an hour, but neither does both, so I’m using both now! I naievely thought OpenWeatherMap would be a simple change but it’s just very annoying!
Curl is a great suggestion, I’ll do that. That also opens up a load of other ways to reparse the data in a way I can debug
Apexchart timestamps are ms epoch times so you have to x1000 the dt fields returned from these services
Chris
Hi,
can you please give me some hints on how to configure these charts, especially the wind direction one?
Thanks
@vingerha (or anyone who knows) could I instead use JavaScript Object.values to convert that JSON object to a nested array (I can lose the keys, I don’t need them)
I’m not sure what limitations the JavaScript in datagenerator has?
Chris
EDIT I just found out I can use name: ' ' and it will remove the names.
But the double box question remains.
Can the sensor name be removed from this?
The box is so large due to the name being so long that it’s impossible to see what I’m pointing at.
Also why is there two instances of the time?
Both the box below the graph and the main box?
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
legend:
show: false
graph_span: 48h
header:
title: Electricity
show: false
span:
start: day
offset: +0d
now:
show: true
label: Nu
series:
- entity: sensor.nordpool_kwh_se4_sek_3_10_025
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: 0
color: green
opacity: 1
- value: 0.5
color: yellow
- value: 1
color: red
- entity: sensor.nordpool_kwh_se4_sek_3_10_025
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: 0
color: green
opacity: 1
- value: 0.5
color: yellow
- value: 1
color: red
As mentioned, I am not a dg expert. Can help with jq …
Turns out you can use Object.values to do this without using command line. The JSON data is a JSON object within the entity (I thought I might have to parse it but I don’t) and Object.values converts a curly bracketed JSON object individual element {“dt”: 190210982019, “precipitation”: 1} into an array format [190210982019,1] … and then the normal way of using data works again
Code for reference:
- entity: sensor.openweather_all
type: column
name: Rainfall
color: '#00008b'
data_generator: |
var data = []
for (let i = 0; i < 59; i++) {
data.push([1000 * Object.values(entity.attributes.minutely[i])[0], Object.values(entity.attributes.minutely[i])[1]]);
}
return data;
if you don’t have a JSON object but just have a normal array, the code is the same but remove the Object.values wrapper (only)
Chris
Hi there,
I spotted a little flaw in my graph and I really would like to get rid off it.
Basically I want to compare the temperature data from today with the data from yesterday. But when I use span with start: day the yesterday state (blue line) in the header and below the graph shows always the last value of the graph (in my case the last value of the day (25.8 °C))
Is it possible to use span with start: day and show the value from exactly -24h (based on the graph below it would be around 24.5 °C)?
Already many thanks for reading so far 
Here is the current layout:
type: custom:apexcharts-card
hours_12: false
graph_span: 1d
update_interval: 5min
span:
start: day
header:
show: true
title: Wohnzimmer
show_states: true
colorize_states: true
series:
- entity: sensor.temperature_11
name: Heute
fill_raw: last
- entity: sensor.temperature_11
name: Gestern
offset: '-1d'
fill_raw: last
Hi All,
is there a way to combine a value from one sensor with another sensor, using a radial chart?
What I’m trying to achieve is show the % used of my HDD, with the actual TB used as text. My code and resultant graph are below. The radial part is my HDD % used, and instead of the 50.6% shown , would like to replace it with the TB left available.
I hope that makes sense - any help is much appreciated
type: custom:apexcharts-card
header:
show: false
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
hollow:
size: 70%
fill:
type: gradient
gradient:
shade: dark
shadeIntensity: 0.15
inverseColors: false
opacityFrom: 1
opacityTo: 1
stroke:
dashArray: 4
lineCap: flat
legend:
show: false
series:
- entity: sensor.new_buzzard_volume_1_volume_used
name: Volume 1
color: green
Add this for the yesterday entity
- entity: sensor.temperature_11
name: Gestern
offset: '-1d'
fill_raw: last
show:
in_header: before_now
Maybe not a direct solution to your question but how I’ve done similar using a donut chart for my power. The total label is what I’ve used in the centre and then the javascript is to set the style and apend the units.
If your entity isn’t giving you the TB, you could use this area to ‘do maths’ on the % to give a TB value.
Alternatively, you could embed the apex chart in to a custom:config-template-card so that you can define your TB entity as a variable, then potentially use that in the label.
apex_config:
plotOptions:
pie:
donut:
labels:
show: true
total:
show: true
showAlways: true
fontSize: 22px
fontFamily: Helvetica, Arial, sans-serif
fontWeight: 600
formatter: |
EVAL: function (w) {
return (w.globals.seriesTotals.reduce((a, b) => {
return a + b
}, 0) / 1000).toFixed(1) + " kW"
}
Hello. I’m having an issue with Apex Charts in the way that it forgets some older data.
For example here.
Am I doing something wrong?
Thanks!
Hello. I’m trying to do exactly what you did here, I have the entity that gives me the total, I have several entities that shows instant power and I would like to create that “Other” that calculate Total - Individuals.
Can you share the complete code for this graph please?
Thanks!
Thanks for taking the time to reply @alexeiw123 ! I do have an entity “sensor.volume1_space_used” which does provide the TB.
Based on your suggestion I’ve tried the below, but it does not return anything
formatter: >-
function (w) { return
'${states['sensor.volume1_space_used']}' }
I’ve read through the docs and this thread, and see a few others have asked similiar questions, but no working examples - other than the “total” approach which you have shared.
…perhaps just not possible, and I may just need to change my approach.
thanks again!
Seems you are uing history values which are purged every x-days (default 10)…use statistics instead (search in this very long thread of posts)
Thanks vingerha for the info. I checked the thread, but I could only find people asking for this feature. Maybe if they solved the issue, didn’t wrote back (or I didn’t find the solution at least)
So @Lunkobelix @RomRider did you manage to solve the long-term statistics to show up in apex charts?
Thanks!
No worries - I use a template sensor to workout the ‘other’ power from my whole of house monitoring minus the other loads that I’m reporting on individually. Simplified the code for you here.
template:
sensor:
- name: unmonitored power
unit_of_measurement: "W"
device_class: power
state_class: measurement
state: >
{% set cons = states('sensor.consumption') | int(default=0) %}
{% set load1 = states('sensor.load1') | int(default=0) %}
{% set load2 = states('sensor.load2') | float(default=0) %}
{% set load3 = states('sensor.load3') | float(default=0) %}
{% set loadx = states('sensor.loadx') | float(default=0) %}
{% set all = (load1 + load2 + load3 + loadx) | int(default=0) %}
{{ max(cons - all,0) }}
Here’s my config for that donut chart exactly as I use it. You’d obviously need to change the sensors, sizes etc. to suit your dashboard
type: custom:apexcharts-card
chart_type: donut
update_interval: 2s
color_list:
- '#1a936f'
- '#c6dabf'
- '#4071ed'
- purple
- orange
- brown
- pink
- cyan
- blue
- '#6F4E37'
- indigo
- yellow
- gold
- lavender
- '#71797E'
header:
show: true
title: Power Consumption Now
all_series_config:
unit: W
show:
legend_value: true
in_header: false
apex_config:
stroke:
width: 1
legend:
show: false
chart:
height: 355px
animations:
enabled: true
plotOptions:
pie:
dataLabels:
minAngleToShowLabel: 5
customScale: 1
expandOnClick: true
donut:
size: 50%
labels:
show: true
total:
show: true
showAlways: true
fontSize: 22px
fontFamily: Helvetica, Arial, sans-serif
fontWeight: 600
formatter: |
EVAL: function (w) {
return (w.globals.seriesTotals.reduce((a, b) => {
return a + b
}, 0) / 1000).toFixed(1) + " kW"
}
name:
show: true
value:
show: true
fontSize: 16px
fontFamily: Helvetica, Arial, sans-serif
fontWeight: 400
dataLabels:
enabled: true
formatter: |
EVAL: function (value, opt) {
if (opt.w.config.series[opt.seriesIndex] >= 1000) {
return opt.w.config.labels[opt.seriesIndex] + ": " + (opt.w.config.series[opt.seriesIndex] / 1000).toFixed(2) + " " + " kW" ;
} else if (opt.w.config.series[opt.seriesIndex] < 1000) {
return opt.w.config.labels[opt.seriesIndex] + ": " + opt.w.config.series[opt.seriesIndex].toFixed(0) + " " + " W" ;
}
}
series:
- entity: sensor.twc_charger_load_always_w
name: EV Chargers
- entity: sensor.hot_water_system_supply_switch_0_power
name: Hot Water
- entity: sensor.fridge_current_consumption
name: Fridge
- entity: sensor.smart_plug_washer_power
name: Washer
- entity: sensor.smart_plug_dryer_power
name: Dryer
- entity: sensor.sw2_tvmedia_power
name: Media
- entity: sensor.smart_plug_dishwasher_power
name: Dishwasher
- entity: sensor.study_desk_smart_plug_power
name: Study
- entity: sensor.ac_power_total_corrected
name: Air Con
- entity: sensor.smart_plug_coffee_machine_power
name: Coffee Machine
- entity: sensor.dehumid_smart_plug_power
name: Wardrobe Dehumidifier
- entity: sensor.smart_plug_thermomix_power
name: Thermomix
- entity: sensor.oven_and_cooktop_power_b
name: Oven
- entity: sensor.oven_and_cooktop_power_a
name: Cooktop
- entity: sensor.unmonitored_power
name: Other