in the docs
1 Like
I tried the label thing to get the x-axis values black and bold and bigger
and that worked out again - here is a full feature set of the label thing
apex_config:
xaxis:
labels:
show: true
rotate: -45
rotateAlways: false
hideOverlappingLabels: true
showDuplicates: false
trim: false
minHeight: undefined
maxHeight: 120
style:
colors: black
fontSize: 16px
fontFamily: Helvetica, Arial, sans-serif
fontWeight: bold
cssClass: apexcharts-xaxis-label
And that makes a hug difference for my family, the readability of the figures and words .
lot of work I guess to fix it across all my apex charts on both axis and the legend, but it offers a lot of opportunities
@vingerha big thank you 
% what we needed
Hello, is it possible to make average of measurement during each hours in day for last week or month or defined days?
For example: I’m interested in graph where is average temperature from 0 to 24 of last week. In 1:00 is average temperature of 7 days at 1:00.
Is it possible to do this in ApexCharts?
Can I combine it with normal day chart to compare trend today temperature?
Why do I get so many decimals, even after requesting 0 decimals on the Y axis? 
ApexCharts card
type: custom:apexcharts-card
header:
title: Strømpris og forbruk
show: true
graph_span: 2d
span:
start: day
apex_config:
dataLabels:
enabled: false
stroke:
width: 3
chart:
height: 500px
fill:
type: gradient
gradient:
shadeIntensity: 1
inverseColors: true
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 100
- 100
- 100
yaxis:
- id: oere
min: 0
decimals: 0
- id: W
decimals: 0
opposite: true
min: 0
series:
- entity: sensor.nordpool_kwh_no4_nok_3_10_025
name: I dag
type: area
extend_to: now
yaxis_id: oere
show:
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nordpool_kwh_no4_nok_3_10_025
name: I morgen
type: area
color: blue
extend_to: now
yaxis_id: oere
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.power_myhome
show:
legend_value: false
extremas: true
stroke_width: 3
curve: smooth
color: "#949494"
opacity: 0.2
yaxis_id: W
extend_to: now
type: area
group_by:
func: avg
duration: 30min
name: Strømforbruk
now:
show: true
type: custom:apexcharts-card
header:
title: Strømpris og forbruk
show: true
graph_span: 2d
span:
start: day
apex_config:
dataLabels:
enabled: false
stroke:
width: 3
chart:
height: 500px
fill:
type: gradient
gradient:
shadeIntensity: 1
inverseColors: true
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 100
- 100
- 100
yaxis:
- id: oere
min: 0
decimals: 0
- id: W
decimals: 0
opposite: true
min: 0
series:
- entity: sensor.nordpool_kwh_no4_nok_3_10_025
name: I dag
type: area
extend_to: now
yaxis_id: oere
show:
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nordpool_kwh_no4_nok_3_10_025
name: I morgen
type: area
color: blue
extend_to: now
yaxis_id: oere
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.power_myhome
show:
legend_value: false
extremas: true
stroke_width: 3
curve: smooth
color: "#949494"
opacity: 0.2
yaxis_id: W
extend_to: now
type: area
group_by:
func: avg
duration: 30min
name: Strømforbruk
now:
show: true
Move your yaxis section out of apex_config, 2 to the left
1 Like
I’m still trying to wrap my head around yaml…
The data_generator is just beyond me…
I’m trying to get a trend line of a sensor (battery voltage, temperature, water consumption…)
For example, I have a derivative of a temperature sensor and I’d like to see what the temperature will be in 1h with a 2ºC/h change.
I guess all I’d need is a key pair with the current time+1h and in this case just add 2ºC to the current temp…
How would i do that?
return entity.attributes.something.map((entry) => {
return [new Date(from current+1h), entry.value+2ºC];
});
Sorry, I really have no idea where to get the data from and even less how to feed it back!
Thanks for any tips!!
Add an offset of 1h and transform: “return x + 2;”
Hi vingerha,
Thanks, the problem is I have no idea how to return these values. So far this is what I have and it will not show anything except “Loading…”
series:
- entity: sensor.jbd_bms_uart_total_voltage
name: ESU voltage
color: ROYALBLUE
type: line
show:
legend_value: false
data_generator: |
return entity.attributes.value.map((entry) => {
return [new Date().getTime()+30m, entry.sensor.derivativetest];
});
Is the “return.entity.attributes.value.map” correct? What is this from?
How do I get the current time so I can add +1h to it?
I’m just putting things and seeing if it changes anything hahahaha.
Thanks
I have no clue how your sensor looks like and the data_generator (unless you embark on something very special) takes the value from the series, not sure why you want two sensors in one series
EDIT: why not take just the derivative as series and add offset, transform to it?
I have no idea how to do that! 
I’m finally getting a graph with the data_generator and I now understand the JavaScript get time function. I still have no idea how to get a sensor data on the graph. I’ve tried raw numeral sensors too, no C, V, W or % endings, just a pure number and still no idea.
data_generator: |
return [[(new Date().getTime())-(60*60000),500], [(new Date().getTime())-(30*60000),500], [(new Date().getTime()),0], [(new Date().getTime())+(30*60000),500], [(new Date().getTime())+(60*60000),500]];
Basically I’m trying to get something like this:
As long as it works, but you have (!) to understand that without details, you get littl ehelp, I (at least) cannot guess what you have as a source, and you continue to not send that…for me this ends, maybe someone else can chime in
I appreciate the help, I’ve moved forwards with understanding a bit of how it works.
I just don’t know how to get it working. All I need are two data points, 1 now and 1 in the future.
The future point will be calculated from past data. I’m still struggling with the “now” part.
I don’t understand what you are asking me for, my sensors return numbers and HASS plots them on graphs.
For example, the battery voltage sensor attributes are as follows:
Result type: string
```{'state_class': <SensorStateClass.MEASUREMENT: 'measurement'>, 'unit_of_measurement': 'V', 'device_class': 'voltage', 'friendly_name': 'jbd-bms-uart total voltage'}```
This template listens for the following state changed events:
Entity: sensor.jbd_bms_uart_total_voltage
I’m pretty sure that for anyone that knows code better than me will see this is simple, for me it is a new world (i do love it, it’s just hard xD)
Hi,
I have created a dashboard where I monitor the energy consumption of the house, heat pump and wallbox, split into energy from the grid and the PV system. The dashboard contains lots of charts in the same style. See the screenshot:
I’d like to change from the default colors to something custom. I started editing the individual charts code on the top left. Is there a way to do definitions for all the charts and just refer to them instead of repeating the same code over and over, again?
2 Likes
Noticed that the color treshold does not work fully as wanted.
Now for example the value is 7.79 and I’ve set that it should be darkgreen between 0 - 9.7 but anyhow it shows orange
I’m glad it isn’t just me. color_threshold has broken on the latest update @romrider
It works in V2.0.4 so I reverted to that until it is fixed.
For me the bars shows the correct colors but when I try to have the average price to show colors according to same tresholds it doesn’t work.
The current price shows now green as the price is 4.64 but the average shows golden
color_threshold:
- value: 0
color: darkgreen
- value: 9.71
color: goldenrod
- value: 12
color: darkred
can you share the code, this looks really nice!
Hello, I am using Apexchart all over my dashboards but now i got to a limit.
I have 5 entities in one graph. 4 in kW and 1 in %. i took a very carefull look on it and every unit is correct.
But on the display side i have following bug:
Is soon i disable entity one, the axis on the left goes away and the other 3 entities with also kW are there without the y axis.
Hope its clear what i mean. please take a look. thanks! 
type: custom:apexcharts-card
graph_span: 24h
span:
start: day
stacked: false
show:
last_updated: true
now:
show: true
color: "#87ceeb"
label: Jetzt
header:
standard_format: true
show: false
show_states: false
colorize_states: false
apex_config:
legend:
show: true
yaxis:
- id: one
decimalsInFloat: 0
show: true
title:
text: kW
- id: two
decimalsInFloat: 0
show: false
title:
text: kW
- id: three
decimalsInFloat: 0
show: false
title:
text: kW
- id: four
decimalsInFloat: 0
show: false
title:
text: kW
- id: five
decimalsInFloat: 0
show: true
opposite: true
min: 0
max: 100
title:
text: "%"
xaxis:
tooltip:
enabled: false
grid:
borderColor: rgba(112, 135, 164, 0.1)
labels:
style:
fontSize: 15px
fontWeight: 500
fontColor: black
tooltip:
enabled: true
shared: false
fillSeriesColor: false
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 1
inverseColors: false
opacityFrom: 0.6
opacityTo: 0.1
stops:
- 0
- 100
all_series_config:
type: area
extend_to: false
stroke_width: 2
opacity: 1
group_by:
func: avg
duration: 1h
series:
- entity: sensor.inverter_1_mppt_total_input_power
name: PV Prod
yaxis_id: one
color: "#f4d043"
- entity: sensor.batterychargevalue
name: Ladeleistung
yaxis_id: two
color: "#98abed"
- entity: sensor.batterydischagevalue
name: Entladeleistung
yaxis_id: three
color: "#2062d2"
- entity: sensor.inverter_1_active_power
name: Leistungsaufnahme
yaxis_id: four
color: "#fe5800"
- entity: sensor.battery_1_battery_state_of_charge_soc
name: Batterie
yaxis_id: five
color: "#49A47D"
card_mod:
style: |
ha-card {
background: none;
border: solid grey 1px;
border-radius: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
I can only confirm this behavior, seems that y_axis are hidden when the series are hidden, even if muliple series map to the same yaxis_id and only one series gets hidden. You should raise a ticket here Issues · RomRider/apexcharts-card
Need some help accessing the state object / value within transform. I couldn’t find any examples that access the object. I found an issue talking about trailing state to access the value, but I don’t get the correct way. Below version at least let’s the chart load, but the value is NA.
- entity: sensor.electricity_price_average
transform: " return x * hass.states['input_number.threshold_1_low'] / 100;"
float_precision: 3
show:
legend_value: false
name: Low Threshold
yaxis_id: EUR
Threshold is a set % number that I adjust manually. And I want to see how the scaled avg price lies within the current real prizes over time.