Indeed! So sorry. I am testing all sorts of graphs and got carried away. 
Hi,
I am making following chart :
- type: custom:apexcharts-card
apex_config:
chart:
height: 350px
experimental:
color_threshold: true
graph_span: 24h
header:
title: Elpriser pr. time (kr/kWh)
show: true
span:
start: hour
offset: '-2h'
now:
show: true
label: Nu
yaxis:
- min: 0
apex_config:
tickAmount: 5
series:
- entity: sensor.strom_pris
type: column
data_generator: |
var data = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
});
if (entity.attributes.tomorrow_valid) {
data.concat(entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
}));
}
return data;
float_precision: 2
color_threshold:
- value: 0
color: green
- value: 2.8
color: orange
- value: 3.5
color: red
- value: 5
color: darkred
and the sensor data is at the moment of the screenshot this :
current_price: 3.405
unit: kWh
currency: DKK
area: East of the great belt
area_code: DK2
tomorrow_valid: true
next_data_update: '13:08:00'
today:
- 2.686
- 2.806
- 2.869
- 2.951
- 2.869
- 2.993
- 2.907
- 3.207
- 3.413
- 3.431
- 3.223
- 3.196
- 3.138
- 2.873
- 2.765
- 2.838
- 2.922
- 3.237
- 3.76
- 4.054
- 3.891
- 3.597
- 3.561
- 3.405
tomorrow:
- 3.495
- 3.439
- 3.464
- 3.452
- 3.462
- 3.446
- 3.419
- 3.435
- 3.478
- 3.337
- 3.325
- 3.31
- 3.264
- 2.756
- 2.547
- 2.611
- 2.773
- 2.192
- 2.283
- 2.482
- 2.295
- 2.245
- 2.177
- 2.079
raw_today:
- hour: '2022-04-02T00:00:00+02:00'
price: 2.686
- hour: '2022-04-02T01:00:00+02:00'
price: 2.806
- hour: '2022-04-02T02:00:00+02:00'
price: 2.869
- hour: '2022-04-02T03:00:00+02:00'
price: 2.951
- hour: '2022-04-02T04:00:00+02:00'
price: 2.869
- hour: '2022-04-02T05:00:00+02:00'
price: 2.993
- hour: '2022-04-02T06:00:00+02:00'
price: 2.907
- hour: '2022-04-02T07:00:00+02:00'
price: 3.207
- hour: '2022-04-02T08:00:00+02:00'
price: 3.413
- hour: '2022-04-02T09:00:00+02:00'
price: 3.431
- hour: '2022-04-02T10:00:00+02:00'
price: 3.223
- hour: '2022-04-02T11:00:00+02:00'
price: 3.196
- hour: '2022-04-02T12:00:00+02:00'
price: 3.138
- hour: '2022-04-02T13:00:00+02:00'
price: 2.873
- hour: '2022-04-02T14:00:00+02:00'
price: 2.765
- hour: '2022-04-02T15:00:00+02:00'
price: 2.838
- hour: '2022-04-02T16:00:00+02:00'
price: 2.922
- hour: '2022-04-02T17:00:00+02:00'
price: 3.237
- hour: '2022-04-02T18:00:00+02:00'
price: 3.76
- hour: '2022-04-02T19:00:00+02:00'
price: 4.054
- hour: '2022-04-02T20:00:00+02:00'
price: 3.891
- hour: '2022-04-02T21:00:00+02:00'
price: 3.597
- hour: '2022-04-02T22:00:00+02:00'
price: 3.561
- hour: '2022-04-02T23:00:00+02:00'
price: 3.405
raw_tomorrow:
- hour: '2022-04-03T00:00:00+02:00'
price: 3.495
- hour: '2022-04-03T01:00:00+02:00'
price: 3.439
- hour: '2022-04-03T02:00:00+02:00'
price: 3.464
- hour: '2022-04-03T03:00:00+02:00'
price: 3.452
- hour: '2022-04-03T04:00:00+02:00'
price: 3.462
- hour: '2022-04-03T05:00:00+02:00'
price: 3.446
- hour: '2022-04-03T06:00:00+02:00'
price: 3.419
- hour: '2022-04-03T07:00:00+02:00'
price: 3.435
- hour: '2022-04-03T08:00:00+02:00'
price: 3.478
- hour: '2022-04-03T09:00:00+02:00'
price: 3.337
- hour: '2022-04-03T10:00:00+02:00'
price: 3.325
- hour: '2022-04-03T11:00:00+02:00'
price: 3.31
- hour: '2022-04-03T12:00:00+02:00'
price: 3.264
- hour: '2022-04-03T13:00:00+02:00'
price: 2.756
- hour: '2022-04-03T14:00:00+02:00'
price: 2.547
- hour: '2022-04-03T15:00:00+02:00'
price: 2.611
- hour: '2022-04-03T16:00:00+02:00'
price: 2.773
- hour: '2022-04-03T17:00:00+02:00'
price: 2.192
- hour: '2022-04-03T18:00:00+02:00'
price: 2.283
- hour: '2022-04-03T19:00:00+02:00'
price: 2.482
- hour: '2022-04-03T20:00:00+02:00'
price: 2.295
- hour: '2022-04-03T21:00:00+02:00'
price: 2.245
- hour: '2022-04-03T22:00:00+02:00'
price: 2.177
- hour: '2022-04-03T23:00:00+02:00'
price: 2.079
today_min:
hour: '2022-04-02T00:00:00+02:00'
price: 2.686
today_max:
hour: '2022-04-02T19:00:00+02:00'
price: 4.054
today_mean: 3.191
tomorrow_min:
hour: '2022-04-03T23:00:00+02:00'
price: 2.079
tomorrow_max:
hour: '2022-04-03T00:00:00+02:00'
price: 3.495
tomorrow_mean: 2.949
unit_of_measurement: DKK/kWh
device_class: monetary
icon: mdi:flash
friendly_name: Strøm Pris
At night 00:00 the tomorrow_validthe sensor will go false and no data would be for tomorrow. During the day around 13:30-14:00 the sensor tomorrow_valid will go true and data will be available for tomorrow in the attribute raw_tomorrow for sensor sensor.strom_pris however my graph doesn’t show the data as you can see in the first graph screenshot. At 00:00 the data would show in the graph (second graph screenshot) but then it’s missing the previous 2h. Any ideas what i am doing wrong ?
When having 2 or more curves, is there a way to make the info-box that appears when hovering your mouse over the lines to show ALL curves in the same info-box? Because sometimes it can be hard to select all diffrent curves individually. This way it doesnt matter if all curve’s stats is shown in the box at the same time at the specific time you’re on.
dear all… someone could point me to the right direction on how to solve my problem??
I have a binary_sensor.alarm (with state 0 and 1) but when i create my apexchart card… no values!
I’m trying to create something like the history bar chart (with on or off states) in HA history.
Thanks a lot.
Something like this?
type: custom:apexcharts-card
graph_span: 2w
span:
end: day
header:
show: true
title: Binary
series:
- entity: binary_sensor.workday_sensor
transform: 'return x === "on" ? 1 : 0;'
name: ' '
type: area
color: grey
opacity: 0.2
stroke_width: 0
curve: stepline
show:
legend_value: true
in_header: false
name_in_header: false
datalabels: false
1 Like
hi! thanks a lot! it works like a charm!!!
so please, just another question:
Could you check this discussion??
I’m using that code for two input_select, the first to select the sensor and the second for select the period… now… how can i use human-readable names insted of sensor name???
Thanks a lot.
hello,
i need some help…
i want to setup a 2nd yaxis on the right for SolarPower, but i always get an error
/// apexcharts-card version 1.10.0 /// Multiple yaxis detected: Some yaxis are missing an 'id'.
- panel: true
title: MPPT Tag
path: mppt-graph
badges: []
cards:
- type: 'custom:apexcharts-card'
update_interval: 5min
cache: true
graph_span: 1d
span:
start: day
header:
show: false
series:
- entity: sensor.solar_output_voltage
yaxis_id: output_voltage
- entity: sensor.solar_output_current
yaxis_id: output_current
- entity: sensor.solar_input_power
yaxis_id: input_power
- entity: sensor.solar_input_voltage
yaxis_id: input_voltage
- entity: sensor.solar_input_current
yaxis_id: input_current
- entity: sensor.solar_mppt_temp
yaxis_id: mppt_temp
- entity: sensor.solar_output_power
yaxis_id: output_power
yaxis:
- id: output_power
- show: true
min: 0
max: 400
opposite: true
- id: output_voltage
- show: true
min: 0
max: 16
opposite: false
- id: output_current
- show: true
min: 0
max: 30
opposite: false
- id: input_voltage
- show: true
min: 0
max: 50
opposite: false
- id: input_current
- show: true
min: 0
max: 30
opposite: false
- id: input_power
- show: true
min: 0
max: 400
opposite: true
- id: mppt_temp
- show: true
min: 0
max: 60
opposite: false
all_series_config:
type: area
curve: smooth
extend_to_end: false
apex_config:
stroke:
width: 1
fill:
type: gradient
gradient:
shadeIntensity: 1
inverseColors: false
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 40
- 70
- 100
what do i do wrong?
Someone can help me?
EDIT: wrong syntax:
- id: output_voltage
- show: true
should be
- id: output_voltage
show: true
hello! i’m using the zoom function but it works only on my mac… in mobile device nothing to do…
someone could help me??
thanks
Yes it doesn’t work on a mobile
ok man! thanks a lot!
1 Like
Which zoom function are you referring to on mobile? I can use the pan and zoom functions on mobile if that is what you mean.
hi! no pan icon on my mobile but on my mac yes… mah…
Is it possible to format the x-axis? I see the hours_12 option, but I’d like to convert x-axis values which look like this: 11:00 am to something like this 11am to save space.
Got it working. altroug i dont get it exactly as yours
i also have a selector for the timespan (see screenshot). But when i change it, there is no resfresh on the data like yors.
This is really nicely done, could you share the final code?
Sure, here is the code
type: custom:apexcharts-card
header:
title: ''
show: true
show_states: true
colorize_states: false
graph_span: 12h
apex_config:
tooltip:
enabled: false
annotations:
position: back
yaxis:
- 'y': 10
strokeDashArray: 5
borderColor: '#962626'
borderWidth: 1
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 175
grid:
show: false
borderColor: '#404040'
strokeDashArray: 10
position: back
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.5
opacityTo: 0
stops:
- 0
yaxis:
- min: 0
max: ~10
apex_config:
forceNiceScale: true
decimalsInFloat: 0
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
series:
- entity: sensor.marbg_wind_speed
name: Vind
type: area
color: 3ca358
float_precision: 0
fill_raw: last
- entity: sensor.marbg_wind_speed_max
name: Vind max
type: area
curve: smooth
color: fc7703
fill_raw: last
show:
extremas: true
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 28px 0px 38px 8px;
font-size: 15px;
font-family: 'Segoe UI Light";
text-align: center
}
div#header__title {
font-size: 20px;
font-weight: 300;
font-family: 'Segoe UI Light";
font-color: #ff0000
}
1 Like
I only see the pan/zoomicons when I first tap on the top right side of the graph
Hope someone can help, I’ve tried many variations and cannot get this to work, not sure if it is even possible.
I want this transform to return the state of an entity (Y) or 0 depending on the state of a binary sensor:
transform: "return x == 'on' ? Y : 0;"
It works fine if just add a number but not a template:
transform: "return x == 'on' ? {{ states('sensor.sensorname', 'number') }} : 0;"
I’ve tried all sorts of quotes variations
Could someone please help me with color_threshold? It looks a bit strange…
(should be gray up to 1500, orange up to 6550 and lime above 6850)
This is my config:
- type: custom:apexcharts-card
graph_span: 48h
span:
start: day
experimental:
color_threshold: true
update_interval: 5min
apex_config:
yaxis:
min: 0
max: 10000
tickAmount: 5
header:
show: true
title: Solar Production vs. forecast
show_states: true
now:
show: true
label: jetzt
apex_config:
legend:
show: false
series:
- entity: sensor.el_leistung_pv_ac
name: Aktuell
unit: W
fill_raw: last
extend_to_end: false
group_by:
func: avg
duration: 30min
color_threshold:
- value: 0
color: gray
- value: 1500
color: gray
- value: 2000
color: darkorange
- value: 6552
color: darkorange
- value: 6852
color: lime
- entity: sensor.solcast_forecast_average_30_min
name: Vorhersage
unit: W
fill_raw: last
extend_to_end: false
color: gray
- entity: sensor.solcast_forecast_rest
type: line
extend_to_end: false
unit: W
show:
in_header: false
color_threshold:
- value: 0
color: gray
- value: 1500
color: gray
- value: 2000
color: darkorange
- value: 6552
color: darkorange
- value: 6852
color: lime
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.period_end), entry.pv_estimate*1000];
});
I had an old setup with only one series that was working as expected:
- type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 48h
update_interval: 5min
apex_config:
yaxis:
min: 0
max: 10000
tickAmount: 5
now:
show: True
label: "jetzt"
span:
start: hour
series:
- entity: sensor.solcast_forecast_chart
data_generator: | # This is what builds the data
return entity.attributes.timestamps.map((ts, index) => {
return [new Date(ts).getTime(), entity.attributes.forecast_values[index]];
});
color_threshold:
- value: 0
color: gray
- value: 250
color: gray
- value: 500
color: darkorange
- value: 6552
color: darkorange
- value: 6852
color: lime
I don’t see the difference in these configs regarding the color_threshold.
Can someone help?
Well… looks like it healed itself over night 
