Anyone know how to format the time on the X-axis? I want the seconds to be removed. In the Apexcharts documentation I see both notations but no parameter to influence it.
Here are some pointers which you can add under apex_config (and make it yaml style of course)
xaxis – ApexCharts.js
annotations:
xaxis:
labels:
datetimeFormatter:
hour: HH:mm
tickAmount: 30
show: true
rotate: -45
rotateAlways: true
hideOverlappingLabels: false
style:
fontSize: 10px
here is what I got so far but Guys I am stuck, wasting days…
For the room Temperature prediction based on yesterday’s values, is there a way with a filter or data generator to display the values from yesterday on today’s chart but only from the current time till the end of the day?
I want the past values left of the “Now” indicator and the predictions and forecasts right of the Now indicator.
Same with the dashed green line of the target Temperature and orange Gas usage Colums at the bottom
1 Like
@vingerha @Kugelblitz thanks for the pointers. Took some guessing but was even simpler then that
apex_config:
xaxis:
labels:
format: HH:mm
1 Like
I found it an interesting challenge but no solution (yet)
What I thought of:
- use transform and only show ‘x’ if the hour stamp is later then now. Issue: ‘x’ does not have any additional attibutes
- use transform with the hass entity but this does not allow to go back in time
- set opacity to 0 based on function but opacity has no option for ‘EVAL’
Note: datagenerator is never an option as it only looks at the current (!) state of the entity, nice for diving in attribs with timestamp, but that is it
1 Like
Apologies if this has been covered, I had a look through this thread but couldn’t find the answer. I have run out of skill with this…
I’m trying to combine 2 entities in to a single graph, but I can’t get it to join nicely between the separate entities.
I’d also like to show single high and low extremas for the entire graph, rather than the 2 series separately (ie would show 2 lows and 2 hights). For those not in the know with this data, it gets updated at 16:00 each day - so there’s not always 2 entities to show, as time runs out on the current data, until the next day entity updates.
I’d be super grateful for some pointers/assistance! Thank you 
type: custom:apexcharts-card
layout: top-level-graph
header:
show: false
title: Electricity Rates
apex_config:
legend:
show: false
tickAmount: 10
chart:
height: 120px
sparkline: false
xaxis:
show: false
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
lines:
show: false
grid:
show: false
padding:
left: -10
right: 0
top: -20
bottom: -20
stacked: false
series:
- entity: >-
event.octopus_energy_electricity_xxxxxxxx_xxxxxxxxx_current_day_rates
show:
extremas: false
name: today
offset: "-15 minutes"
extend_to: now
data_generator: |
return entity.attributes.rates.map((entry) => {
return [new Date(entry.start), entry.value_inc_vat*100];
});
- entity: event.octopus_energy_electricity_xxxxxxx_xxxxxxxxxx_next_day_rates
offset: +15 minutes
show:
extremas: false
data_generator: |
return entity.attributes.rates.map((entry) => {
return [new Date(entry.start), entry.value_inc_vat*100];
});
now:
show: false
label: now
yaxis:
- decimals: 0
graph_span: 24h
span:
start: minute
offset: +"0 minutes"
experimental:
color_threshold: true
all_series_config:
type: line
unit: p/kWh
float_precision: 0
stroke_width: 4
fill_raw: last
extend_to: now
show:
legend_value: false
in_header: false
header_color_threshold: false
color_threshold:
- value: 0
color: lightblue
- value: 0.1
color: lightgreen
- value: 10
color: green
- value: 20
color: orange
- value: 30
color: ec7063
- value: 40
color: cb4335
- value: 50
color: magenta
- value: 60
color: purple
- value: 80
color: black
Had the same issue months ago and now I finally can fix that too.
THANKS
I have 2 issues with this graph.
- the second axis is not there and the scale is on the left, not on the right and I can not fix it
- key problem is the question how to get for each hour just 1 value with its kWh consumption?
I want a stepline like the tibber prices.
So far I have used a helper to create an hourly counter but that becomes a curver, not a real stepline each hour.
I have faced these issues quite a lot for example also with the oil condense heater and its oil consumption. I wanted to have 1 figure for the whole day.
Only way out was to use an automation and to write the value of the sensor daily at 23:58 into an input number sensor. This way I get 1 value.
But isn’t there a smarter way to get these daily or hourly values saved,
I mean those are increasing counters and I only do need the last value of such sensor for every hour for example *:59 as I have done it with oil automation.
I would prefer to have a smarter solution than an input field and automation.
Here in the graph the red line is covered by the NOW bar, but it will be a zick zack curve and not a straight line from 0 to 1 am and 2 am.
Any ideas how to fix these ?
And finally how could get control over the x Axis like showing a vertical mark every 6 hours with its time ?
I was not able to get that in a controlable way that I could get 4 times. It only changed when I changed the span for example here beyond 2 days. If I chose 1,9 or 2 days then the times that will appear look overcrowded.
THANKS
first part has been solve:
Regarding the time line on the xaxis I had an example of 24 hours and each was shown like 01:00 02:00 which became unuseable
the last 2 lines fixed that !
apex_config:
legend:
show: false
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
tickAmount: 12
axisTicks:
show: true
UPDATE: WRONG, it only fixed it in the preview which I had overlooked.
But: If you increase the span from 24 h to over 26.5h you will see the time only every second hour like 0:00 02:00 04:00 - much more pleasant for the eyes.
Here you can see the x-axis with a readable scale
New user of ApexCharts card. My use case is for solar power generation with 3 entities Series (PV power output, Load power, Grid power). As there are large amount of data, I use group_by with func: avg to make the line/area graph cleaner. However, I notice that the entity states on header is also affected by the group_by and func: avg. Is it possible to have the header states display latest entity value not affected by group_by?
For as far as I know not easy but do add the code.
The alternatives that I know of (others may have better ideas)
- group on ‘max’ or ‘last’ not sure if this would provide poor results
- use statistics instead of history
- use two series for the graph (avg) and 2 others only for the header (ugly)
- use other cards for the header data (more ugly)
I was wondering if it would be possible to add the totals of “energieverbruik” and “stroomkosten” over the seven days span as an extra line in the legend. Now it is showing the value only of the last day. Something like “Total energieverbruik: 2,48”. And the same for “stroomkosten: 0,32” of course.
Hi, did you get an answer for this, I am trying to do the opposite, make the card full width via the Sections Layout, however there is no option to make it full width in the gui, also by adding the code manually has no joy?
This may help, tweak section width with card-options, for me not nice enough
ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community
I found the answer, for me in any case. In order to have the card width full screen in the section view you need to go to experimental mode at the moment!
Below:
experimental:
disable_config_validation: true
Then place the code:
grid_options:
columns: full
Cannot concur that one needs experimental, with me this works as per the link I sent, for full width but also for half width
Hi,
I have a question for ApexCharts card. I have one chart which contain two step line. The first step line is import energy the second is export energy of my solar system. I visualtiting two line in one chart. The Problem is the first chart y axis offset. If I show only first or second chart, looks like good. If I show both of them the y axis ofset in the first chart not good. Could you help help me, what is the problem my config?
My code:
type: custom:apexcharts-card
card_mod:
style: |
ha-card {
border-style: none;
}
graph_span: 8h
stacked: true
update_interval: 60s
all_series_config:
stroke_width: 2
curve: stepline
opacity: 1
header:
show: true
title: Fogyastás / Visszatáplálás
show_states: true
colorize_states: true
apex_config:
chart:
zoom:
enabled: true
toolbar:
show: true
series:
- entity: sensor.ada12_instantaneous_power_export
name: Visszatáplálás
- entity: sensor.ada12_instantaneous_power_import
name: Fogyasztás
I guess check the documentation and search or y-axis.
you have such a short yaml that a lot must be missing.
If I would throw in 100 lines of yaml code to copy you would learn nothing.
So I will not do that but show you an example with 8 power sensors working since the start.
Start reading the y-axis options and test the examples,
add one line after the other and write behind it what they achieve to not loose the knowledge for the future by forgetting cause there are a lot in apex.
But here is an example what you need for wider charts when you do not have a second scale on the right side and have to go the long way back to the left on a 50 inch screen
yaxis:
- id: first
min: -4000
max: 4000
decimals: 0
apex_config:
tickAmount: 8
- id: second
opposite: true
min: -4000
max: 4000
decimals: 0
apex_config:
tickAmount: 8
you had nothing so hard to expect that it works if you did not even tell it from which value to start and where to end aka min and max
if you ever see an example lilke this :
min: ~-4000
do not think that there is a typo.
this is an important feature n power related cards where you usually do not know the max and mins.
In my case above you can see that I have used 4000W cause my LFP battery can only be charged and discharged with 3000 W due to inverter limits .
If I would have set it to 3000 I could not see the differences beween load, what I got from the grid, charging and so on. So I went for 4000.
You can go for 10000 but it will become harder and to check the real daily life.
And that is the maybe -1500 to 1500 W bandwith.
OK,
if I would reduce that to have a closer look at the consumption and therefore also reduce the x bandwith to 30 minutes I can see quite well when a device turns on that has a high consumption.
Now imagine we would have a bright summer day , then you might see what you see on the left or similiar: charging the battery (and nothing from the grid)
But at a scale of -1500 to 1500 you would suffer from the green blindness cause the upper would be fully green and you might wonder how it has been the past hour or you would prefer a kind of dynamic scale with at least
-1500 to 1500 unless the value on a good day will be exceeded and you would like to have the full picture for example 2500 today and tomorrow what ever the highest value has been in the last 30 min.
Then this will fix it for the upper half even it will look weird for sure
min: -1500
max: ~1500
The positive scale will always be 1500 unless the highest value of any sensor has exceeded that like a water cattle with adds 3000W to the current load of 666 just 10 seconds before which means roughly: -1500 to 3750 or even 4000
~ means extend the scale upper band with to the biggest value in case needed
~- would do it for negative values too.
all of this code is just a preparation for a second axis on the right
- id: second
opposite: true
min: -4000
max: 4000
decimals: 0
apex_config:
tickAmount: 8
Opposite is easy cause false would show you 2 scales on the side of the chart. Makes no sense with only power sensors, but power and temperature to monitor a split AC in its heating performance might make sense.
I had forgotten about that - just to remind you how important it is to go step by step cause I had asked why my second axis is suddenly on the left, not on the right like in all my other charts. While typing this I had recogniced my mistake
- id: second
opposite: true # false creates the 2nd y axis on the left which means 2 on 1 side
Regardless what, write what you need to remember cause once used to apex you will find more and more techniques and forget about solutions achieved but in which chart to find `?
decimals is what is says: the limiter of decimals, but axis only
tick amount: 8
is the next big point to understand.
If you have 4000 W and -4000W you are covering a 8000 W bandwith.
8 deternines how many horizontal reference lines you might want.
8 means every 1000 W a line
Do not start with - 3500 to 4500 which is a 8000 W bandwith too.
The graph will start a - 3500 and every 1000 a line .
-3500 … -500 + 500
Oh, you will complain cause there is no line for the 0.
I have not found such feature to show a 0 Line, might exist but not found in the apex HA documentation.
There are 2 workarounds:
1
go back to -4000 to 5000 and change tick amount to 9
2
over time you might find it disappointing cause where is the 0 line, they look all the same and it becomes weirder if you have such -2500 to 6500 min and max cause now the zero is far more bottom.
create an input sensor with helpers and typ 0
Then add the sensor to the chart (I do it usually at the end)
and now you can add even a thickness of 2 or 3 or 4 or red - whatever you like.
And here is an example of one of these series with a lot of tiny tweaks I always use to get a proper view for people with glasses and elderly.
this is the first sensor - hybrid inverter and battery discharge rate in german
Name starts with “_” which is a protected space.
If you need add " Discharging Rate" it will be treated orr shown in apex as " Discharging rate" instead
If you need 2 or 4 space then repeat ____
Then I define the Unit again adding spaces to get more space between value and unit.
The weird thing is the sensors title behind that , right ?
OK, there is a trick.
In the header line all values are shown in a nice good readable coloured way. FOnt has a good size.
The sensors name looks like a shame for elderly cause they can not read them.
So I define both and mostly use only unit for display in the header.
If you define 2 y-axis you always have to define to which axis the sensors belong like Watt on the left and temperature on the right, where left means first, right second.
If you define 2 yaxis like shown above and you have multiple sensors then be aware if there is none with yaxis_id: second you will not get a second axis.
Next lesson: if you have a legend you can hide sensors by clicking on the title till you have only the one left wheere you wanna follow the values with the mouse by hovering and not jumping between the sensors up and down.
So you need to have a legend for analysis with a good comfort to hide all other sensors temporarily. Easy.
But if you hide the temperature sensor then it will disappear and suddenly the right y axis will be gone too. You wanted to hide, apex did hide the sensor and the no longer needed temperature sensor too.
Finally there is a show section which you have to learn yourself. First play around to see the difference when you turn the first option to true.
you might not recognice that first, but below the Value and its good readable unit you find the sensor name. BUT: do not throw the line name out of this series, cause if you have more sensors then the abuse of unit for value unit and sensorname will not longer worker properly cause they get to wide and you will end with 2 lines on the top which does not look nice. so use the show option.
2 more for you to uncover and even more in the documentation and those missing here have been deleted by me for one reason: if you do not read the documentation show (for a sensor) and its options you will not learn another important part which you will need in months and then have to search or wait for help. I could have let them in but you wanted to learn and you got a lot more to be able to benefit big time.
and the story can continue for hours sections by section, but you will not learn nor understand if you do not build your own kind of masterset, a general sensor with all options you ever used and full of notes behind #
same for apex config, and all other properties which means to always have an open notepad++ sheet with an increasing standard power sensor document and all what you have learned along the way when you work on an apexchart.
What you can see above has been evolved over monoths and is 300 or more lines long .
series:
- entity: sensor.growatt_akku_entladerate
name: "\_H.AKKU ENTLADEN"
unit: "\_W H.AKKU ENTLADEN"
yaxis_id: first
stroke_width: 1
color: blue
type: area
curve: stepline
color_threshold:
- value: -50
color: blue
opacity: 0.7
- value: 0
color: green
opacity: 0.7
show:
name_in_header: false
legend_value: false
in_chart: true
and here is a complete different sensor you do not have to create in configuration yaml cause it is a kind of virtual on the fly sensor very flexible.
If your battery is empty, then you look at the power curve and might wonder that it can not be true that it is empty again. Watching at such black line up and down makes it hard to determine if that HAUSLAST = total power of the house (in my case drawing energy from the grid to charge the battery is not part of the current load profile cause in that moment I am not consuming the energy , only storing it in the battery for later use during night when it finally will be shown as load).
So hide all other graphs (virtually spoken) and watch the only remaining one Hauslast and follow its graph ups and downs, and you can not judge if that could be 6 kWh or 8 maybe missing in the battery since fully charged.
Now click and show the average graph which shows the average load in the past 3 hours and that is a far more straighter line and easier to compare and judge about.
This is achieved by the group section.
My first choice is average (and lot more available) and then the most important point the span, the average about the last x hours.
This way you can play around and change on the fly compared to a template sensors which require 10 lines and what not where you destroy everything by changing its formula from average to sum cause if you do that once for 1 day then the scale might be broken and you see nothing of the past cause you might have gotten 100000 W figures due to sum .
- entity: sensor.growatt_akku_entladerate
name: "\_Ø ENTLADERATE 3h"
unit: " W Ø ENTLADEN 3h"
yaxis_id: first
stroke_width: 2
color: purple
curve: smooth
type: line
float_precision: 0
group_by:
duration: 3h
func: avg
show:
name_in_header: false
legend_value: false
in_brush: false
in_chart: true
BONUS
the chart above is mostly useless cause it is a birds eye view, a starting point to look back over 16,5 hours. You can not identify much more then ac charging started and decreased till battery was fill … and the battery then did not discharge.
Of cause, tibber prices where cheap for 1 cent I can not discharge and I had to wait.
Therefore I can use the same graph with just 2 differences:
Title and time span
And here you can see clearly how the grid has supported .
Look at the left axis. there is a small gap between the supply from the grid and the black house load graph zigzags.
this tiny white area.
This means there must a second energy source like solar power, but that would be positive on the top and it was too late.
What else can it be ?
Zoom into the cahr in the first 8 minutes and check close to the 0 axis!
there is a blue stepline hidden behind the reddish area showing the H Akku Entladen literally home battery discharge (rate)
Grid + battery discharge rate = current load
900 W + 100 W = 1000 W
And that is important to know, cause for these effects for area instead of lines you might work with opacity to get a tiny impression if there is something behind.
But to make that happen you need to know what creates the order, who is top and which sensor is behind , right ?
the list will start from the bottom and can be identified easily.
Look at the legend and the most left one tells you H Akku Entladen which is the bottom and on the right you find the last on the top.
In this case the 7 th sensor is grid power in red and therefore on top covering blue.
And this is the order in which I listed the sensors inside which means I have started with the H Akku Entladen = batt discharge sensor.
Hope you will learn a bit more from this. Others had helped me before here in the past year so time to return 1,5 hours of help and documentation to someone else or in this case you.
Good luck
UPDATE:
are you really knowing what you are doing ?
I hav scrolled back just saw a feature you should not use .
I am not sure it it is still experimental or not, but known for a bug which has issues cause it does not work or not always work at least in the summer.
But you complained about a system or result you had requested.
You said what you wanted and now you call it offset and error ?
Read the manual cause you are missing far, far too much if you only copy and paste. In your code is a line which tells apex to deliver exactly this graph.
You had not read the documentation, so I will not do it for you, so simply search the documentation for each keyword and learn seriously what it means.
Spend the 10 minutes and do the # master sensor documentation cause you will forget about it.
AND FINAL ADVICE: Do not copy and paste without fully understanding.
If you copy poor code you get low quality into your chart and you will copy it later.
You have copied it from a complete different use case and I have explaind such in the lines above but in a different way aka the gap.
remember garbage in means garbage out if you do copy and paste.
If you had told me that you had copied if and from what example I could have instantly told you what is causing the issue, which in reality is not bug, just your fault cause you had asked for this result as shown above.
And your example is so short that it takes less than 1 minute if you would exactly now what each term you have used means . Considering that graph_span 8h for example does not look like to cause such an impact as update_intervall: 60s too there are just a few terms to check.
garbage in garbage out - and even our school teachers warned us to do our job properly without copying by only writing down what you understand, not what you find a book and copied without being able to explain.
Sorry, but I was quite frustrated cause I had assumed a different cause which I had seen and the example looked too small land neglected to get proper results.
3 Likes
Maybe you should create your own website with all of this, impressive post