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.
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:
Hi!
Thank you for a really good card.
I’m using it for so many graphs that the Core i7 CPU works on 100% when starting up the system
But I don’t get my color_treshold card right. The colors seam to stretch differently depending of the value.
Is this a bug, or am I doing something wrong here?
That’s because there are null values in the graph and is related to a problem in the ApexCharts library. You can maybe fix it using fill_raw: last.
Fantastic! It worked 
The y-axis should be an array:
apex_config:
annotations:
yaxis:
- y: 13
...
Thankyou. I should have noticed it was an array in the doc - https://apexcharts.com/docs/options/annotations/
I love this! Is it possible for you to share your theme?
Here is the complete theme code. It contains more than usual theme, but it should be clear by comments what these do. For example Color palettes define color gradient that can be used in different charts, Color definitions define major interface colors, to which I’m referring later on in theme for consistency, further sections define various elements of UI and how these colors are applied. Please note that it contains also several sections for custom components, like Z-Wave chart, HACS, custom text divider row, mini media player… I think I captured most of color definitions properly, but this is definitely work in progress Enjoy!
Ubiquiti v1:
#Color palettes
green1: "#3BCC64"
green2: "#2AA74F"
green3: "#217E3C"
green4: "#155628"
green5: "#0B2D16"
green6: "#010502"
lemon1: "#BFEO41"
lemon2: "#A9CD21"
lemon3: "#85A11A"
lemon4: "#617513"
lemon5: "#3D490C"
lemon6: "#1B1D05"
yellow1: "#FFDB1A"
yellow2: "#E6C200"
yellow3: "#B39700"
yellow4: "#806C00"
yellow5: "#4E4100"
yellow6: "#191600"
orange1: "#F5A624"
orange2: "#DBBC09"
orange3: "#AB6D09"
orange4: "#784E07"
orange5: "#452F05"
orange6: "#121003"
red1: "#FO3A3E"
red2: "#E61116"
red3: "#B60E12"
red4: "#870A0D"
red5: "#580708"
red6: "#290304"
pink1: "#A252E3"
pink2: "#8A26DC"
pink3: "#6F1DB2"
pink4: "#541686"
pink5: "#390F5A"
pink6: "#1E082E"
magenta1: "#6A34E0"
magenta2: "#531EC3"
magenta3: "#401797"
magenta4: "#2E106B"
magenta5: "#1C093F"
magenta6: "#0A0213"
darkblue1: "#003C9E"
darkblue2: "#00296B"
darkblue3: "#001538"
darkblue4: "#000205"
darkblue5: "#000102"
darkblue6: "#000000"
lightblue1: "#006ffff"
lightblue2: "#0059cc"
lightblue3: "#004399"
lightblue4: "#002d66"
lightblue5: "#001733"
lightblue6: "#000100"
cyan1: "#57A0FF"
cyan2: "#0368F0"
cyan3: "#0152BD"
cyan4: "#003CBA"
cyan5: "#002657"
cyan6: "#001024"
#Color definitions
dark-background: "#1C1E2E" #var(--dark-background)
medium-background: "#242635" #var(--medium-background)
light-background: "#2C2E3C" #var(--light-background)
components-background: "#242635" #var(--components-background)
bright-text: "#ffffff" #var(--bright-text)
dimmed-text: "#A4A7B4" #var(--dimmed-text)
dark-text: "#444856" #var(--dark-text)
cyan-text: "#1bbfff" #var(--cyan-text)
alert-text: "#ff3366" #var(--alert-text)
accent-color: "#006FFF" #var(--accent-color)
cyanish: "#00b8fe" #var(--cyanish)
greenish: "#7cff73" #var(--greenish)
dark-magenta: "#7b55d5" #var(--dark-magenta)
light-magenta: "#fc70f3" #var(--light-magenta)
pinkish: "#ff6e7a" #var(--pinkish)
yellowish: "#ffba6b" #var(--yellowish)
# Labels
label-badge-background-color: var(--medium-background)
label-badge-text-color: var(--bright-text)
label-badge-red: var(--alert-text)
label-badge-green: var(--greenish)
label-badge-blue: "#0000ff"
label-badge-yellow: "#FF0000" #var(--accent-color)
label-badge-magenta: var(--dark-magenta)
label-badge-cyan: var(--cyanish)
label-badge-gray: "#888888"
#Header
app-header-background-color: var(--medium-background)
app-header-text-color: var(--bright-text)
# Main Interface Colors
primary-color: var(--accent-color) #var(--cyan-text)
light-primary-color: var(--accent-color) #var(--light-background)
primary-background-color: var(--dark-background)
secondary-background-color: var(--medium-background)
divider-color: var(--dark-text) #var(--dark-background)
material-background-color: var(--medium-background)
material-secondary-background-color: var(--accent-color) # probably to be corrected
background-color: "#FF0000" #var(--cyan-text)
# bars in system monitor status
ha-bar-background-color: var(--light-background) #secondary-background-color
#success-color:
#warning-color:
#alert-color ???
# Text
primary-text-color: var(--dimmed-text)
secondary-text-color: var(--dark-text)
text-primary-color: var(--bright-text)
disabled-text-color: var(--dark-text)
# Sidebar Menu
sidebar-icon-color: var(--dimmed-text)
sidebar-text-color: var(--dimmed-text)
sidebar-background-color: var(--medium-background)
sidebar-selected-background-color: var(--light-background)
sidebar-selected-icon-color: var(--bright-text)
sidebar-selected-text-color: var(--bright-text)
# Cards
ha-card-border-radius: "6px"
ha-card-header-font-size: 20px
ha-card-header-letter-spacing: "1.49px"
ha-card-header-color: var(--bright-text)
ha-card-background: var(--medium-background)
paper-card-background-color: var(--medium-background)
paper-item-icon-color: var(--dimmed-text)
#paper-material-display: "#ff0000"
ha-card-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0)
card-background-color: var(--medium-background)
# Nav Menu
paper-listbox-background-color: var(--light-background)
paper-font-button-text-transform: "uppercase"
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
# States and Badges
state-icon-color: var(--dimmed-text)
state-icon-active-color: var(--orange1)
state-icon-unavailable-color: var(--dark-background)
# Sliders
paper-slider-knob-color: var(--dimmed-text)
paper-slider-knob-start-color: var(--dimmed-text)
paper-slider-pin-color: var(--accent-color)
# Slider colors used by slider row only
paper-slider-active-color: var(--accent-color)
paper-slider-container-color: var(--dark-text)
#round-slider-bar-color: "#ff0000"
#round-slider-path-color: "#ff0000"
# Switches
switch-checked-button-color: var(--accent-color)
switch-checked-track-color: var(--dark-text)
switch-unchecked-button-color: var(--dimmed-text)
switch-unchecked-track-color: var(--dark-text)
# Toggles
paper-toggle-button-checked-button-color: "#ff0000"
paper-toggle-button-checked-bar-color: "#ff0000"
paper-toggle-button-unchecked-button-color: "#ff0000"
paper-toggle-button-unchecked-bar-color: "#ff0000"
# Drop down list arrow
iron-icon-fill-color: var(--secondary-text-color)
# Z-Wave Graph specific colors
zwave-background-color: var(--primary-background-color) # main window background color
zwave-battery-emty-color: var(--dark-background) # background color for emty battery
zwave-group-background-color: var(--secondary-background-color) # grouped devices background color
zwave-group-border-color: var(--light-background) # border of group rectangle
zwave-group-label-color: var(--primary-text-color) # color of group label
zwave-zoom-highlight-color: var(--primary-color) # zoom area background color
zwave-zoom-border-color: var(--light-background) # zoom area border color
zwave-legend-header-color: var(--primary-text-color) # text of legend header
zwave-legend-item-color: var(--secondary-text-color) # legend item text color (not for node colors)
zwave-node-hub-background-color: var(--light-background) # zwave hub background color
zwave-node-hub-outline-color: var(--greenish) # zwave hub border color
zwave-node-hub-text-color: var(--greenish) # zwave hub text color
zwave-1-hop-background-color: var(--light-background) # 1st level node background color
zwave-1-hop-outline-color: var(--cyanish) # 1st level node border color
zwave-1-hop-text-color: var(--cyanish) # 1st level node text color
zwave-2-hop-background-color: var(--light-background) # ..........
zwave-2-hop-outline-color: var(--light-magenta)
zwave-2-hop-text-color: var(--light-magenta)
zwave-3-hop-background-color: var(--light-background)
zwave-3-hop-outline-color: var(--dark-magenta)
zwave-3-hop-text-color: var(--dark-magenta)
zwave-4-hop-background-color: var(--light-background)
zwave-4-hop-outline-color: var(--dimmed-text)
zwave-4-hop-text-color: var(--dimmed-text)
zwave-failed-background-color: var(--light-background)
zwave-failed-outline-color: "#ff0000"
zwave-failed-text-color: "#ff0000"
zwave-unconnected-background-color: var(--primary-background-color)
zwave-unconnected-outline-color: var(--dimmed-text)
zwave-unconnected-text-color: var(--dimmed-text)
# HACS
hacs-status-installed: var(--greenish)
hacs-status-not-loaded: var(--dimmed-text)
hacs-status-pending-update: var(--accent-color)
# Text divider row
text-divider-color: var(--secondary-text-color)
text-divider-font-size: 15px
text-divider-line-size: 1px
text-divider-font-weight: normal
text-divider-margin-top: 0.25em
text-divider-margin-bottom: 0em
text-divider-text: var(--bright-text)
# Mini Media Player
mini-media-player-base-color: var(--primary-text-color)
mini-media-player-accent-color: var(--cyan-text)
mini-media-player-icon-color: var(--mini-media-player-base-color)
mini-media-player-button-color: rgba(255,255,255,0.25)
mini-media-player-overlay-color: rgba(0,0,0,0.5)
mini-media-player-overlay-color-stop: 25%
mini-media-player-overlay-base-color: white
mini-media-player-overlay-accent-color: white
mini-media-player-media-cover-info-color: white
mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1
mini-media-player-progress-height: 6px
mini-media-player-scale: 1
mini-media-player-name-font-weight: 400
Hi all,
thank you for this card @RomRider!
Maybe i miss it, but is there any way to remove the legend at all? No state (like legend_value) but also no name? Even if i have number of series >1
Thanks for your help.
Marco
Yes, from here https://apexcharts.com/docs/options/legend/ you have the info:
apex_config:
legend:
show: false