You might have look at the ‘fill_raw’ option in the upcoming release:
First of all fantastic chart…!
Has anyone used the custom formatter functions documented on the apex site to format tooltips that can share working code ?
That’s not possible as it requires a function and you can’t pass a function through YAML.
What is your use case?
PS: There already a function implemented as part of apexcharts-card if you are curious.
If you are looking for things that might be useful if given some type of dynamic content from HA passed to ApexCharts:
Be able to a minimum send ‘first’ and ‘last’ values of series to dataPointIndex. More would be to be able to send a ‘every(x) list of values’ to it as well.
markers:
size: 5
colors: '#0000ff'
discrete: [{
seriesIndex: 0,
dataPointIndex: 3,
fillColor: '#e3e3e3',
strokeColor: '#ff0000',
size: 25
back to my poorly worded request about dynamic y axis, I will try again, would like to be able to send a entity value to both ‘min’ and ‘max’. Ideally a jinja function that would for example return a number for the min and/or max value based on an entity like ‘month of year’ then do a modulus division division on that number and multiply it by a value to get a different y max and y min depending on what quarter of the year it is. Again, letting ApexCharts choose the min and max by itself does not yield a useful visualization. Fixing the upper and lower bound ‘manually’ but different depending on a factor the author sets, allows proper visualization of slope of lines/data. Important for users to understand trends. Thx!
yaxis:
- seriesName: Backyard Govee Temp
title:
text: 'Temperature °F'
show: true
showAlways: true
showForNullSeries: true
opposite: false
reversed: false
logarithmic: false
tickAmount: 6
min: 30
max: 100
I have a graph for the forthcoming year and have used
xaxis:
labels:
format: 'MMM'
which displays the date as Jan/Feb/Mar etc along the x axis.
However when mouse overing the graph the tooltips comes out as
Feb 1st, 00:00:00
I’d like to change the format of the tooltip to simply Feb in this case. Using the below does not appear to work.
tooltip:
x:
format: 'MMM'
I guess I could do something about it.
Please open a feature request 
Would also be nice if the language in the tooltip followed the system language like everything else. I have Swedish everywhere but the month in the tooltip is in English. But now we are into the really small details 
Please head over to github with feature requests, I can’t track them here. Thanks
2 Likes
Any kind of entities are now supported using transform, including binary_sensor, etc… 
in the latest beta release. I made it generic so you can do what ever you want. And you can also do anything with the values (eg. multiply by 1000 or apply some weird maths on top of it).
Download the latest beta and check the dev branch README for information on how to use it
Feedback welcome.
1 Like
OK so I added some fill options and the magenta line disappeared here
type: 'custom:apexcharts-card'
graph_span: 24h
header:
show: true
title: NUC Memory Graph
apex_config:
yaxis:
forceNiceScale: true
responsive:
- breakpoint: 765
options:
chart:
height: 500px
- breakpoint: 1025
options:
chart:
height: 400px
- breakpoint: 10000
options:
chart:
height: auto
stroke:
width: 3
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
plotOptions:
bar:
columnWidth: 10%
legend:
showForSingleSeries: true
fill:
type: solid
opacity: 0.2
series:
- entity: sensor.memory_use_percent
name: Percent Memory Used
type: area
color: cyan
group_by:
func: raw
duration: 15min
- entity: sensor.nuc_memory_used_filtered
name: Memory Use Filtered
type: line
color: magenta
group_by:
func: raw
duration: 15min
Without that fill option it would display similar to this one:
EDIT: Looks like I can do with “transform” in the Dev release. Will wait for that to go Prod before I have a fiddle…
Ok - I’ve been following this since announced and decided to bite the bullet and implement today.
I already have a question: If I have a data series and zero values are invalid, can I ignore those values? I can see examples where it ignores null, but not zero. My sensor unfortunately occasionally errors and gives an erroneous zero result.
I know I could (should have) template the sensor, but I have a year’s worth of historical data I want to plot.
I am learning here as well, but can say I am very impressed by @RomRider 's work.
I watch the documentation on the development channel to see what is coming, I recommend:
https://github.com/RomRider/apexcharts-card/tree/dev
to that and your question, I would look into:
‘fill_raw’
followed by, if that does not meet needs,
‘transform’
Good hunting1!
I find @RomRider 's code very solid, I would not feel bad in anyway about recommending that you hop on the beta channel. Not only is it good to get moving forward on ideas sooner, @RomRider can use your input on how things are working. Do contribute, it helps all.
Yeah thanks - we crossed streams there.
I think I will need something like:
transform: "return x === 0 ? null : x;"
In combination with fill_raw.
1 Like
You might want to try: fill: [0.2, 0.2] instead
Exactly!
2 Likes
I got the missing data to be filled by using group_by
group_by:
func: last
duration: 3min
Thank you for the help!
group_by reduces the “resolution” of the chart, it’s like compressing an image but here were talking about history data. If you want to keep the details you should use the upcoming: fill_raw
1 Like
Super, thanks! Looking forward to that!
Ik love this card, currently switching al my graphs to this card
I don’t know if it’s my config, but I see 2 strange things:
De first day in the X axis is not visible;
The date of february the first is shown as 21 instead of 01.
Using v1.4.0
My config of 1 card:
type: 'custom:apexcharts-card'
graph_span: 7d
span:
end: day
header:
show: true
title: Verbuik elektra per dag in kWh
apex_config:
chart:
type: area
height: 250
stroke:
show: true
width: 1
curve: smooth
legend:
show: true
dataLabels:
enabled: true
fill:
type: gradient
gradient:
shadeIntensity: 0.1
opacityFrom: 0.25
opacityTo: 1
inverseColors: true
stops:
- 0
- 90
- 100
series:
- color: 'rgb(138,43,226)'
entity: sensor.energy_import_total_dagelijks_kwh
type: column
group_by:
func: max
duration: 24h
4 Likes