Haha, ok. Worst day to start using it then 
Awesome card, so many configuration options! Going to replace all my HA and Grafana cards with this one.
EDIT: BTW, all the options in apex_config, how do they differ from the options listed on the github page for the card?
Thanks. I was using the sun.sun attributes which are timestamps as well, but forgot to decrease the value with one day as it shows the sunrise of the next day (after the sun has risen today), so the value wasn’t visible in the graph of today 
. The same goes for the sunset.
Now using this code and that works fine:
x: '${new Date(states["sensor.date"].state + states["sun.sun"].attributes.next_rising.substr(10,18)).getTime()}'
x: '${new Date(states["sensor.date"].state + states["sun.sun"].attributes.next_setting.substr(10,18)).getTime()}'
It will combine todays date with sensor.date and the time of the sunrise and sunset from sun.sun. Those times are of the sunrise and sunset from tomorrow instead of today at some point, but hey those few minutes are not visible in the graph.
Still not working.
This is the whole chart
type: 'custom:apexcharts-card'
graph_span: 167h
header:
show: true
title: Change in Day Length
show_states: true
y_axis_precision: 0
apex_config:
yaxis:
forceNiceScale: true
decimalsInFloat: 0
responsive:
- breakpoint: 765
options:
chart:
height: 500px
- breakpoint: 1025
options:
chart:
height: 400px
- breakpoint: 10000
options:
chart:
height: auto
stroke:
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
plotOptions:
bar:
columnWidth: 50%
legend:
showForSingleSeries: true
series:
- entity: sensor.daylengthchange
float_precision: 0
show:
extremas: true
stroke_width: 3
name: Change in Day Length
type: line
group_by:
func: avg
duration: 60min
I’m looking to chart energy pricing forecast using the Octopus Agile integration. It creates an entity with each 30min timeslot and price as an attribute. I’ve been racking my brain (as a js newbie) to try and get the right data_generator syntax to chart this. Can anyone help?
The entity looks like the image.
A templates as per below seems to output what I need, bust I can’t make a js function to match in the data_generator.
{% for attr in states.octopusagile.rates.attributes %}
[{{attr}},{{state_attr('octopusagile.rates',attr)}}]
{% endfor %}
OK, so some progress, the below config does give me some output, but only 1 data point per day… Any clues?
ype: 'custom:apexcharts-card'
header:
show: true
title: Octopus Pricing
show_states: true
colorize_states: true
graph_span: 24h
span:
start: hour
series:
- entity: octopusagile.rates
color: red
type: line
data_generator: |
const now = new Date();
var data=[];
var attr;
for (attr in entity.attributes)
{
data.push([now.getTime(attr),entity.attributes[attr]]);
}
return data.reverse();
@DavidFW1960 I loaded your exact code, just changed sensor, duration (to 1h) and grouping (to by 1m) and seems to work properly:
There must be something wrong elsewhere…
BTW playing with options I not noticed that decimalsInFloat overrides y_axis_precision, but I’ve seen no difference that float_precision would do…
Yeah I sure don’t understand what is wrong.
I copied the code from here and adapted the graph to my liking, im also using the octpus agile integration so same data:
One more observation. I use ApexCharts to monitor network bandwidth on various interfaces on my router (using exactly the same code for all of them). I have one interface that is very specific - it is for build in LTE modem, that is used only as failover, so normally it generates no new bandwidth consumption data. And this one behaves exactly like in your case, not rounding labels to no decimals:
Perhaps issue is with how data is generated for the chart? How frequently it is updated?
It’s a template sensor subtracting 2 dates and would only update once a day and will always be an integer,
Hoping someone can tell me how to remove the state labels shown in white writing on this donut graph?
Sorry I mean % not state labels
First of all, what a nice graphing card! I’m trying to replace a mini-graph-card where I have the state values on top of the graph, I’ve found out that this is also possible with the ApexChart. However, I noticed that the shown value is the result of the aggregate function and not the most recent state of the sensor. Is there a setting to change this behaviour? I’m graphing power entities which I average per 10 minutes to reduce the loading time but I would like to see the most recent value to have a good indication of my real power usage.
Hey, how do I change the Y axis minimum span? I have a temperature sensor
and I want to the graph to show at least 10 degrees on the Y axis. Right now it shows movement all over the place even though its only in the 0.1 range.
I would like to achieve and effect similar to this:
Looking really good, would you like to share the code of your graphs?
Sure!
Here is the code for graph template:
apexcharts_card_templates:
bandwidth_chart:
update_interval: 5s
show:
loading: false
apex_config:
yaxis:
forceNiceScale: true
tickAmount: 12
xaxis:
type: datetime
axisBorder:
show: false
labels:
format: 'HH:mm'
tickAmount: 5
stroke:
width: 2
chart:
height: 150
fill:
type: solid
plotOptions:
bar:
columnWidth: 80%
stacked: true
header:
show: false
grid:
show: true
borderColor: '#222222'
strokeDashArray: 0
position: front
legend:
show: false
options:
type: bar
stacked: true
graph_span: 4min
stacked: true
all_series_config:
type: column
unit: Mb/s
And here for actual card:
type: 'custom:apexcharts-card'
config_templates: bandwidth_chart
y_axis_precision: 0
series:
- entity: sensor.internet_speed_in1
color: var(--green1)
name: IN
type: column
- entity: sensor.internet_speed_in2
color: var(--green3)
invert: true
name: IN
type: column
how can I use an entity state instead of a fixed value in max of a radialBar card?
Good news! Waiting impatiently for coming Wednesday to apply I’m not in beta channel)! Hope this will resolve also issue with my sensor for LTE bandwith
