you have first to install https://github.com/iantrich/config-template-card in the same way as apexcharts-card
you can see the error message in your screenshot: “custom element doesn’t exist”
I’m really a beginner.
Thanks
Thank you so much, i modified it a bit for my taste but i learned a lot from you.
1 Like
My {radialBar} color_threshold config always gives me the color defined in the first range, regardless of the sensor value… unless I’m misunderstanding the thresholds?
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_first_floor
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: yellow
- value: 79
color: orange
- value: 83
color: red
min: 50
max: 90
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px
}
Do you think it would be possible to have a graph (Jan - Dec) plotting the sunset times? Something similar to the below?
Since a recorder is only saving 7 days of data I would need to plot it manuellt which I’m ok with. Does anyone have an example of plotting a list of fixed values?
Is there any way to replicate this, without having to have duplicates of each series in the legend?
I’m drawing forecast using a data generator, but also the history back to midnight using the state history. Doing it like this is pretty messy.
e.g part of the config:
series:
- entity: sensor.solar_generation
name: PV (Actual)
curve: stepline
stroke_width: 2
color: orange
extend_to: now
show:
in_header: false
legend_value: false
- entity: sensor.p_pv_forecast
name: PV (Forecast)
curve: stepline
stroke_width: 2
color: orange
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.date), entry.p_pv_forecast];
});
I have a problem with the chart often becomming “stretched”. Especially when returning to the HA tab but sometimes even after a reload. It fixes itself usually by just reloading but sometimes I need to enter the edit mode and then dismiss it.
This is how it looks when stretched:
when correct the card is square and goes from 07-17 (I can only post one image)
Anyone have any idea what could be wrong and how to fix it?
What can I do to show the x axis label in the origin (13:00 in this picture):
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 12h
span:
start: hour
offset: +60min
header:
show: true
title: Temperature Forecast
show_states: true
yaxis:
- apex_config:
labels:
show: false
max: ~20
min: ~15
now:
show: false
label: now
apex_config:
grid:
xaxis:
lines:
show: true
yaxis:
lines:
show: false
xaxis:
labels:
style:
fontSize: 15px
fontWeight: bold
legend:
show: false
dataLabels:
enabled: true
formatter: |
EVAL:function (val) {
return (Math.round(val).toFixed(0) + '°C');
}
style:
fontSize: 15px
color: black
fontWeight: bold
background:
enabled: true
borderWidth: 3
opacity: 1
foreColor: black
borderColor: rgb(44,153,234)
borderRadius: 10
series:
- entity: weather.pirate_weather_home
stroke_width: 3
color: white
color_threshold:
- value: 10
color: rgb(242,249,255)
- value: 17.5
color: rgb(44,153,234)
- value: 18
color: rgb(44,153,234)
- value: 25
color: rgb(44,153,234)
type: line
unit: °C
extend_to: now
show:
in_header: false
datalabels: true
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.temperature];
});
group_by:
func: avg
duration: 2h
Hi, does anyone know how to change the font size of the series value in the header? I want to fit all four values in this chart.
Here’s the code I have so far.
I’ve got a great interface set up for climate control in multiple zones/rooms, and the only thing missing is color threshold for the radialBar to show current temperature:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_basement
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
title: Test
service: browser_mod.popup
service_data:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: none
hold_action:
action: none
styles:
grid:
- grid-template-areas: '"area area" "temp humidity" "tchart hchart"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
custom_fields: null
area:
- font-size: 25px
- font-weight: bold
- align-self: middle
- justify-self: middle
temp:
- padding-top: 10px
- padding-right: 10px
- align-self: end
- justify-self: right
- font-size: 30px
- font-weight: bold
humidity:
- padding-top: 10px
- padding-right: 10px
- align-self: end
- justify-self: right
- font-size: 30px
- font-weight: bold
tchart:
- height: 50px
- padding-right: 5px
hchart:
- height: 50px
- padding-left: 5px
card:
- background-color: rgba(7, 103, 215, 0.24)
custom_fields:
area: Basement
temp: |
[[[
if (states['sensor.current_temperature_basement'].state <= 60) {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: blue;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F</span>`;
}
if (states['sensor.current_temperature_basement'].state <= 67) {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: cyan;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F`;
}
if (states['sensor.current_temperature_basement'].state <= 73) {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: green;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F`;
}
if (states['sensor.current_temperature_basement'].state <= 80) {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: orange;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F`;
}
if (states['sensor.current_temperature_basement'].state <= 90) {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: red;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F`;
} else {
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span> ${states['sensor.current_temperature_basement'].state} °F`;
}
]]]
humidity: |
[[[
if (states['sensor.basement_baseboards_humidity'].state <= 50) {
return `<ha-icon
icon="mdi:water-percent"
style="width: 20px; height: 20px; color: green;">
</ha-icon> <span> ${states['sensor.basement_baseboards_humidity'].state} %</span>`;
}
if (states['sensor.basement_baseboards_humidity'].state <= 70) {
return `<ha-icon
icon="mdi:water-percent"
style="width: 20px; height: 20px; color: orange;">
</ha-icon> <span> ${states['sensor.basement_baseboards_humidity'].state} %</span>`;
}
if (states['sensor.basement_baseboards_humidity'].state <= 100) {
return `<ha-icon
icon="mdi:water-percent"
style="width: 20px; height: 20px; color: red;">
</ha-icon> <span> ${states['sensor.basement_baseboards_humidity'].state} %</span>`;
} else {
return `<ha-icon
icon="mdi:water-percent"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span> ${states['sensor.basement_baseboards_humidity'].state}</span>`;
}
]]]
tchart:
card:
type: custom:mini-graph-card
entities:
- sensor.current_temperature_basement
name: Temperature
points_per_hour: 1
color_thresholds:
- value: 60
color: blue
- value: 67
color: cyan
- value: 73
color: green
- value: 80
color: orange
- value: 90
color: red
tap_action:
action: none
show:
name: false
icon: false
state: false
points: hover
card_mod:
style: |
ha-card {
border: none;
background-color: rgba(7, 103, 215, 0.0);
}
hchart:
card:
type: custom:mini-graph-card
entities:
- sensor.basement_baseboards_humidity
name: Temperature
points_per_hour: 1
color_thresholds:
- value: 50
color: green
- value: 70
color: orange
- value: 100
color: red
tap_action:
action: none
show:
name: false
icon: false
state: false
points: hover
card_mod:
style: |
ha-card {
border: none;
background-color: rgba(7, 103, 215, 0.0);
}
card_mod:
style: |
ha-card {
border: none;
background-color: rgba(7, 103, 215, 0.24);
}
- type: custom:mushroom-climate-card
entity: climate.ac000w011633790
primary_info: name
name: Heat Pump
secondary_info: none
hvac_modes:
- heat
- cool
- 'off'
show_temperature_control: true
collapsible_controls: false
icon: mdi:heat-pump-outline
tap_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state('climate.ac000w011633790', 'heat') %}
background-color: rgba(255, 0, 0, 0.3);
{% elif is_state('climate.ac000w011633790', 'cool')
%}
background-color: rgba(0, 150, 255, 0.45);
{% else %}
background-color: rgba(7, 103, 215, 0.24);
{% endif %}
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
- type: custom:mushroom-climate-card
entity: climate.basement_baseboards
primary_info: name
name: Baseboards
secondary_info: none
hvac_modes:
- heat
- 'off'
show_temperature_control: true
collapsible_controls: true
tap_action:
action: call-service
service: climate.set_hvac_mode
data: null
hvac_mode: heat
target: null
entity_id: climate.basement_baseboards
confirmation: null
text: Do you want to turn on the baseboards?
icon: mdi:radiator
card_mod:
style: >
ha-card { {% if
is_state('climate.basement_baseboards', 'heat') %}
background-color: rgba(255, 0, 0, 0.24);
{% else %}
background-color: rgba(7, 103, 215, 0.24);
{% endif %} --card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
primary: >-
{% set state =
(states.sensor.current_temperature_first_floor.state) %} {{ state
}} °F
secondary: Basement
icon: |-
{% if is_state('climate.ac000w011633790', 'heat') %}
mdi:fire
{% elif is_state('climate.ac000w011633790', 'cool') %}
mdi:snowflake
{% else %}
mdi:cancel
{% endif %}
icon_color: |-
{% if is_state('climate.ac000w011633790', 'heat') %}
red
{% elif is_state('climate.ac000w011633790', 'cool') %}
blue
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_first_floor
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-template-card
entity: climate.ac000w007172407
tap_action:
action: more-info
primary: >-
{% set state =
(states.sensor.current_temperature_first_floor.state) %} {{ state
}} °F
secondary: First Floor
icon: |-
{% if is_state('climate.first_floor_baseboards', 'heat') %}
mdi:radiator
{% elif is_state('climate.ac000w007172407', 'heat') %}
mdi:fire
{% elif is_state('climate.ac000w007172407', 'cool') %}
mdi:snowflake
{% else %}
mdi:cancel
{% endif %}
icon_color: >-
{% if is_state('climate.ac000w007172407', 'heat') or
is_state('climate.master_bedroom_baseboards', 'heat') %}
red
{% elif is_state('climate.ac000w007172407', 'cool') %}
blue
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_second_floor
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px
}
- type: custom:mushroom-template-card
entity: climate.ac000w007172407
tap_action:
action: more-info
primary: >-
{% set state =
(states.sensor.current_temperature_second_floor.state) %} {{ state
}} °F
secondary: Second Floor
icon: |-
{% if is_state('climate.second_floor_baseboards', 'heat') %}
mdi:radiator
{% else %}
mdi:cancel
{% endif %}
icon_color: |-
{% if is_state('climate.second_floor_baseboards', 'heat') %}
red
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_master_bedroom
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-template-card
entity: climate.ac000w011633790
tap_action:
action: more-info
primary: >-
{% set state =
(states.sensor.current_temperature_master_bedroom.state) %} {{
state }} °F
secondary: Master Bedroom
icon: |-
{% if is_state('climate.master_bedroom_baseboards', 'heat') %}
mdi:radiator
{% elif is_state('climate.ac000w011634191', 'heat') %}
mdi:fire
{% elif is_state('climate.ac000w011634191', 'cool') %}
mdi:snowflake
{% else %}
mdi:cancel
{% endif %}
icon_color: >-
{% if is_state('climate.ac000w011634191', 'heat') or
is_state('climate.master_bedroom_baseboards', 'heat') %}
red
{% elif is_state('climate.ac000w011634191', 'cool') %}
blue
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_kid_s_room
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-template-card
entity: climate.heat_pump_kids_room
tap_action:
action: more-info
primary: >-
{% set state =
(states.sensor.current_temperature_kid_s_room.state) %} {{
state }} °F
secondary: Kid's Room
icon: |-
{% if is_state('climate.second_floor_baseboards', 'heat') %}
mdi:radiator
{% elif is_state('climate.heat_pump_kids_room', 'heat') %}
mdi:fire
{% elif is_state('climate.heat_pump_kids_room', 'cool') %}
mdi:snowflake
{% else %}
mdi:cancel
{% endif %}
icon_color: >-
{% if is_state('climate.heat_pump_guest_room', 'heat') or
is_state('climate.second_floor_baseboards', 'heat') %}
red
{% elif is_state('climate.heat_pump_guest_room', 'cool') %}
blue
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 100%
margin: 0
legend:
show: false
chart:
height: 140
experimental:
color_threshold: true
series:
- entity: sensor.current_temperature_guest_room
color_threshold:
- value: 50
color: blue
- value: 67
color: cyan
- value: 72
color: green
- value: 75
color: orange
- value: 80
color: red
min: 50
max: 90
header_actions:
tap_action:
action: none
show:
legend_value: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-template-card
entity: climate.heat_pump_guest_room
tap_action:
action: more-info
primary: >-
{% set state =
(states.sensor.current_temperature_guest_room.state) %} {{ state
}} °F
secondary: Guest Room
icon: |-
{% if is_state('climate.second_floor_baseboards', 'heat') %}
mdi:radiator
{% elif is_state('climate.heat_pump_guest_room', 'heat') %}
mdi:fire
{% elif is_state('climate.heat_pump_guest_room', 'cool') %}
mdi:snowflake
{% else %}
mdi:cancel
{% endif %}
icon_color: >-
{% if is_state('climate.heat_pump_guest_room', 'heat') or
is_state('climate.second_floor_baseboards', 'heat') %}
red
{% elif is_state('climate.heat_pump_guest_room', 'cool') %}
blue
{% else %}
#6f6f6f
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -59px;
margin-right: 0px;
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
}
The radial bar shows current temperature. The icon shows what the climate control unit is doing. Clicking on the icon will ideally show a pop-up with various options, but I don’t have that working yet.
Credit to @rhysb for sharing YAML.
2 Likes
Why don’t the last label on the column (Fri) show up on my diagram, and how can I fix it?
type: custom:apexcharts-card
apex_config:
xaxis:
labels:
format: ddd
graph_span: 1w
span:
end: day
series:
- entity: input_number.dagens_kwh
yaxis_id: elanv
type: column
group_by:
func: last
duration: 1d
unit: kWh
show:
legend_value: false
in_chart: true
- entity: sensor.indoor_temperature
name: gisteren
color: purple
float_precision: 0
offset: '-1d'
gives me Gisteren(-1d). how can I get rid of the (-1d) ?
On Mine the first Label, “Vanished” about 2 weeks, a month ago, have no idea why, maybe something about using card_mod " margin .- X " not sure, maybe i dont really care, to much other stuff to think about 
show:
legend_value: false
1 Like
Nice! Can you share your code?
It’s a “combo” of several cards, in vertical stack in grid, and alot of card_mod (probably to much/over-modded)
But sure, maybe you can get some ideas (i doubt you can use it as is, but maybe you can “get a grip” of what i’ve been playing with
I wish i could get something similar, an easier way , but i think i stay with this “touch” for awhile now.
PS: here is the part shown
- type: custom:text-divider-row
text: 7 Hours Ahead
align: center
- type: vertical-stack
cards:
- type: custom:weather-chart-card
entity: weather.forecast_home_hourly
show_main: false
show_attributes: false
icons: /local/weather-icons/shadows/
card_mod:
style: |
ha-card {
box-shadow: none;
margin-top: -20px;
margin-right: -10px;
margin-left: -5px;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
ha-card div.chart-container {
height: 0.1px;
}
ha-card div.conditions img {
height: 40px; width: 40px;
}
- type: custom:apexcharts-card
graph_span: 7h
span:
start: hour
offset: +1h
header:
show: false
show_states: false
all_series_config:
group_by:
func: last
duration: 1h
apex_config:
grid:
xaxis:
lines:
show: false
yaxis:
lines:
show: false
chart:
height: 40
plotOptions:
bar:
columnWidth: 80%
borderRadius:
- 5
legend:
show: false
xaxis:
axisBorder:
color: '#2E2E2E'
yaxis:
show: false
id: temp
series:
- entity: weather.forecast_home_hourly
name: min.
yaxis_id: temp
unit: °C
type: column
color: '#FFBF00'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.temperature];
});
show:
datalabels: true
- entity: weather.forecast_home_hourly
name: Precip mm
yaxis_id: mm
unit: mm
type: column
color: '#6495ED'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.precipitation];
});
show:
datalabels: true
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 0px;
padding: 0px 0px 0px 0px;
margin-top: -30px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: -40px;
}
- type: custom:text-divider-row
text: Next 5 Days
align: center
- type: vertical-stack
cards:
- type: custom:weather-chart-card
entity: weather.forecast_home
show_main: false
show_attributes: false
icons: /local/weather-icons/shadows/
card_mod:
style: |
ha-card {
box-shadow: none;
margin-top: -22px;
margin-right: -10px;
margin-left: -20px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
}
ha-card div.chart-container {
height: 0.1px;
}
ha-card div.conditions img {
height: 40px; width: 40px;
}
- type: custom:apexcharts-card
graph_span: 5d
span:
start: day
offset: +1d
header:
show: false
show_states: false
all_series_config:
group_by:
func: last
duration: 1d
apex_config:
grid:
xaxis:
lines:
show: false
yaxis:
lines:
show: false
chart:
height: 40
plotOptions:
bar:
columnWidth: 80%
borderRadius:
- 5
legend:
show: false
xaxis:
axisBorder:
color: '#2E2E2E'
lines:
show: false
labels:
format: ddd dd
yaxis:
show: false
series:
- entity: weather.forecast_home
name: max.
yaxis_id: temp2
unit: °C
type: column
color: '#FFBF00'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.temperature];
});
show:
datalabels: true
- entity: weather.forecast_home
name: min.
yaxis_id: temp3
unit: °C
type: column
color: '#87bf50'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.templow];
});
show:
datalabels: true
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 0px;
padding-bottom: 0px !important;
padding-top: 0px !important;
margin-top: -28px;
margin-right: 0px;
margin-left: -25px;
margin-bottom: -5px;
}
- type: custom:apexcharts-card
graph_span: 5d
span:
start: day
offset: +1d
header:
show: false
show_states: false
all_series_config:
group_by:
func: last
duration: 1d
apex_config:
grid:
xaxis:
lines:
show: false
yaxis:
lines:
show: false
chart:
height: 40
plotOptions:
bar:
columnWidth: 80%
borderRadius:
- 5
legend:
show: false
xaxis:
axisBorder:
color: '#2E2E2E'
lines:
show: false
labels:
format: ddd dd
yaxis:
show: false
series:
- entity: weather.forecast_home
name: Precip
yaxis_id: mm
unit: mm
type: column
color: '#6495ED'
data_generator: |
return entity.attributes.forecast.map((entry) =>
{
var date = new Date(entry.datetime);
return [date, entry.precipitation];
});
show:
datalabels: true
card_mod:
style: |
ha-card {
box-shadow: none;
border-radius: 0px;
padding-bottom: 0px !important;
padding-top: 0px !important;
margin-top: -34px;
margin-right: -20px;
margin-left: -40px;
margin-bottom: -13px;
}
Here is the whole “column in grid”
Edit: 28-06
Doo to HA updates, i change graph_span to 6 days ! as the “weather.forecast_home
" has been updated”
And had to change margins few places also, at the same time , as something caused it to “cover” above “text-divider”, most likely also caused by the change in “weather.forecast_home” entity
4 Likes
Hi everyone,
Can someone help me with my graph? I want to move the yaxis to more the boarders of the card. Here is my code:
type: custom:apexcharts-card
header:
show: true
title: Verbrauch
graph_span: 1h
update_interval: 1min
all_series_config:
stroke_width: 1
apex_config:
legend:
show: false
yaxis:
- id: first
decimals: 0
apex_config:
forceNiceScale: true
title:
text: '[W]'
rotate: 0
offsetX: 15
offsetY: -140
'labels:':
show: true
offsetX: 50
axisTicks:
show: true
- id: second
opposite: true
decimals: 0
apex_config:
forceNiceScale: true
title:
text: '[%]'
rotate: 0
offsetX: -15
offsetY: -140
- id: third
opposite: true
decimals: 0
apex_config:
forceNiceScale: true
title:
text: '[°C]'
rotate: 0
offsetX: -15
offsetY: -140
series:
- entity: sensor.wohnzimmer_server_stecker_aubess_tuya_power
name: Leistung
yaxis_id: first
fill_raw: last
show:
in_header: true
- entity: sensor.proxfuji_cpu_load_1_min_avg
name: CPU Last
yaxis_id: second
offset: +1min
fill_raw: last
- entity: sensor.proxfuji_temperature_x86_pkg
name: CPU Temp.
yaxis_id: third
fill_raw: last
And here the resulting graph:
I would like it to look like this:
Edit:
I had a typo and was able to move the yaxis label to the side, but the graph stays small:
…
yaxis:
- id: first
decimals: 0
apex_config:
forceNiceScale: true
title:
text: '[W]'
rotate: 0
offsetX: 15
offsetY: -140
labels:
show: true
offsetX: -30
axisBorder:
offsetX: -30
axisTicks:
offsetX: -30
…
edit: nevermind. it just kind of … fixed itself after a while.
I don’t know since when, but I get a mass of errors like this from ApexCharts:
Chrome freezes because of not enough memory.
Example of a configuration:
type: custom:apexcharts-card
graph_span: 4h
update_interval: 10s
cache: false
show:
loading: false
span:
offset: +30m
now:
show: true
color_list:
- var(--label-badge-blue)
header:
show: true
title: i3s | soc
show_states: true
standard_format: true
colorize_states: true
all_series_config:
show:
legend_value: false
series:
- entity: sensor.i3s_120_remaining_battery_percent
name: soc
unit: '%'
fill_raw: last
yaxis:
- min: 0
max: 100
apex_config:
tickAmount: 5
apex_config:
style:
width: 100%
height: auto
xaxis:
tooltip:
enabled: false
card_mod:
style: |
#state__name, .apexcharts-xaxis-label, .apexcharts-yaxis-label {
font-size: 1em !important;
}
.apexcharts-legend {
padding-top: 10px;
}
My initial thought is, your “battery” wont last long, if you “poll” it every 10 sec, and i wonder why you actually want the information “Every 10 seconds” , are you “living on the edge” ? or is it a “life saving” Device?
I believe HA can handle this “setup”, but obviously not your Chrome