Cool chart with the blocks! I understand you have created the “block” effect by having the y axis lines on top of the chart?
@RomRider > Can this effect be achieved without grid lines? I have a sensor that gives value between 0-6,5 with 0,5 steps so this block look would make it super easy to see the current value.
Yes, exactly! I put the grid lines on top (apex_config: grid: position: front) and made them very dense (apex_config: yaxis: tickAmount: 12). Drawback is that also y-axis descriptions get very dense 
Thank you!!
hi, if it wouldn’t be too much trouble, could you share the view you’re showing here? I’m really interested in finding out how you got the 4 little buttons on the left hand side, (are they buttons?) and, how the top horizontal set of sensors aligns with that…
thanks if you would!
Sure thing, here you go:
card:
type: vertical-stack
style: |
ha-card {
border-radius: 12px;
background: none;
}
cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- height: 10px
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 10px
- type: custom:layout-card
layout: horizontal
column_width: [18%, 82%]
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
styles:
card:
- border-radius: 12px
- color: 'var(--primary-background-color)'
- font-size: 14px
name:
# - padding-right: 20px
- color: var(--primary-text-color)
color_type: icon
color: 'var(--primary-color)'
show_icon: true
icon: mdi:restart
# layout: icon_name
aspect_ratio: 1/1
size: 50%
name: Restart HA
show_name: false
show_state: false
haptic: success
tap_action:
action: call-service
service: homeassistant.restart
confirmation:
text: 'Are you sure you want to restart Home Assistant?'
- type: "custom:button-card"
styles:
card:
- border-radius: 12px
- color: 'var(--primary-background-color)'
- font-size: 14px
name:
# - padding-right: 20px
- color: var(--primary-text-color)
color_type: icon
color: 'var(--primary-color)'
show_icon: true
icon: mdi:compare
size: 50%
# layout: icon_name
aspect_ratio: 1/1
name: Change Theme
show_name: false
show_state: false
haptic: success
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.theme
- type: "custom:button-card"
styles:
card:
- border-radius: 12px
- color: 'var(--primary-background-color)'
- font-size: 14px
name:
# - padding-right: 20px
- color: var(--primary-text-color)
color_type: icon
size: 50%
color: 'var(--primary-color)'
show_icon: true
icon: mdi:apple
name: Start HomeKit
# layout: icon_name
aspect_ratio: 1/1
show_name: false
show_state: false
haptic: success
tap_action:
action: call-service
service: homekit.start
confirmation:
text: 'Are you sure you want to start HomeKit?'
- type: "custom:button-card"
styles:
card:
- border-radius: 12px
- color: 'var(--primary-background-color)'
- font-size: 14px
name:
# - padding-right: 20px
- color: var(--primary-text-color)
color_type: icon
size: 50%
color: 'var(--primary-color)'
show_icon: true
# layout: icon_name
aspect_ratio: 1/1
icon: mdi:google-assistant
name: Sync Google
show_name: false
show_state: false
haptic: success
tap_action:
action: call-service
service: google_assistant.request_sync
confirmation:
text: 'Are you sure you want to sync Google Assistant?'
- type: custom:apexcharts-card
chart_type: radialBar
header:
show: true
floating: false
show_states: true
colorize_states: true
apex_config:
title:
floating: false
align: center
style:
fontSize: 12px
fontWeight: bold
chart:
# fontFamily: "Julius Sans One"
foreColor: rgb(148,148,148)
offsetY: 5
legend:
show: false
position: top
series:
- entity: sensor.disk_use_percent_home
name: Disk
color: var(--primary-color)
- entity: sensor.processor_use
name: CPU
color: var(--light-primary-color)
- entity: sensor.memory_use_percent
name: Memory
style: |
ha-card {
border-radius: 12px;
background-color: transparent;
box-shadow: none;
font-size: 12px;
}
I received yesterday my Aqara temp. sensors and want to add them to ha dashboard.
I dont know which is the best view (have 11 sensors with temp, pressure and humidity)…
But I recognize that there is a display error with the temps:
The overview shows the correct temperature, the graph didnt…
Is this error known?
Maybe some of you have a good idea how I can create a beatiful overview of the temperature…
We can’t help if you don’t share your card configuration…
sry, think I posted the screenshot and the code…
- title: Temp
path: temp
icon: 'hass:thermometer'
badges: []
cards:
- type: entities
entities:
- entity: sensor.temp_bad_temperature
- entity: sensor.temp_balkon_temperature
- entity: sensor.temp_buero1_temperature
- entity: sensor.temp_buero2_temperature
- entity: sensor.temp_esszimmer_temperature
- entity: sensor.temp_flur_temperature
- entity: sensor.temp_kueche_temperature
- entity: sensor.temp_schlafzimmer_temperature
- entity: sensor.temp_skylounge_temperature
- entity: sensor.temp_wc_temperature
- entity: sensor.temp_wohnzimmer_temperature
title: Temperaturen
- type: 'custom:apexcharts-card'
header:
show: true
title: Bad
show_states: true
colorize_states: true
series:
- entity: sensor.temp_bad_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Balkon
show_states: true
colorize_states: true
series:
- entity: sensor.temp_balkon_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Büro1
show_states: true
colorize_states: true
series:
- entity: sensor.temp_buero1_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Büro2
show_states: true
colorize_states: true
series:
- entity: sensor.temp_buero2_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Esszimmer
show_states: true
colorize_states: true
series:
- entity: sensor.temp_esszimmer_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Flur
show_states: true
colorize_states: true
series:
- entity: sensor.temp_flur_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Küche
show_states: true
colorize_states: true
series:
- entity: sensor.temp_kueche_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Schlafzimmer
show_states: true
colorize_states: true
series:
- entity: sensor.temp_schlafzimmer_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Skylounge
show_states: true
colorize_states: true
series:
- entity: sensor.temp_skylounge_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: WC
show_states: true
colorize_states: true
series:
- entity: sensor.temp_wc_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
- type: 'custom:apexcharts-card'
header:
show: true
title: Wohnzimmer
show_states: true
colorize_states: true
series:
- entity: sensor.temp_wohnzimmer_temperature
data_generator: |
// REMOVE ME
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
This is the code of the separate dashboard
It’s pretty explicit, it says REMOVE ME in capital letters
So remove all the data_generator and you’ll be fine.
dont laugh…
but I tried this in the first step and it doesnt work, the graph is empty and temp. is n/a
- type: 'custom:apexcharts-card'
header:
show: true
title: Balkon
show_states: true
colorize_states: true
series:
- entity: sensor.temp_balkon_temperature
I tested it with and w/o
data_generator: |
thanks! will check it out for sure.
Then it’s because you don’t have the recorder enabled/your entities are excluded from the recorder.
how can I set this?
Or still find out, if the sensor can do this?
It’s the xiaomi sensor wsdcgq11lm
Damn it, okay thats not quite simply as I though.
Have to fix this issue tonight…
Thanks!
It’s not complex, just enable the recorder in your configuration.yaml file and you are good to go:
recorder:
yes, I tried this.
But the file from record is still empty
in my config.yaml I added recorder:
Did you restart your instance?
yes, multiple times and tried both codes…
