Hi,
Could someone tell me how i would combine this into one stream of data please. I’m trying to chart how likely it to rain in the next week, having a time scale along the bottom, and turn each of these into data points, rather than individual lines.
Thank you.
That is not yet possible, but I plan to add this feature soon (compare sensors together without using a timeline)
Thank you. I’m trying to achieve something like the bottom card here. https://github.com/lukevink/hass-config-lajv/blob/dffb9dd0bd5e53031fc3300117211f3566f314f0/previews/screen-weather-rain.png?raw=true
That can already be done using a weather integration where all this information is in the attributes and the data_generator feature.
type: custom:apexcharts-card
graph_span: 8d
span:
start: hour
header:
show: true
title: Precipitation Forecast
series:
- entity: weather.openweathermap ## Need a weather entity here which provides precipitation forecast
type: area
extend_to_end: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation];
});
Perfect! Thank you. It looks like that config works with dark_sky too.
You can do some funny stuff like:
- type: custom:apexcharts-card
graph_span: 8d
span:
start: day
offset: -3d
header:
show: true
title: Temperature Forecast
show_states: true
now:
show: true
label: 'now'
apex_config:
legend:
show: false
series:
- entity: weather.openweathermap
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to_end: false
group_by:
func: avg
duration: 1h
- entity: weather.openweathermap
type: line
extend_to_end: false
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
Wow that is cool, I’m adding that!
Beautiful card, I use it for all my temperature. One question, is it possible to have the maximum and minimum values for each sensor in the header? I have 2 sensors for each card and in the header I have on the left the current temperature for sensor 1, on the right the current temperature for sensor 2. It is possible to have under the respective current temperatures, even the maximum and minimum temperature of each sensor ?
Thanks. I’ll try and get that inserted tonight.
I honestly think that ApexCharts is the most exciting that I have come across since I started with Home Assistant over a year go. Amazed by the possibilities and I think we are going to see some mind blowing results with this!
@RomRider, the work you put in this and the help you give in this thread here is so much appreciated! Do you have a PayPal account or similar, I would be happy to send you a Friday beer as a gratitude for all this and the help you give. If you have, please let me know and I’m sure others will folow too.
I assume I’m missing something, but what? I can get “tickAmount” to work as intended on yaxis, but not on xaxis. Setting it does not affect the graph. Perhaps not intended to work on a time axis…?
Simplified card with axis config only:
type: 'custom:apexcharts-card'
header:
show: false
series:
- entity: sensor.hue_temperatur_balkong
apex_config:
xaxis:
tickAmount: 3
yaxis:
tickAmount: 3
Ah, I see. I was wondering why opacity was not working. Wish I had read the buglist before I spent hours trying to get it to work. 
Thank you @RomRider for clarifying. Do you actually do anything else with your life other than answer hundreds of questions, queries, improvements and bugs? 
Haha, yeah, I have a real job which is definitely not being a developer, you’d know if you had a look at the code 
But I don’t sleep much, it’s cheating 
There’s a feature request already for that, I didn’t make my min on how I’ll do it yet 
I appreciate the words, thanks as I said a bit above, I do this for fun and my reward is you, users, using this card.
I’d rather you spend that money on charities instead 
The ApexCharts doc says that it doesn’t work on datetime charts like you use for the x-axis:
Note: tickAmount doesn’t have any effect when xaxis.type = datetime
So I guess it’s not possible
What a Guy ! I’d second the offer to buy you a virtual beer if you PM a paypal addy. After all, you do seem to be doing this for charity 
and putting a huge amount of effort for tens maybe hundreds of forumites . Anyway upto you. 
I guess I could extend the fill_raw feature to support data_generator to fill the gaps. Would that work for you?
Or even simpler, you return 0 (or don’t return anything) instead of null when the data is null. I don’t know what null means for precipitation in your case: is it actually 0? Or is it really missing data and the integration doesn’t know what value it should be?
It’s not so complex in reality 
Remove null entirely:
data_generator: |
return entity.attributes.forecast.flatMap((entry) => {
if (entry.precipitation === null) return [];
return [[new Date(entry.datetime).getTime(), entry.precipitation]];
});
Return 0 instead of null:
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation || 0];
});
Right Yeah I looked at those options at various points and they were a bit of a hassle. Anyway, very happy that you have cracked a comprehensive charting solution.
How would this work for selecting the sensor? I tried the below which doesn’t work…
type: 'custom:apexcharts-card'
graph_span: 24h
apex_config:
plotOptions:
pie:
donut:
total:
show: true
showAlways: true
formatter: sensor.daily_energy_house_total
span:
start: day
offset: '-1d'
header:
show: true
title: Power consumption daily
chart_type: donut
series:
- entity: sensor.daily_energy_boiler_total
name: Boiler
- entity: sensor.daily_energy_dishwasher_total
name: Dishwasher
@RomRider I tried to use are type of chart to draw my router throughput with fill and nice gradient, by I come to somehow strange, unexpected result:
As you can see direction of gradient in bottom and upper parts is the same (with colored part up and blackened down), while I’d expect colored part of gradient to be towards peaks of graph. Is this Apex bug or something controllable?
Here is teh code I use for this setup:
type: 'custom:apexcharts-card'
show:
loading: false
apex_config:
stroke:
width: 2
chart:
height: 250
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
stops:
- 0
- 500
inverseColors: false
header:
show: false
graph_span: 5min
series:
- entity: sensor.internet_speed_in1
color: var(--light-magenta)
name: in
type: area
- entity: sensor.internet_speed_out1
color: var(--yellowish)
name: out
invert: true
type: area
BTW, for my use this is the most amazing card available for HA at the moment! My wish come to live! Thank you so much for AWESOME work you did bringing this to community!
