Hi, thanks for responding so fast. I’ve tried your suggestion but the code only seems to spit out what im putting in. Other than that i have no idea where i can define On = 1 and Off = 0
transform: "return x === 'on' ? hass.states['binary_sensor.boiler_burner'].state : 5;"
results:
OK, so you are doing it differently from me. Did you check the pictures from my link (to my post above)?
You want to show how many hours in any given day (and a binary_sensor cannot do that). I was showing when it is on and off (and a binary sensor can do that).
Really? The graph itself can’t record the time of that sensor being on? That’s a shame, maybe I can work it with a helper?
Yes it can. However it appears (looking at your graph) that you are showing hrs/day not when off and on.
Please see my post above to see how I am doing it.
I am, but is that the whole code? I think im missing something there.
OK, try something like this:
- type: custom:apexcharts-card
apex_config:
chart:
height: 170px
graph_span: 168h
title: 'Heating'
yaxis:
- min: 0
max: 1
series:
- entity: binary_sensor.boiler_burner
transform: "return x === 'on' ? 1 : 0;"
note: I’m not sure if the ‘on’ in the last line needs capitalisation or not.
Its not working. Sorry to waste your time, i’ll try and figure something out one way or the other.
OK, good luck!
Hey!
What @jchh wrote is exactly how I do it too. Make sure that on vs ON capitalization. You can find it in the Developer Tools while looking at current state, it shows there as plaintext.
I have it similarly:
- entity: sensor.valve_operation
name: DWH heating
type: line
curve: stepline
color: blue
stroke_width: 2
opacity: 0.8
transform: 'return x === ''ON'' ? 2 : 0;'
yaxis_id: first
show:
in_header: false
legend_value: false
Note that double quotes around ON are put automatically while saving, and for Column type of entity it does not take into account length of operation. Stepline to the rescue.
Let us know how it goes!
“offset” is only for xaxis 
not for sensors value :(.
Use transform for the sensor value (y axis) eg:
transform: "return x + 24;"
Hey guys,
im using apex charts for a while and wondering today about the donut and pie visualization.
My code:
type: custom:apexcharts-card
chart_type: donut
header:
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.pi_hole_dns_queries_today
- entity: sensor.pi_hole_ads_blocked_today
- entity: sensor.pi_hole_ads_percentage_blocked_today
show:
in_chart: false
my result:
blue should take more than the half space of the donut. Same result on pie chart_type. Is this an known issue or did I missed something?
regards
Alex
If the blue number (24,487) and the orange number (44,505) are correct, the donut is exactly right.
22,4807/(22,487+44505) = 35.49%
i.e. Blue is about ⅓ of the total.
Oh… The total is orange and blue is 55% of orange. How can I define that orange is the total summary?
I think you need to create a new sensor that is total minus blocked and then display that and the blocked.
eg:
template:
sensor:
- name: "Pi-hole Ads Allowed Today"
unique_id: pi_hole_ads_allowed_today
state: "{{ ( states('sensor.pi_hole_dns_queries_today')|int - states('sensor.pi_hole_ads_blocked_today')|int )|int }}"
…and the plot the following:
type: custom:apexcharts-card
chart_type: donut
header:
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.pi_hole_dns_allowed_today
- entity: sensor.pi_hole_ads_blocked_today
- entity: sensor.pi_hole_ads_percentage_blocked_today
show:
in_chart: false
…note: I can’t check this for typos as I am not at my PC.
I’m building a graph for my electric water heater. I have 3 entities; water temperature, power usage and energy used. I would like to graph all 3 in the same graph.
The problem with energy used is that it’s an ever growing number. Is there a way I can offset the energy value with the first value of the graph. So energy will always begin at 0 kWh at the begining of the graph and raise as I see the power bars.
If you also have a trick for showing the power bars as a percentage, but keep showing the real value. The power draw is 4000 w and shown next to the temperature of 60 something create a useless graph. So I found how to convert it to percentage, but real values would be better.
Note: The graph is showing energy usage of an other sensor, as an example of the problem, the one for the electric water heater is brand new and was showing the graph correctly until the energy value gets too high.
type: custom:apexcharts-card
graph_span: 2d
header:
show: true
title: Réservoir Eau Chaude
show_states: true
colorize_states: true
now:
show: true
color: red
label: Now
span:
start: day
offset: -1d
series:
- entity: sensor.reservoir_eau_chaude_temperature_du_bas
name: Température
type: line
extend_to: now
group_by:
func: avg
duration: 15m
- entity: sensor.debarras_eau_chaude_power
name: Puissance
type: column
transform: "return x * 100 / 4000;"
unit: "%"
- entity: sensor.bureau_francois_thermostat_energy
name: Énergie
Not sure why your number is wrong, but I had a similar setup and was getting weird results also until I combined the “today” and “tomorrow” into one entity.
so instead of:
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
type: column
color: orange
float_precision: 3
stroke_width: 0
name: Dagens timepris
show:
in_header: false
legend_value: false
extremas: false
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
and
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
type: column
name: Morgendagens timepris
show:
in_header: false
legend_value: false
extremas: true
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
I use:
- entity: sensor.nordpool_kwh_dk1_dkk_3_10_025
type: column
color: orange
float_precision: 3
stroke_width: 0
name: Timepriser
show:
in_header: false
legend_value: false
extremas: false
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"]];
}));
after this, my bugs disappeared 
(Actually, I also use the color coding of bars for faster read-out)
color_threshold:
- value: 0
color: lightgreen
- value: 1
color: lightblue
- value: 2
color: orange
- value: 3
color: red
- value: 4
color: black
- value: 5
color: grey
For the color coding to work, you need the “experimental:” enabled
type: custom:apexcharts-card
experimental:
color_threshold: true
I have a working setup that shows Nordpool electricity prices for today and tomorrow. Because I’m unfamiliar with ApexCharts, I’m mostly copypasting other people’s work. I want the chart to show the actual total price including the electricity suppliers margin and the grid company’s transfer price in addition to the spot price.
My current solution is to just add the values like this ("+0.4+2.81"):
series:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
type: column
opacity: 0.7
extend_to: false
show:
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]+0.4+2.81];
});
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
type: column
opacity: 0.5
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]+0.4+2.81];
});
That works but it’s not a proper solution since I’d have to remember to change those in the chart settings if the prices change. I have helper values in Home Assistant for those prices and I’ve also got a sensor.electricity_additions_total that returns the sum of those. I use these elsewhere in the system.
I’d like to replace the “+0.4+2.81” part with fetching the value from the sensor so that I could manage the prices only in the helper values but can’t figure out how to do it. Any help for a newbie is highly appreciated!