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.
1 Like
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
3 Likes
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
Hi Tdw! Thats a nice looking card. Do you mind sharing the code for the whole card on the screenshot?
thz!
I have to say that, When i read the repository, I didn’t catch the apex_config world behind.
Now it’s much clear.
Thank you again!
Marco
I’m willing to introduce this feature (a sort of brush on which you can select the timeframe displayed on the main graph). You will be able to define any number of series which will end up in the bottom chart and also display them the way you want (like a normal serie).
What do you folks think?
13 Likes
- type: custom:vertical-stack-in-card
item_classes: 'col-xs-12 col-sm-12 col-md-3 col-lg-3'
cards:
- type: markdown
style: |
ha-card {
box-shadow: none;
background-color: var(--dwains-theme-primary);
font-size: 25px;
color: rgb(148,148,148);
text-align: center;
}
content: >
**Server - Main**
- type: custom:apexcharts-card
chart_type: radialBar
header:
show: true
show_states: true
colorize_states: true
apex_config:
chart:
height: 250
fontFamily: "Julius Sans One"
foreColor: rgb(148,148,148)
animations:
enabled: true
easing: 'easeinout'
animateGradually:
enabled: true
dynamicAnimation:
enabled: true
legend:
show: false
position: top
series:
- entity: sensor.glances_cpu_used
name: CPU Load
- entity: sensor.glances_etc_hostname_used_percent_2
name: SSD
- entity: sensor.glances_ram_used_percent
name: Memory
- entity: sensor.glances_swap_used_percent
name: Swap
style: |
ha-card {
border: 0px solid green;
background-color: '#262628';
box-shadow: none;
font-size: 13px;
color: rgb(148,148,148);
height: 260px;
}
- type: custom:apexcharts-card
graph_span: 1d
header:
show: true
show_states: true
colorize_states: true
apex_config:
legend:
show: false
chart:
height: 150
fontFamily: "Julius Sans One"
foreColor: rgb(148,148,148)
yaxis:
- title:
text: Temp
min: 90
tickAmount: 3
decimalsInFloat: 0
- title:
text: CPU
min: 15
tickAmount: 3
decimalsInFloat: 0
opposite: true
series:
- entity: sensor.glances_core_0_temperature
type: column
name: Temperature
color: green
group_by:
func: avg
duration: 1h
- entity: sensor.glances_cpu_used
type: line
stroke_width: 1
color: gold
group_by:
func: avg
duration: 1h
show:
in_header: false
style: |
ha-card {
border: 0px solid green;
background-color: '#262628';
box-shadow: none;
font-size: 13px;
color: rgb(148,148,148);
padding-right: 5px;
text-align: center;
height: 200px;
}
- type: markdown
style: |
ha-card {
box-shadow: none;
background-color: '#262628';
font-size: 12px;
color: rgb(148,148,148);
text-align: center;
}
content: |
Uptime: {{ states('sensor.linux_uptime_text') }}
1 Like
You are doing amazing work that has really improved the visualization options in HA! Thanks!
So as I understand it, this is a ‘zoom in’ of the upper chart on a portion of the lower chart. I do use such visualizations in jupyter to drill down into details, however I would wonder if this might cause some slow down within HA if a number of longer history queries are specified. Keeping the HA UI performant is something to be mindful of.
When I open HA views, it is often in a ‘snapshot’ or ‘leanback’ mode rather than a drill down mode.
But hey, I’m not gonna stop your wonderful innovation!
Has anyone experienced these graphical “issues”? The first screenshot is from my computer and the second one is from my phone (Android, Pixel 5). The second one looks a bit strange with the area gradient. If I change time span to 12h it looks good. 24h used to work but all of a sudden I got this issue.
Edit: Not it looks the same on my computer so not a mobile related issue.
type: 'custom:apexcharts-card'
header:
title: ''
show: true
show_states: true
colorize_states: true
graph_span: 24h
apex_config:
yaxis:
min: 0
forceNiceScale: true
decimalsInFloat: 0
opposite: false
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 175
grid:
show: false
borderColor: '#404040'
strokeDashArray: 3
position: back
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.8
inverseColors: false
opacityFrom: 0.6
opacityTo: 0
stops:
- 0
series:
- entity: sensor.nibe_105703_40008
name: Framledningstemperatur
type: area
color: 2eb9ff
float_precision: 0
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 0px 28px 8px;
font-size: 15px;
font-family: Segoe UI Light;
}
div#header__title {
font-size: 10px;
}
This is a bug in ApexCharts when there are null values in the graph. You should be able to use fill_raw: last to fix it.
1 Like
Great - thanks!
Would be very nice, can make good use of that !
Just installed new cardmon 3.0 and now a bunch of console errors:
That’s a bug in Apexcharts, nothing I can do about it. But don’t worry it’s not a problem. It doesn’t affect the functionalities
1 Like