Good morning,
I noticed that when apexcharts updates, the screen freezes for a few seconds.
Is there a solution?
I will be super transparent.My exploration of HA’s capabilities is just beginning, having installed it for the first time yesterday. I’ve successfully learned to install HAC, Nordpool, config-custom-cards and Apexchart-cards, e.g Newbie. I possess limited knowledge on fetching data, markup, and related aspects. However, onto my inquiry: I’ve achieved graph colorization using two colors. Yet, these colors tend to vary from hour to hour, rather than remaining fixed. Why does this occur?
type: custom:config-template-card
variables:
- '"sensor.nordpool_kwh_se3_sek_3_10_0"'
- Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].state)
- >-
String('Current price ' + states['sensor.nordpool_kwh_se3_sek_3_10_0'].state
+ ' kr/kWh')
entities: ${vars[0]}
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 36h
hours_12: false
header:
title: ${vars[2]}
show: true
span:
start: day
now:
show: true
label: Now
series:
- entity: ${vars[0]}
type: column
float_precision: 3
data_generator: >
return (entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(),
entity.attributes.raw_today[index]["value"]];
})).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
[new Date(start["start"]).getTime(),
entity.attributes.raw_tomorrow[index]["value"]]; }));
show:
extremas: true
header_color_threshold: true
color_threshold:
- value: 0
color: green
- value: ${vars[1]}
color: red
yaxis:
- decimals: 2
apex_config:
tickAmount: 10
Perhaps someone has managed to achieve the following, its actually how I want it to be (Ofc to highlight super intuitive what costly hours to avoid)
Fiddeling with the code provided by @M4tthijs over at: https://community.home-assistant.io/t/dynamic-color-threshold-for-apexcharts/610838/3 i’ve manage to solve my own question with the following code-snippet:
type: custom:config-template-card
variables:
- '"sensor.nordpool_kwh_se3_sek_3_10_0"'
- Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].state)
- >-
String('Current price ' + states['sensor.nordpool_kwh_se3_sek_3_10_0'].state
+ ' kr/kWh')
- Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.average)
- >-
(((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 0) +
Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
- >-
(((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 1) +
Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
- >-
(((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 2) +
Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
- >-
(((states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.max -
states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min) / 4) * 3) +
Number(states['sensor.nordpool_kwh_se3_sek_3_10_0'].attributes.min)
entities: ${vars[0]}
card:
type: custom:apexcharts-card
graph_span: 36h
hours_12: false
experimental:
color_threshold: true
header:
title: ${vars[2]}
show: true
span:
start: day
now:
show: true
label: Now
series:
- entity: ${vars[0]}
type: column
color: grey
float_precision: 3
data_generator: >
return (entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(),
entity.attributes.raw_today[index]["value"]];
})).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
[new Date(start["start"]).getTime(),
entity.attributes.raw_tomorrow[index]["value"]]; }));
show:
extremas: true
color_threshold:
- value: ${vars[4]}
color: '#42a047'
- value: ${vars[5]}
color: '#ffa600'
- value: ${vars[6]}
color: '#ff7100'
- value: ${vars[7]}
color: '#db4437'
yaxis:
- decimals: 2
apex_config:
tickAmount: 10
...
1 Like
yes, you can add the option “time_delta” to shift the graph to the left or right. I got mine to work by adding
now:
show: true
label: Nu
series:
- entity: sensor.stroomprijs
yaxis_id: first
time_delta: +50m
type: column
1 Like
Thx, I will try that.
Can I change the colour of the chart line above and below 0 ?
series:
- entity: sensor.p1_meter_5c2faf04a1f2_actueel_vermogen
name: Actueel Verbruik
float_precision: 1
extend_to: now
color: >
[[[
let state = states['sensor.p1_meter_5c2faf04a1f2_actueel_vermogen'].state
if(parseFloat(state) > 0 ){
return 'rgb(153,50,204)' }
return 'rgb(102, 204, 0)'
]]]
i tried this, but this is not working
Thanks! Can you share your code
Hello
This could be what you need??
apex_config:
dataLabels:
enabled: false
With Labels
Without
Best regards
Hi, would you be able to share the code that gave you this display ?
Thx in advance
Hi sure … here you go 
Code
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: Power
standard_format: true
show_states: true
colorize_states: false
update_interval: 1min
apex_config:
chart:
height: 350px
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
tools:
pan: true
xaxis.type: datetime
tooltip:
enabled: true
shared: true
followCursor: true
fill:
type: gradient
gradient:
type: vertical
shade: dark
shadeIntensity: 0.2
inverseColors: true
opacityFrom: 0.9
opacityTo: 0.2
stops:
- 0
graph_span: 24h
now:
show: true
label: Now
color: rgb(68,115,158)
span:
start: day
all_series_config:
type: area
opacity: 0.3
stroke_width: 1.2
show:
legend_value: false
color_threshold:
- value: -3
opacity: 0.9
- value: 0
opacity: 0.2
- value: 3
opacity: 0.9
series:
- entity: sensor.actuele_opbrengst_zonnepanelen_kw
name: Zonnepanelen
float_precision: 3
statistics:
type: mean
period: 5minute
align: middle
color: orange
unit: kW
extend_to: now
show:
legend_value: false
in_header: false
- entity: sensor.power_consumption
name: Afname
color: rgb(95,3,242)
float_precision: 3
statistics:
type: mean
period: 5minute
align: middle
unit: kW
extend_to: now
show:
legend_value: false
in_header: false
- entity: sensor.power_production
name: Injectie
invert: true
color: rgb(28,226,34)
float_precision: 3
statistics:
type: mean
period: 5minute
align: middle
unit: kW
extend_to: now
show:
legend_value: false
in_header: false
might have missed it in the thread, but did you already update this card after the demise of the forecast attribute, and change to the ‘get_forecasts’ trigger template?
if you make a trigger template:
template:
- trigger:
- platform: state
entity_id: sensor.date
# - platform: event
# event_type: event_template_reloaded
# - platform: homeassistant
# event: start
action:
- service: weather.get_forecasts
target:
entity_id: weather.buienradar
data:
type: daily
response_variable: buienradar_forecast
sensor:
- unique_id: buienradar_forecast_complete
state: >
{{now()}}
attributes:
forecast: >
{{buienradar_forecast['weather.buienradar'].forecast}}
# the above suffices. below attributes are just to break out the indivual forecasts..
forecast_0: >
{{buienradar_forecast['weather.buienradar'].forecast[0]}}
forecast_1: >
{{buienradar_forecast['weather.buienradar'].forecast[1]}}
forecast_2: >
{{buienradar_forecast['weather.buienradar'].forecast[2]}}
forecast_3: >
{{buienradar_forecast['weather.buienradar'].forecast[3]}}
forecast_4: >
{{buienradar_forecast['weather.buienradar'].forecast[4]}}
and then replace the weather entity in your card with the trigger based template sensor entity_id:
- entity: sensor.buienradar_forecast_complete
name: max.
yaxis_id: temp
unit: °C
type: line
color: '#FFBF00'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.temperature];
});
it works just like before.
2 Likes
Well, i ditch the ApexChart for The Weather, thou still use it for i.e energy prices/consumption, i even abandoned the top-banner:card., and the multi-entities for temperatures inside.
I replaced those( and alot more ) with Custom:button-card, and expander-cards (Hiding most graphs and Cams etc) So they first “load” if i need to see them
, trying to get as much as i can in my “Overview” page, without jeopardized the “security”
Thou i actually already feel it’s becoming to “Cluttered”
However i will try your template-sensor, as i currently have 2x5 individual template-sensors
Thou my weather: button-cards uses the same “weather” button-template in the View
2 Likes
Hello,
I have a small problem with the display of the ApexChart card. Despite an intensive search
online, I didn’t find anything about this. Since I only have limited space for the card,
I would like to utilize the unused space under the title. (marked in the picture)
I can save space with header/floating: true, but then header/title_actions isn‘t working anymore.
Since i want to use title_action, this is not an option for me and I’m looking for another solution.
Can anyone help me with this or has someone an idea on how to solve this?
Thank you in advance.
- type: custom:apexcharts-card
graph_span: 1 day
update_interval: 15sec
header:
show: true
title: Temperaturentwicklung
title_actions:
tap_action:
entity: sensor.broadlink_1_temperatur
action: more-info
show_states: false
standard_format: false
colorize_states: true
floating: false
apex_config:
chart:
height: 120px
offsetY: 10
parentHeightOffset: 12
tooltip:
enabled: false
xaxis:
labels:
style:
fontSize: 8px
fontWeight: 900
yaxis:
- id: left
decimals: 0
apex_config:
tickAmount: 4
labels:
style:
fontSize: 8px
fontWeight: 900
series:
- entity: sensor.broadlink_1_temperatur
stroke_width: 1
group_by:
func: avg
duration: 1min
card_mod:
style: |
ha-card {
font-size: 8px;
text-align: center
}
div#header__title {
font-size: 10px;
font-weight: 900;
}
#state__name, #state {
font-size: 8px !important;
}
hello sorry i cant help you with the question but i would like to have the code you are using pleaseeeeeeeeeeeee
thanks
Hi, my actual variant
- type: custom:apexcharts-card
header:
show: true
show_states: true
colorize_states: true
experimental:
color_threshold: true
series:
- entity: sensor.your_temperature_sensor
type: line
stroke_width: 3
color_threshold:
- value: 20
color: cyan
- value: 30
color: yellow
- value: 100
color: red
extend_to: now
show:
header_color_threshold: true
# yaxis:
# - min: 20
span:
offset: +1min
apex_config:
tooltip:
followCursor: true
x:
show: false
# markers:
# size: 1
xaxis:
tooltip:
enabled: true
grid:
show: false
graph_span: 1h
now:
show: true
# label: now
color: red
show:
last_updated: true
loading: true
i have this one wich is working just fine
''type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
title: Temperature Exterieur
show_states: true
series:
- entity: sensor.exterieur
type: area
name: E
color_threshold:- value: 0
color: 013DFF
opacity: 1 - value: 10
color: ‘#0D0DFF’ - value: 17
color: ‘#0D97FF’ - value: 20
color: ‘#FF8101’ - value: 25
color: ‘#FF0101’
stroke_width: 1
opacity: 0.4’’
- value: 0
thanks i made some changes, it is not bad now
thanks again
