Do you have the code for this graph? Looks intersting! I have Price Plafond too
The code is above. It’s quite a simple graph, consisting 5 helpers which I made from the P1 meter data.
Solved this yet? I am interested too!
Thanks. I have a P1 meter too and want to realize this if possible I have a few questions tough. Maybe you should call me HA noob instead 
-
I see you have Type: Custom:config-template-card. How do I get this card?
-
I have a P1 meter too. Got this helpers already:
consumtion month off peak (same for week, day)
consumtion month normal (same for week, day)
Do I need more helpers for this? I see you have çonsumtion this month. How did you check the total consumtion of T1 and T2 from the p1 meter? -
How did you get the priceplafond data?
You would realy help me out! you have the perfect graph here 
thanks for sharing
Thanks! The graph you show here looks even better!
If you like to share the code would be awesome.
It worked tough, your code!
I’m also interested in how to calculate over multiple sensors…
Is it possible to have a stacked column chart with two sensors, but instead of adding both sensor values on top of each other, overlap them? Or in other words, on a non stacked column chart show both bars overlapped at the same x location.
I have two sensors, one is the total value and the second is a percentage of the total. I want it to look like a stacked column chart, but I don’t want the sum. I have searched the whole apex chart configuration but could not find an option for this, though it is a common use case, isn’t it?
1 Like
Is it possible to group several entities? Eg for an pie chart I’d like to give one series “entity” several entities that would aggregate/group the values of each sensor accordingly
My goal is to create an pie chart where ‘heating’, ‘lights’, ‘ev charging’, ‘boiler’ and ‘other’ are an set of groups that would display (total) usage for the defined window for each group in an pie chart. Each group usually contains more than one entity.
I’m trying to address a sub attribute within a attribute like this:
- entity: sensor.atv_weight_history
type: line
attribute: history[0].weight
It doesn’t error out but it doesn’t show anything either, i just shows the state of the main attribute.
Is this possible?
For those trying to replicate the original climate card look which includes the heating phases here is a little JS snippet that should do the trick:
type: custom:apexcharts-card
header:
show: true
show_states: false
colorize_states: true
graph_span: 4d
color_list:
- '#4c2621'
- '#ff5235'
- 'firebrick'
series:
- entity: climate.wohnzimmer_heizung
name: Aktiv
type: area
stroke_width: 0
show:
legend_value: false
data_generator: |
var url = 'history/period'
url += '/' + start.toISOString()
url += '?filter_entity_id=' + entity.entity_id
url += '&end_time=' + end.toISOString()
url += '&significant_changes_only=0'
const h = await hass.callApi('GET', url)
var out = h[0].map((e, i) => [e.last_updated, e.attributes.hvac_action == 'heating' ? e.attributes.current_temperature : null])
out = out.concat([[end.toISOString(), entity.attributes.hvac_action == 'heating' ? entity.attributes.current_temperature : null]])
return(out)
- name: Soll-
entity: climate.wohnzimmer_heizung
attribute: temperature
show:
legend_value: false
group_by:
func: max
duration: 2h
curve: stepline
- name: Ist-Temperatur
entity: climate.wohnzimmer_heizung
attribute: current_temperature
show:
legend_value: false
extremas: true
group_by:
func: avg
duration: 10min
1 Like
Is there a way to make it not reset zoom when new data is polled and added to the chart? I have new data coming in every 10 seconds and it barely gives me enough time to zoom in and examine fine details before the whole thing gets reset and I’m looking at the zoomed out chart again.
Can zero values be hidden on a chart?
E.g.:
My Off-peak power drops to zero at 8am, and then carves a “0” line until it resumes at 10pm. Can this be hidden if it is zero?
I’m thinking I should be able to do it with transform, but not sure on how to make that work - i.e. I want the values to be null if x is 0 (or between 0 and 1 really, as the sensor does have a tiny amount of movement in that range) and no line to be drawn until it is above 1.
How would I achieve that with transform?
I got it sort of working by creating a sensor which returns null when the value is 0:
You can see the transition from orange to red without zero values showing. That is what I want.
BUT - the orange series’ last value is showing in the header - 2,801. Clicking on that show the sensor’s value is null, not 2,801… how do I get it to not show the last numeric value?
My Ipad shows the graphs for a while but after a few minutes or after switching tabs I get following look. I have tried restarting the Ipad, clearing cash…I even tried the “default” ApexCharts-Card without any adjustments in the Yaml but that card behaves the same. Is there a fix for this? Ipad has IOs 12.5.7. Same problem if i download chrome-app and log in to home assistant from that app.
Thanks for any suggestions!
What does it say in the notifications ?
I got bored with the default Tool Tip, so I decided to add some color to it !! 
tooltip:
enabled: true
shared: true
theme: light
onDatasetHover:
highlightDataSeries: false
x:
show: true
format: ddd dd MMM HH:mm
'y':
formatter: |
EVAL:function(value, { series, seriesIndex, dataPointIndex, w }) {
const array_list = ['Schiphol Gevoel: ','De Bilt Gevoel: ','Mean Gevoel: ']
let detaillist = "";
let x = 0 * 1;
series.forEach((s) => {
if (seriesIndex == 0)
{
s[dataPointIndex] = s[dataPointIndex] || 0;
switch(x) {
case 0:
detaillist = detaillist + '<span style="color:#ADD8E6;font-weight:normal">' + array_list[x] + '</span>' + '<span style="color:#ADD8E6;font-weight:bold">' + s[dataPointIndex].toFixed(1).replace(".", ",") + '°C' + '</span>' + '<br>';
break;
case 1:
detaillist = detaillist + '<span style="color:#0096FF;font-weight:normal">' + array_list[x] + '</span>' + '<span style="color:#0096FF;font-weight:bold">' + s[dataPointIndex].toFixed(1).replace(".", ",") + '°C' + '</span>' + '<br>';
break;
case 2:
detaillist = detaillist + '<span style="color:#FFFF00;font-weight:normal">' + array_list[x] + '</span>' + '<span style="color:#FFFF00;font-weight:bold">' + s[dataPointIndex].toFixed(1).replace(".", ",") + '°C' + '</span>';
break;
}
x++ ;
}
else
{
if (seriesIndex == 1)
{
detaillist = null;
}
if (seriesIndex == 2)
{
detaillist = null;
}
}
})
return detaillist;
}
title:
formatter: |
EVAL:function(value){
value = '';
return value;
}
marker:
show: false
fixed:
enabled: false
position: topRight
offsetX: -250
offsetY: -45
3 Likes
Hi,
I would like to display fuel prices, but only 1 digit after the decimal point is displayed in the Chart.
But my entity shows me 3 digits
JET DIESKAUSTR. 111 Diesel
1,829 €
and I want to Show 2 like 1,89€
Here is my Code and a link to a Screenshot (i cant Upload Pictures because my Forum account is “to new”).
I added the ayxis decials but this works only on the yaxis (this part i understand 
)
type: custom:apexcharts-card
header:
show: true
title: Dieselpreise
show_states: true
colorize_states: true
graph_span: 3d
series:
- entity: sensor.jet_dieskaustr_111_diesel
name: Jet
- entity: sensor.hem_dieskaustr_155_diesel
name: HEM
yaxis:
- decimals: 2
If you have more than 1 series, then you need to use an id in your yaxis and access it for each series.
type: custom:apexcharts-card
header:
show: true
title: Dieselpreise
show_states: true
colorize_states: true
graph_span: 3d
series:
- entity: sensor.jet_dieskaustr_111_diesel
name: Jet
float_precision: 2
yaxis_id: diesel
- entity: sensor.hem_dieskaustr_155_diesel
name: HEM
float_precision: 2
yaxis_id: diesel
yaxis:
- id: diesel
decimals: 2