Is that sarcasm?
Thank you! It’s it a bug that float_precision: 1 doesn’t change “1” to “1.0”?
No it’s intended 
Alright, too bad 
Can I use transform to force it to float maybe?
Of course not. I need to change the font size - and I feel somewhat stupid that I’m unable to figure out how to accomplish such an obvious and simple task… So, please tell me how?
You use card-mod. And you won’t have to scroll far up in this post to find a partially hijacked discussion on the same question
Thank you
It never occurred to me to search this thread for “card-mod”, and it beats me why this CSS mod only seems to work when added to the very end of the YAML.
But - now it works, so again; Thank you 
Is it possible to call a service by tapping (clicking) on the card? I’m thinking about using tap_action to open a popup window to see the chart in a larger view. Thank you.
Not yet. I don’t really know to what part of the card I should assign the action to since everything is already interactive in the chart. If you have an idea, feel free to share it.
Does anyone have an example of adding an annotation? I have tried the following to add a y axis line but no graph is displayed at all.
type: 'custom:apexcharts-card'
series:
- entity: sensor.octopus_agile_current_rate
apex_config:
annotations:
yaxis:
'y': 13
borderColor: '#00E396'
label:
text: Test
The graph-wrapper is interactive, but a click on the header is possible if it’s shown. Another possibility would be to create a “tap-zone” right on the bottom of the card below the legend.
If
show:
tap_zone: true
then the tap-zone is visible and it’s possible to assign the action to it.
Example
Bad idea?
Another weirdiness. or again I’m doing something wrong 
I’m stacking 3 series using vertical stack in card to show in one cgart up/download speed and and in second card latency:
Both charts use exaclty the same configuration (exception upper one uses 2 series and is higher), but on the bottom chart I can’t get legend to display. here is exact code I use:
type: 'custom:vertical-stack-in-card'
cards:
- type: 'custom:text-divider-row'
text: WAN Throughput
- type: 'custom:apexcharts-card'
show:
loading: false
apex_config:
stroke:
width: 2
chart:
height: 200
fill:
type: solid
plotOptions:
bar:
columnWidth: 90%
header:
show: false
grid:
show: true
borderColor: '#222222'
strokeDashArray: 0
position: front
graph_span: 5min
series:
- entity: sensor.internet_speed_in1
color: var(--darkblue1)
name: IN
type: column
- entity: sensor.internet_speed_out1
color: var(--red3)
name: OUT
type: column
invert: true
- type: 'custom:text-divider-row'
text: WAN Latency
- type: 'custom:apexcharts-card'
update_delay: 500ms
show:
loading: false
apex_config:
stroke:
width: 2
chart:
height: 100
fill:
type: solid
plotOptions:
bar:
columnWidth: 90%
header:
show: false
grid:
show: true
borderColor: '#222222'
strokeDashArray: 0
position: front
graph_span: 5min
series:
- entity: binary_sensor.default_gateway
attribute: round_trip_time_avg
color: var(--red3)
name: Latency
type: column
unit: ms
I managed to hide legen in upper graph using apex_config: > legend: > show: hfalse, but not the other way around…
Bonus question; is there any possibility to display down/upload bars aligned? Currently these are altrnated on x-axis (e.g wherever there is column up, there is a break between columns going down). It is normal and expected, as I’m using it in somehow non-standard way, but perhaps there is some hidden parameter to change this? Maybe this could work for stacked columns charts… one day it is supported? So something like on picture below, but columns instead of bars:
Bonus question 2: Is there any way to control density of y-axis grid? On ApexCharts page there are few options documented related to formatting appearance of grid, but I found nothing about formatting density…
By default, the legend is only displayed if the number of series is > 1.
So:
apex_config
legend:
showForSingleSeries: true
Yes, that’s how the ApexCharts library works.
You can try stacked: true and see if that helps (it might or might not 
)
You should increase/decrease the number of ticks on the y-axis. The grid is aligned with the number of ticks.
I see that this option : hours_12 is Deprecated
how can you config that you get 24h view of hours?
Because the times are shown as AM/PM
It is now based on your home-assistant locale. But I’ll reintroduce the feature to force 12/24h display on top of the locale support.
1 Like
Negative Values on Y-axis…
Anyone know if it is possible to hide/remove the “-” on yaxis negative values? I’m trying to copy a unifi controller throughput graph. The purple is download but it isn’t obviously negative (used invert: true to flip it on the chart). Ideal would be yaxis to show 30 --> 10 --> 10 -->30. I don’t think its possible after reading the apex docs but hoping I’m wrong. Thanks in advance
That is not possible for the y-axis, however I’ll change the tooltip/legend display to not show negative values in the next release if invert is set to true
Thanks. Appreciate all your efforts on this and your other cards
Interesting… I also love unifi interface and just started to gradually convert my config to resemble their look. So far I created new theme that takes their color scheme and started to create dashboard for my LAN. Obviously using Apex Chart for graphing Here is the outcome so far:
Yet long way to go, lots of polishing, but without Apex would not be possible to get close enough.
1 Like
