I believe this is not the right Thread/Topic for screen-capture questions … but here is my suggestions
https://www.google.com/search?client=firefox-b-d&q=screen+recorder
Hi there. I tried searching this topic and documentation as well, but without luck.
Does anyone know how to format the state value in the header the same as the dataLabel? See example and code for the chart below. Also notice I added the formatting under show_states, without luck. I’ve tried the formatting for states, state, as well but that does not seem to work. Help? Thanks in advance.
type: custom:apexcharts-card
graph_span: 7d1s
header:
show: true
title: Tijd TV gekeken per dag
show_states: true
colorize_states: true
span:
end: day
stacked: true
yaxis:
- id: tv
show: true
decimals: 1
apex_config:
tickAmount: 5
series:
- entity: sensor.tv_on_today
name: Vandaag
type: column
color: var(--google-yellow)
group_by:
func: max
duration: 1d
show:
as_duration: hour
datalabels: true
yaxis_id: tv
- entity: sensor.tv_on_today
name: Gemiddeld
type: line
color: var(--google-blue)
stroke_width: 2
float_precision: 0
group_by:
func: avg
duration: 7d
show:
as_duration: hour
datalabels: false
yaxis_id: tv_avg
apex_config:
legend:
show: false
grid:
show: false
stroke:
dashArray: [0, 5, 5]
show_states:
formatter: |
EVAL:function(value, opts) {
u = Math.floor(value);
m = Math.floor((value - u) * 60);
result = "";
if (u > 0)
result = u + "u ";
if (m > 0)
result += m + "m";
return result;
}
dataLabels:
formatter: |
EVAL:function(value, opts) {
u = Math.floor(value);
m = Math.floor((value - u) * 60);
result = "";
if (u > 0)
result = u + "u ";
if (m > 0)
result += m + "m";
return result;
}
offsetY: -5
background:
enabled: true
style:
colors:
- var(--google-yellow)
tooltip:
enabled: false
xaxis:
labels:
format: dd-MM
2 Likes
I’m actually after something that can save a snapshot of my apex chart Lovelace card, which is why I have asked here.
Is it possible in the apex chart configuration/ js to save say a PNG file every hour?
suppose you could do what I do with a dynamic span?
type: custom:config-template-card
entities:
- input_select.apex_span
variables:
span: states['input_select.apex_span'].state
card:
type: custom:apexcharts-card
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px -16px -16px;
padding: 0;
}
#header:
# title: Verbruik actueel
update_interval: 1min
graph_span: ${span}
series:
- entity: sensor.zp_actuele_opbrengst
color: gold
type: area
name: Zon
stroke_width: 3
opacity: 0.5
- entity: sensor.calculated_bruto_verbruik
color: darkblue
name: Verbruik
group_by:
func: avg
duration: 2min
stroke_width: 1
- entity: sensor.netto_verbruik
color: lightblue
type: area
name: Vermogen
group_by:
func: avg
duration: 2min
stroke_width: 3
opacity: 0.5
see ApexCharts card - A highly customizable graph card - #1495 by Mariusthvdb
other than that, I wouldn’t know of any tool to automatically create these ‘screen shots’
Hi,
Is it possible to create a column chart that doesn’t span any time? I was looking to have one chart with 4 columns - one for each of 4 entities showing Disk Use % for the drives in one of my servers. Bonus points for a color based scale such as green up to 60%, yellow 60-90, red 90+. I can’t seem to find any examples, and my attempts at doing this have failed so far with usually nothing being rendered for the graph.
Ok this looks great and will allow me to avoid Grafana for most things. Grafana is awful and I want to get rid of it ASAP.
That’s something I have been looking for too, please share if you find something. I want it in order to send a notification with an apex chart in it.
- Gradient color ( color-based scale ) don’t work for Columns
- you are better of using Custom:bar-card, in a horizontal stack, or glance-card
Thank you, I will check out that card!
Nice dashboard, 
how did you make it, could you share the code?
Nice Dashboard :), how did you made it, could you share the code?
Code below, I also used it from someone else, I like it being compact
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 4
cards:
- type: custom:mushroom-entity-card
entity: sensor.growatt_input_watt_actual
primary_info: state
secondary_info: name
name: Solar
icon: mdi:solar-power-variant
icon_color: orange
fill_container: false
layout: horizontal
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 4px !important;
padding-right: 0px !important;
padding-left: 2px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.growatt_generated_energy_today
primary_info: state
secondary_info: name
name: Today
icon: mdi:solar-power-variant
icon_color: '#ffc166'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 4px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:mushroom-template-card
primary: |
{{ states('sensor.energy_production_today_2') | round(2) }}kWh
secondary: Forecast
name: Forecast
icon: mdi:sun-clock
icon_color: '#ffc166'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 4px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.energy_production_tomorrow_2
primary_info: state
secondary_info: name
name: Tomorrow
icon: mdi:sun-clock
icon_color: '#ffc166'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 4px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.linky_papp
primary_info: state
secondary_info: name
name: EDF
icon: mdi:transmission-tower-import
icon_color: '#3498db'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 2px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.linky_daily
primary_info: state
secondary_info: name
name: Today
icon: mdi:transmission-tower-import
icon_color: '#9acced'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.linky_base_cost_2
primary_info: state
secondary_info: name
name: Cost
icon: mdi:currency-eur
icon_color: '#9acced'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.return_to_grid
primary_info: state
secondary_info: name
name: Surplus
icon: mdi:transmission-tower-export
icon_color: '#9c75da'
fill_container: false
layout: horizontal
style: |
ha-card {
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
- type: custom:apexcharts-card
experimental:
hidden_by_default: true
now:
show: true
label: ''
color: red
yaxis:
- id: value
apex_config:
tickAmount: 7
forceNiceScale: true
decimalsInFloat: 1
- id: Conso1
show: false
apex_config:
chart:
stacked: true
height: 190
offsetY: -10
offsetX: -10
redrawOnParentResize: true
parentHeightOffset: 0
legend:
show: false
xaxis:
labels:
format: HH
style:
fontSize: 11px
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
inverseColors: false
opacityFrom: 0.9
opacityTo: 0.7
stops:
- 10
span:
start: day
offset: +0h
graph_span: 24h
update_interval: 30s
header:
show: false
show_states: true
colorize_states: true
series:
- entity: sensor.solar_generated_hourly
show:
hidden_by_default: false
name: Solar now
type: column
yaxis_id: value
unit: kWh
group_by:
func: last
duration: 1h
- entity: sensor.linky_hourly
show:
hidden_by_default: false
name: EDF in
color: '#3498db'
type: column
yaxis_id: value
unit: kWh
group_by:
func: last
duration: 1h
- entity: sensor.solar_forecast_watt_hours_period
show:
in_header: false
legend_value: false
name: today
yaxis_id: value
color: '#ffa600'
opacity: 1
stroke_width: 1
float_precision: 1
offset: '-1h'
unit: kWh
data_generator: >
let res = []; for (const [key, value] of
Object.entries(entity.attributes.result)) {
res.push([new Date(key).getTime(), value/1000]);
} return res
style: |
ha-card {
font-size: 85%;
line-height: 10%;
padding-bottom: 0px !important;
padding-top: -30px !important;
padding-right: 0px !important;
padding-left: 0px !important;
1 Like
@vingerha could you tell me where the forecast sensor comes from? I have solar forecast integration enabled and it works in the energy dashboard but to my surprise I do not have the sensor with all the attributes.
It is free for a limited amount/day which for me, being a forecast, is more than sufficient. Example below, you need to change lat/lon inclination,…check the site
- platform: rest
name: solar_forecast_watt_hours_period
scan_interval: 28800
value_template: "OK"
resource: https://api.forecast.solar/estimate/watthoursperiod/:LAT/LON/30/0/2.3
json_attributes:
- result
2 Likes
HEADS UP:
Just so you are all aware:
HA 2023.4 beta Breaks many custom cards, and indeed also ApexCharts card. So, please wait for a fix to be found. If any.
There already is a lead, as cards using app-drawer-layout are no longer functional because this is no longer used in HA:
2 Likes
A visual comparison would be also helpful, so users can see the difference before and after an upgrade to the beta release 2023.4.0b0.
From the beta-release onwards (as it stands now) your dashboard will be filled with error-messages or does not show anything at all. The card becomes basically useless as there is nothing to display due to the errors.
Super, then please post an image of an failing apexchart so that other’s are aware of this.
Try with just
yaxis:
- min: 0
max: 20
That should work in my opinion. From there try adding the decimals and - if required - tickAmount.
just be warned, the cards simply fail
otoh, Kulmegil found a temporary fix, by
replacing
querySelector("app-drawer-layout partial-panel-resolver")
with
querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")
in the card.
for that, easiest is to copy it to another folder an load it from there (otherwise you will see HACS overwriting it )
# https://github.com/RomRider/apexcharts-card
- url: /local/resources/apexcharts-card/apexcharts-card.js?v=2.0.2+fix
# - url: /hacsfiles/apexcharts-card/apexcharts-card.js
type: module