I wanted to create a consumption graph that had the monthly consumptions, i.e. grouped by month, over a year.
Is this possible? Thanks.
another beginner question: where do I go to have the graphs not show the connecting curve:
- type: custom:apexcharts-card
header:
show: true
title: Espresso
show_states: true
graph_span: 2d
series:
- entity: sensor.espresso_keuken_actueel
stroke_width: 2
it should really look like the more-info, displaying 0 when it is 0 …
Did you try without layout-card to see if there’s a difference?
Grouping by month is not possible (at least at the moment because months have variable lengths), you can only group by say 30 days instead.
You’ll have to use curve: stepline in the serie.
1 Like
thanks! just didnt realize it did what its says it does, I had already tried curve: straight for that matter 
All the better, since custom:more-info card doesnt work anymore for showing the more info graphs. Nice…
This card is great. Still trying to figure some items out but it certainly is extremely capable.
I have a problem that I can’t figure out. I must have something set up incorrectly.
I have a graph showing the temp over the current day and the corresponding temp from the previous day. Everything works great except the displayed temp for the previous day appears to only show the last temp read for the previous day (header and in the legend.) If it would show the matching temp (-1d) for the current time it would be great but showing the end of day temp is useless. I can hide these but hiding the previous day info also hides the current day info which works fine.
The tool tips when hovering also appear to be redundant. I get a tip displaying the current date and another that shows the same information as well as the current data point. They tend to hide more of the graph than i would want when displayed. Is it possible to hide the one that only shows the date info?
Any help with this would be greatly appreciated.
Edit:
At least I figured out how to hide the individual entity info that was bothering me.
I had the same issue when installing using HACS. After going to lovelace resources, and changing the path, getting an error, setting back the original path, and pressing F5 in the browser it suddenly worked!
I have a similar issue here in yyaxis config when using brush
Hey @RomRider - finally got around to setting up my first ApexChart - loving it. Very flexible and so much faster than embedded Grafana charts, which is what I’ve been doing forever. So I’m pretty keen to migrate my Grafana charts over to yours.
One thing I’m stuck on: sometimes I like to include one or more series on a chart that I don’t want included in the legend. Is there any way I can mark a series to be excluded from the legend?
Many thanks,
Nick
Does someone know a trick how to get really nice y-axis scaling?
For a humidty graph I would like to have the ticks only on multiples of 10. For the attached screenshot best would be ticks at 50, 60, 70, 80 and 90%.
I have tried forceNiceScale: true but that it does less ticks but not on multiples of 10. The align_to: 10 does it like shown in the attached screenshot. But when using align_to and forceNiceScale, forceNiceScale does nothing.
I could set a fixed min and max, but than, I need to use 0 to 100 although most of the time it is only in a smaller bandwidth.
Do anyone know if it’s possible to set an entire area chart colour based on the latest value? - I have a chart as shown below, embedded in custom button-card (ignore the alignment issue… it’s not finished 
)
And I’d like to set the colour of the entire chart if the latest value is above x, red if above y etc…
I tried out the color threshold option, but that seems to give a gradiant for each data point rather than setting the whole chart.
Also, is it possible to fade to a lower opacity for the chart (ie. fade it out at the bottom) regardless of the value? - again I can see an opacity option for the colour_threshold setting, but not sure how I can use that to get a fade so that all cards look consistent…
For clarity here is the card config;
graph:
card:
type: "custom:apexcharts-card"
layout: minimal
update_delay: 2min
graph_span: 12h
yaxis:
- min: ~13
max: ~26
show: false
all_series_config:
type: area
color: "#3182b7"
stroke_width: 4
group_by:
func: avg
duration: 15min
apex_config:
tooltip:
enabled: false
Any pointers would be appreciated 
Is it possible to fill area chart only for values below treshhold?
I’d like to fill negative temperature (below zero) on my graph, like that:
You may be able to do this by wrapping the apexcharts card in a config template card.
1 Like
Hi @RomRider and thanks for a really great chart!
I wonder if there is any way to adjust the “color_threshold:” dynamically?
I.e. I’m using the Nortpool integration where I get the cost of kWh per hour the next 24 hour.
I would like to color, let say the 4 most expensive hours red, cheapest 6 hours green etc. This will of course change every day.
Cheers
Hey,
This is achievable with config-template-card.
1 Like
Hi @RomRider and thanks for card and support!
It is working fine.
I have a question - is it possible to change the datasource “on the fly”?
I have found (in ApexCharts docu) the “customIcons” in toolbar with the possible mapping to a function, but not sure how it could work here.
I want to click anything and change the URL (and reload the chart) in this code snippet:
data_generator: |
var data = [];
url = new URL("http://homeassistant.local:8123/local/data.csv");
function getValue(){
var request = new XMLHttpRequest();
request.open('GET',url,false);
...
return data1;
}
return getValue();
How did you get so many points? I’m trying to do a stock price chart but I only get points every hour.
Hi, thanks for such a great card.
I am trying to graph the energy used every hour coming from some utility_meters, most days with good results, but one thay and another I get this graph:
At the change of day (hour 0) the chart calculates a negative ammount.
Here is the relevant config for the “grid vall” (green) meter:
type: custom:apexcharts-card
graph_span: 24h
span:
start: hour
offset: '-24h'
update_delay: 3s
update_interval: 1min
cache: true
header:
show: true
show_states: true
series:
- entity: sensor.energy_current_hour
name: solar sud
color: blue
fill_raw: 'null'
group_by:
duration: 1h
type: area
opacity: 0.1
stroke_width: 1
curve: stepline
- entity: sensor.main_energy_day_vall
name: grid vall
color: rgb(76,161,55)
fill_raw: last
group_by:
func: diff
duration: 1h
fill: last
type: area
opacity: 0.2
stroke_width: 1
curve: stepline
Any advice for solving this? (apart from limiting the y_axis to a min value of 0)?
Not sure what you mean with points, but the graph shows the power values (W) from my inverter.
The energy values (kWh) are calculated every hour.
I would like colors for certain y-values. I thought I could just use a fixed value sensor, like this:
type: custom:apexcharts-card
experimental:
color_threshold: true
series:
- entity: sensor.value_50
type: area
color_threshold:
- value: -10
color: blue
- value: 0
color: blue
- value: 20
color: green
- value: 40
color: orange
But this does not seem to work, the area color is always one solid color. I also tried to use transform: return 80, but this also does not work.
When I just change the sensor by an actual sensor, the coloring works. When I use transform on a sensor, it works when i do a ‘return x;’ but when I try ‘return x/2+50;’ the coloring does not work.
Any idea what is wrong here?
I have a chart with two series, (today & tomorrow) taken from a sensor that fetches prices from the web. There is a gap in the line chart when transitioning from today till tomorrow. Any suggestions on how to connect these two series without the gap? I’m guessing it is in the data_generator part but I’m not proficient enough to figure this out on my own.
The gap:
The series part of the card code:
series:
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Pris i dag
type: area
curve: smooth
extend_to_end: false
float_precision: 3
stroke_width: 2
opacity: 0.09
color: cyan
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.raw_today.map((p) => {
return [new Date(p.start), p.value];
});
- entity: sensor.nordpool_kwh_oslo_nok_3_10_025
yaxis_id: first
name: Pris i morgen
type: area
curve: smooth
extend_to_end: false
float_precision: 3
stroke_width: 2
opacity: 0.09
color: magenta
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((p) => {
return [new Date(p.start), p.value];
});
The prices (long list), from the sensor:
raw_today:
- start: '2022-01-27T00:00:00+01:00'
end: '2022-01-27T01:00:00+01:00'
value: 1.584
- start: '2022-01-27T01:00:00+01:00'
end: '2022-01-27T02:00:00+01:00'
value: 1.517
- start: '2022-01-27T02:00:00+01:00'
end: '2022-01-27T03:00:00+01:00'
value: 1.458
- start: '2022-01-27T03:00:00+01:00'
end: '2022-01-27T04:00:00+01:00'
value: 1.44
- start: '2022-01-27T04:00:00+01:00'
end: '2022-01-27T05:00:00+01:00'
value: 1.442
- start: '2022-01-27T05:00:00+01:00'
end: '2022-01-27T06:00:00+01:00'
value: 1.473
- start: '2022-01-27T06:00:00+01:00'
end: '2022-01-27T07:00:00+01:00'
value: 1.536
- start: '2022-01-27T07:00:00+01:00'
end: '2022-01-27T08:00:00+01:00'
value: 1.607
- start: '2022-01-27T08:00:00+01:00'
end: '2022-01-27T09:00:00+01:00'
value: 1.68
- start: '2022-01-27T09:00:00+01:00'
end: '2022-01-27T10:00:00+01:00'
value: 1.667
- start: '2022-01-27T10:00:00+01:00'
end: '2022-01-27T11:00:00+01:00'
value: 1.666
- start: '2022-01-27T11:00:00+01:00'
end: '2022-01-27T12:00:00+01:00'
value: 1.654
- start: '2022-01-27T12:00:00+01:00'
end: '2022-01-27T13:00:00+01:00'
value: 1.634
- start: '2022-01-27T13:00:00+01:00'
end: '2022-01-27T14:00:00+01:00'
value: 1.65
- start: '2022-01-27T14:00:00+01:00'
end: '2022-01-27T15:00:00+01:00'
value: 1.666
- start: '2022-01-27T15:00:00+01:00'
end: '2022-01-27T16:00:00+01:00'
value: 1.666
- start: '2022-01-27T16:00:00+01:00'
end: '2022-01-27T17:00:00+01:00'
value: 1.672
- start: '2022-01-27T17:00:00+01:00'
end: '2022-01-27T18:00:00+01:00'
value: 1.661
- start: '2022-01-27T18:00:00+01:00'
end: '2022-01-27T19:00:00+01:00'
value: 1.61
- start: '2022-01-27T19:00:00+01:00'
end: '2022-01-27T20:00:00+01:00'
value: 1.561
- start: '2022-01-27T20:00:00+01:00'
end: '2022-01-27T21:00:00+01:00'
value: 1.556
- start: '2022-01-27T21:00:00+01:00'
end: '2022-01-27T22:00:00+01:00'
value: 1.578
- start: '2022-01-27T22:00:00+01:00'
end: '2022-01-27T23:00:00+01:00'
value: 1.545
- start: '2022-01-27T23:00:00+01:00'
end: '2022-01-28T00:00:00+01:00'
value: 1.524
raw_tomorrow:
- start: '2022-01-28T00:00:00+01:00'
end: '2022-01-28T01:00:00+01:00'
value: 1.524
- start: '2022-01-28T01:00:00+01:00'
end: '2022-01-28T02:00:00+01:00'
value: 1.507
- start: '2022-01-28T02:00:00+01:00'
end: '2022-01-28T03:00:00+01:00'
value: 1.507
- start: '2022-01-28T03:00:00+01:00'
end: '2022-01-28T04:00:00+01:00'
value: 1.514
- start: '2022-01-28T04:00:00+01:00'
end: '2022-01-28T05:00:00+01:00'
value: 1.52
- start: '2022-01-28T05:00:00+01:00'
end: '2022-01-28T06:00:00+01:00'
value: 1.605
- start: '2022-01-28T06:00:00+01:00'
end: '2022-01-28T07:00:00+01:00'
value: 1.639
- start: '2022-01-28T07:00:00+01:00'
end: '2022-01-28T08:00:00+01:00'
value: 1.711
- start: '2022-01-28T08:00:00+01:00'
end: '2022-01-28T09:00:00+01:00'
value: 1.781
- start: '2022-01-28T09:00:00+01:00'
end: '2022-01-28T10:00:00+01:00'
value: 1.783
- start: '2022-01-28T10:00:00+01:00'
end: '2022-01-28T11:00:00+01:00'
value: 1.793
- start: '2022-01-28T11:00:00+01:00'
end: '2022-01-28T12:00:00+01:00'
value: 1.798
- start: '2022-01-28T12:00:00+01:00'
end: '2022-01-28T13:00:00+01:00'
value: 1.791
- start: '2022-01-28T13:00:00+01:00'
end: '2022-01-28T14:00:00+01:00'
value: 1.782
- start: '2022-01-28T14:00:00+01:00'
end: '2022-01-28T15:00:00+01:00'
value: 1.779
- start: '2022-01-28T15:00:00+01:00'
end: '2022-01-28T16:00:00+01:00'
value: 1.79
- start: '2022-01-28T16:00:00+01:00'
end: '2022-01-28T17:00:00+01:00'
value: 1.861
- start: '2022-01-28T17:00:00+01:00'
end: '2022-01-28T18:00:00+01:00'
value: 1.878
- start: '2022-01-28T18:00:00+01:00'
end: '2022-01-28T19:00:00+01:00'
value: 1.844
- start: '2022-01-28T19:00:00+01:00'
end: '2022-01-28T20:00:00+01:00'
value: 1.777
- start: '2022-01-28T20:00:00+01:00'
end: '2022-01-28T21:00:00+01:00'
value: 1.712
- start: '2022-01-28T21:00:00+01:00'
end: '2022-01-28T22:00:00+01:00'
value: 1.705
- start: '2022-01-28T22:00:00+01:00'
end: '2022-01-28T23:00:00+01:00'
value: 1.654
- start: '2022-01-28T23:00:00+01:00'
end: '2022-01-29T00:00:00+01:00'
value: 1.56