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.
First, alignment above is off so assume it is better in the card yaml
Second, try this
transform: return x * hass.states['input_number.threshold_1_low'].state / 100;
If you would search 'hass.states" in this thread then you could find it too
did you ever figured out why the graph is skewed to the left?
I have found this ApexCharts card - A highly customizable graph card - #2452 by Erikfluff but that does what i would expect and just shows one huge bar 
EDIT:
so I have found
all_series_config:
group_by:
func: last
duration: 1d
start_with_last: true
this does solve the bar alignment, but datalabels arestill displayed incorrectly to the left. So now datalabels don’t display first label and are all displayed a bit to the left of the bar.
so it is a bug in apex chart with column being datetime Missing first X-Axis label · Issue #475 · apexcharts/apexcharts.js · GitHub
trying this
apex_config:
dataLabels:
position: bottom
dropShadow:
enabled: true
plotOptions:
bar:
dataLabels:
position: bottom
xaxis:
hideOverlappingLabels: false
min: 1ms
type: datetime
labels:
formatter: |
EVAL:function(value, dateObjx) {
const dateObj = new Date(dateObjx);
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
return `${month}-${day}`;
}
tickAmount: 14
results in
which I do not get at all why
Update:
So what is really happening is that last entry is duplicated and all the labels are moved to the right - ie. -12.8 should be for 10-15
is the workaround you did still working for you in latest version?
