Here is the same curve in both “apexcharts-card” and “history-graph”. It’s possible to see two differences. The part of the curve during the 11th of march with the minimum value is increasing slightly in “apexcharts-card” but not in “history-graph”, and during the 12th of march is the phenomena is easy to spot.
I guess (without having any detailed knowledge of the data format) that when a sensor is reporting the same value several times the value is stored once with with a start time and an end time to reduce storage and that “apexcharts-card” might miss the end time. That could be an explanation.
Super, now that’s a very clear picture of the problem.
There was a recent change to how the database stored data.
It now only stores values when changed, so you are correct in your thinking.
There is a fill parameter in the series options, fill_raw.
Setting this to zero might solve the problem.
Note, the parameter goes before any group options.
Hi,
Seems that I found bug where line is put in wrong place compared to both yaxis scales. Check out gray line with values 6.5 and 5.2 and it’s placed way to high. It’s placed correctly on the brush bellow.
Here is pic:
Config:
type: custom:apexcharts-card
header:
show: true
title: Average Outside Temperature vs Pellet Usage
show_states: false
colorize_states: true
update_interval: 1h
yaxis:
- id: temp
show: true
opposite: true
decimals: 0
- id: weight
show: true
opposite: false
decimals: 0
span:
start: isoWeek
offset: '-26day'
graph_span: 30d
apex_config:
tooltip:
x:
format: MMMM dd, yyyy.
xaxis:
tooltip:
enabled: false
stroke:
dashArray:
- 0
- 0
- 3
- 5
- 7
all_series_config:
stroke_width: 2
show:
in_brush: true
experimental:
brush: true
brush:
selection_span: 7d
series:
- entity: sensor.outside_home_temperature_average
type: line
yaxis_id: temp
name: Temperature
color: '#eb7757'
opacity: 1
extend_to: false
group_by:
func: last
duration: 1d
show:
extremas: true
- entity: sensor.pellet_consumption_today
type: column
yaxis_id: weight
name: Pellets
extend_to: false
group_by:
func: last
duration: 1d
color: '#a9d950'
opacity: 1
- entity: sensor.average_temperature_tomorrow
type: line
name: Forecast
yaxis_id: temp
extend_to: false
color: '#e6a037'
offset: '-1day'
opacity: 1
show:
offset_in_name: false
group_by:
func: last
duration: 1d
- entity: sensor.average_temperature_today_plus_2
type: line
name: Forecast
yaxis_id: temp
extend_to: false
color: '#e6dc22'
offset: '-2day'
opacity: 1
show:
offset_in_name: false
group_by:
func: last
duration: 1d
- entity: sensor.average_temperature_today_plus_3
type: line
name: Forecast
yaxis_id: temp
color: '#999999'
offset: '-3day'
opacity: 1
show:
offset_in_name: false
group_by:
func: last
duration: 1d
Also I have question related to these forecast lines. Currently they start at good point because they are recently created but is there a way to define starting date for specific entity inside series?
Was trying to use data_generator but can’t find a way to loop over entities instead of attributes.
i am trying to execute a transform command using config-template-card. The variable maxp contains a number from 10 to 50, transform also works if I insert the value directly. But not as a variable ${maxp}. What am I doing wrong?
series:
- entity: sensor.processor_use
transform: "return Math.min(${maxp}, x);"
Wondering if someone can help, as I can’t seem to get the cosmetics right on this one.
I have the following card, that will show monthly data over 12 months. However as you can see in the below screenshot, the x-axis is grouped in the center of the card, rather than being spread across the full width of the card.
I don’t seem to have this issue with other cards I have created.
Any thoughts on anything I could try? I seem to have been going in circles without much success.
Thanks for any help or suggestions!
type: custom:apexcharts-card
header:
show: true
title: Monthly Energy Savings
show_states: true
colorize_states: true
floating: false
disable_actions: true
graph_span: 12month
span:
end: month
show:
last_updated: true
stacked: true
apex_config:
chart:
height: 295
stroke:
show: false
legend:
show: false
yaxis:
- min: 0
max: ~10
decimals: 0
apex_config:
tickAmount: 4
series:
- entity: sensor.battery_savings_monthly
name: Battery So Far This Month
color: '#5692A9'
type: column
float_precision: 2
statistics:
type: state
period: month
align: end
- entity: sensor.solar_savings_monthly
name: Solar So Far This Month
color: '#F29C38'
type: column
float_precision: 2
statistics:
type: state
period: month
align: end
- entity: sensor.battery_solar_savings_monthly
name: Total So Far This Month
color: '#598EBE'
type: line
float_precision: 2
show:
datalabels: true
statistics:
type: state
period: month
align: end
Hi,
ist it possible to show the graph only until the current time?
…I tried some configuration with span, start and and…but finally I didn’t find a solution for me.
i want to show the graph from the current day until the current time.
thanks in advance
extend_to: now
1 Like
perfect, thank you
Would love to see your code for this 
Did you end up getting anywhere with this…im also trying to alter the marker
I now dispense with the variable with config-template-card, although the function would sometimes be interesting in order not only to set span variably. Nevertheless, I am very pleased with the CPU chart. To get a better resolution, I have set the maximum here to 30%, of course the transform-command can also be removed:
type: custom:apexcharts-card
update_interval: 30sec
experimental:
color_threshold: true
now:
show: true
graph_span: 48h
style:
title: ''
top: 7%
left: 75%
header:
title: CPU über 24h (max=30)
show: true
colorize_states: true
series:
- entity: sensor.processor_use
transform: return Math.min(30, x);
color_threshold:
- value: -10
color: green
- value: 0
color: green
- value: 15
color: yellow
- value: 20
color: orange
- value: 22
color: orangered
name: CPU RP4
type: line
statistics:
period: 5minute
stroke_width: 1
show:
extremas: true
Is it possible to change the title of the card using templates but without using config-template-card?
Has anyone had any success setting tickAmount with separate y-axes? I have the following, but can’t find a way to incorporate tickAmounts that works.
type: custom:apexcharts-card
graph_span: 24h
apex_config:
stroke:
width: 2
curve: smooth
xaxis:
tooltip:
enabled: false
annotations:
yaxis:
- 'y': '1.14'
borderColor: orange
header:
show: false
series:
- entity: sensor.pillings_lock_water_level_stage
name: Level
yaxis_id: level
- entity: sensor.pillings_lock_flow_logged
name: Flow
yaxis_id: flow
yaxis:
- id: flow
show: true
min: 0
max: 60
decimals: 0
- id: level
show: true
min: 0.8
max: 1.6
decimals: 2
opposite: true
If I put it under the yaxis section of apex_config then nothing happens. If I put it under the individual yaxis ids further down, then HA complains that:
/// apexcharts-card version 2.0.2 /// value.yaxis[0] is not a ChartCardYAxisExternal; value.yaxis[0].tickAmount is extraneous
I’ve had a look at the card docs, this thread, and the ApexCharts.js documentation, but can’t figure out what’s wrong. Thanks!
Where did you get the idea of defining Y outside apex_config: ?
PS: I don’t see ( in you code ) where you “tried” to put “tickamount”, And i don’t see a Yaxis-section in your apex-config
This is the correct method if you are using the HA implementation of yaxis.
yaxis:
- id: flow
show: true
min: 0
max: 60
decimals: 0
apex_config:
show: true
showAlways: true
showForNullSeries: true
tickAmount: 6
labels:
1 Like
Ah, perfect - thank you!
hmmmm i have been wondering few times, seeing some peoples code, so your saying there is 2 “official” ways of making it work in HA ( the correct way(ha-implementation) and apexchart-config-way) ?
I find it easier to define most config under “apex-config” and “all_series_config:”
Both methods are correct. It’s the user’s choice which method they use.
There’s also a third way, and that is to just use ApexCharts and use the Webpage card to access a localhost html document. For this you would need to be running HA in a docker enviroment and have knowledge of the Apache HTTP Server (localhost), html and javascript.
As you can see from the image below, it’s dry with no rain forecasted for the next 2 hours !!
1 Like
Hi,
Did anyone encounter these errors?
Error: <svg> attribute height: Expected length, "NaN" and Error: <path> attribute d: Expected number, "M 0 NaN".
When _windowResize is called. Somewhere the script tries to find a dimension that returns NaN.
– Ingrid