Statistics are generated hourly…so you have to wait untill they are generated and then for a whole hour after that, they will not change 
Hello all,
I am trying to create a graph of my electricity usage over the past year. So I created a graph of my electricity meter readout. and I can plot that now. However I would like to have it start at zero, 365 days ago. For this I need to subtract the value of the first datapoint from the rest of the entity/series. I just started looking at transform and data_generator. But if anyone can point at a good example, that would be much appreciated.
Regards,
Bert
Hello dear community,
I am using a couple of Apexcharts-cards in order to track my house energy consumption and production. Very helpful tool, much customizable and wonderful figures.
In one word : I love it ! 
For extremas with timestamp, is it possible to format the timestamp this way HH:mm without seconds ? In the example below, 09:45 should be shown.
Thank you for helping.
Hello friends,
I love the apex charts. For a newbie the vast amount of possibilities can be exhausting, though.
maybe you could help me with this:
I have a donut with info about from where my energy is consumed.
I managed to get the total in the center. But I would like to have another entity in the center. I would like do have the autarkie level shown in the center.
do you guys know how to manage that?
apex_config:
plotOptions:
pie:
donut:
labels:
show: true
total:
show: true
label: Gesamt in kWh
formatter: |
EVAL:function(w) {
return w.globals.seriesTotals.reduce((a, b) => {return a + b}, 0).toLocaleString();
}
Hey,
I am not much of a apex specialist.
Therefore I dont know how to code that in the chart.
But a workaround could be a Template sensor or a helper (utility meter)
Did you solve your Problem back then?
I try do do domething similar. I want a entity value ploted.
Any suggestions?
apex_config:
plotOptions:
pie:
donut:
labels:
show: true
total:
show: true
label: Gesamt in kWh
formatter: |
EVAL:function(value) {
return (sensor.s10e_compact_battery_charge_today);
}
I am trying to add a RadialBar chart with background of a specified colour. I thought it would be simple but can’t get it to work. Here is my code that I have added directly to a lovelace dashboard.
type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.xxxxxxxxxx
color: '#3498DB'
apex_config:
plotOptions:
radialBar:
dataLabels:
name:
show: false
value:
show: false
startAngle: -90
endAngle: 90
grid:
padding:
top: -15
bottom: 0
legend:
show: false
style: |
ha-card {
background-color: var(--color-green);
box-shadow: none;
border: none;
font-size: 20px;
}
The chart works fine but there is no background. I have tried several variations of the style section as suggested here to no avail. Card-mod is installed and configured.
Any ideas on what I am doing wrong?
Hi Stefanovich,
Thanks for the reply. I have a helper to calculate the value of the electricity usage, a running usage over the past 365 days.
However, I also don’t know how to use that. I haven’t found any examples where multiple entities are used together in a transform or data_generator.
Also, using the data_generator, I didn’t find out yet how to get to the available attributes of the entity to work on. It would be great to have a “test environment” to test the java code. It feels like trial and error now untill the graph shows the right thing.
Can ApexCharts only display values from the standard history, but not from the long-term statistics?
In home assistant history it just displays both, but when using Apex it only displays values starting from the history horizion.
Hey, thank for brilliant graph card.
I have a question, is it possible to round up datetime values so shared tooltip works well for grouped series? Right now I’m trying to show various temperatures from sensors, but they only send data when it changes, this means that timestamps vary wildly and tooltip only shows single value.
I’ve tried to use transform, but I can only play with x value there. Generating all data is a bit over my head right now.
The only thing that kind of worked was setting:
graph_span: 3d
span:
end: hour
This ensures that timestamps rounded to 5min intervals, but it also adds trails at the end of the chart lines.
hello community! i would like to get some help. i have a card setup as follows:
type: custom:apexcharts-card
config_templates: pv_solar_forecast_chart
now:
show: false
series:
- entity: sensor.house_consumption_power
name: House Power
type: line
color: MediumAquaMarine
opacity: 1
stroke_width: 1.5
transform: return x/1000;
show:
in_header: false
group_by:
func: avg
duration: 5m
- entity: sensor.inverter_input_power
name: Solar Power
color: '#ff9800'
opacity: 0.6
transform: return x/1000;
show:
in_header: false
group_by:
func: avg
duration: 5m
- entity: sensor.solcast_pv_forecast_forecast_today
name: Solar Forecast (D1)
extend_to: false
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.DetailedHourly.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
name: Solar Forecast (D2)
extend_to: false
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.DetailedHourly.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
- entity: sensor.solcast_pv_forecast_forecast_day_3
name: Solar Forecast (D3)
extend_to: false
show:
legend_value: false
in_header: false
data_generator: |
return entity.attributes.DetailedHourly.map((entry) => {
return [new Date(entry.period_start), entry.pv_estimate];
});
- entity: sensor.solcast_pv_forecast_forecast_today
yaxis_id: header_only
name: Solar Forecast (D1)
unit: kWh
show:
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_remaining_today
yaxis_id: header_only
name: Forecast (D1 Remaining)
unit: kWh
show:
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_tomorrow
yaxis_id: header_only
name: Forecast (D2)
unit: kWh
show:
in_chart: false
- entity: sensor.solcast_pv_forecast_forecast_day_3
yaxis_id: header_only
name: Solar Forecast (D3)
unit: kWh
show:
in_chart: false
- entity: sensor.solcast_pv_forecast_api_last_polled
yaxis_id: header_only
name: Forecast (Last Update)
float_precision: 0
unit: ' min.'
transform: return ((Date.now()) - (new Date(x).getTime())) / 60 / 60 / 24
show:
in_chart: false
card_mod:
class: solar-forecast-chart-large.width
the issue is that in theory the Solar Forecast values should appear in grey but they dont render as you can see:
sensor.solcast_pv_forecast_forecast_tomorrow and others have the correct attributes (DetailedForecast)
what could be the issue?
thanks in advance!
Check your Data Generator.
Try this, this works for me:
data_generator: |
var today = entity.attributes.detailedForecast.map((start, index) => {
return [new Date(start["period_start"]).getTime(), entity.attributes.detailedForecast[index]["pv_estimate"]];
});
var data = today
return data;
1 Like
Hi,
I’m looking for a way to have the same card as in homewizard app too, but for one device only.
Is that possible?
Did you succeed in it?
Can you show me how to do it?
Hi Faecon
I’m looking to find a way to get the same result as in the homewizard app.
Did you succeed in that?
It should also have the date/Time picker… (day/week/month/year/now) and this for one device.
Thx !
I did not 
Im trying to do the same now, but with an input select (for the date)
Who can help me here?
I’m trying to get charts by now/day/week/month/year for one device.
I want to get as close as possible to this:
I have an energy device in home assistant which is in W (Watt)
So i used the riemann sum integral to get it in kWh
But now what
I also made an input selector with options:
- now
- day
- week
-month
-year
According to what i chose there, i want to see it in apexchart.
Do i need to make sensors with the utility meter based on that sensor from riemann?
Or how can i make this work?
How did you get that black background, mine is white?
I think it is the theme that gets me te black background
Hi folks, does anyone have an example for how to display y axis labels on a chart with two y axes? I can’t, for the life of me, find it in the documentation, but I see exactly what I’m after in the “Traffic Sources” example at the top of this thread.