thanks , it worked with a very high value in duration
I just wanted to say thanks! I implemented the “group_by” section of code and it works great!
Is there a way to reduce the offset from the edge of the card to the yaxis labels?
I want to graph/labels to cover the entire card
I am using a sensor.day_night in my apex-chart, it works fine but the columns are only in the past.
Can I use the night values also for the future?
Example:
- entity: sensor.day_night
curve: stepline
type: area
transform: 'return x === ''Day'' ? 0 : 30 ;'
color: grey
stroke_width: 0
opacity: 0.3
show:
in_header: false
legend_value: false
1 Like
Could you please share your code for the layout you have created so far?
can someone perhaps look at my graph, there is a empty space between the two graphs
i think it is because the first value is at 1.July 06:00 and the next is at 1.July 13:00 is there a way to get it without a hole?
my code
- type: custom:apexcharts-card
locale: 'de'
graph_span: 6d
span:
start: day
offset: -3d
header:
show: true
title: Temperatur Vohersage
show_states: true
now:
show: true
label: 'Heute'
apex_config:
legend:
show: false
fill:
type: gradient
gradient:
type: vertical
opacityFrom: 0.8
opacityTo: 0
stops:
- 0
- 99
- 100
series:
- entity: weather.openweathermap
name: Temperature
unit: °C
type: area
attribute: temperature
fill_raw: last
extend_to_end: false
group_by:
func: avg
duration: 1h
- entity: weather.openweathermap
type: area
extend_to_end: false
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
1 Like
HI,
I can’t see my Apexcharts on my iPhone using the HomeAssistant App, did you have the same issue ?
It’s ok on my PC
Thanks for your help
Seem to have issues displaying apexcharts since last update, anyone else having issues.
The cards have been fine for a long while until now.
The error message is:
/// apexcharts-card version 2.0.1 /// value.series[0] is not a ChartCardSeriesExternalConfig value.series[0].deflate is extraneous value.series[0].deflate is extraneous value.header is not a ChartCardHeaderExternalConfig; value.header.deflate is extraneous value.deflate is extraneous
But not sure what this means or where to look. Any help would be appreciated
no it works well on my iphone.
greets
Here the columns in my chart looks like I want them to:
I would however prefer to show “Effektstyring” by avg of 15min. That change make columns look like this:
Probably an obvious reason to this behaviour that I just don’t currently grasp…?
Code:
type: custom:apexcharts-card
config_templates: full_bredde_flere_serier_1d
update_interval: 10m
graph_span: 1d
header:
title: Forbruk, koststyring og effektstyring 1d
yaxis:
- id: first
decimals: 2
- id: second
decimals: 1
opposite: true
max: 1
series:
- entity: sensor.accumulated_consumption_current_hour
name: Forbruk
type: column
opacity: 0.4
group_by:
func: max
duration: 60m
yaxis_id: first
stroke_width: 1
- entity: sensor.varme_agressivitet_stromstyring_inverted
name: Koststyring nå
type: area
opacity: 0.2
show:
legend_value: true
yaxis_id: second
stroke_width: 1
group_by:
func: avg
duration: 60m
- entity: sensor.strom_effektbegrensning_inverted
name: Effektstyring nå
type: area
opacity: 0.2
show:
legend_value: true
yaxis_id: second
stroke_width: 1
group_by:
func: avg
duration: 60m
Hallo ChrZZ, sorry for late answer (not visiting every day…) My code so far for the combined two graphs (custom minigraph and history graph together), both used in custom config-template-card, with dynamic hours_to_show and title string of the graph. The indicator icon is flashing in orange color according to the state of the heat-pump or in dark shadow color if the sensor is unavailable:
still missing the history span function unfortunatelly.
type: custom:config-template-card
variables:
obdobi: states['sensor.obdobi_mapa'].state
nazev: >-
'TUV teplota a provozní stav -
'+states['input_select.sledovane_obdobi'].state
entities:
- sensor.obdobi_mapa
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
overflow: visible !important;
}
cards:
- type: custom:mini-graph-card
name: ${nazev}
icon: mdi:water-boiler
entities:
- entity: sensor.rvs_teplota_tuv
name: Horní
color: '#55e5aa'
show_fill: false
- entity: sensor.rvs_teplota_tuv_zadana
name: Žádaná
show_points: false
color: '#508070'
- entity: sensor.teplota_tuv
name: Střed
color: '#005520'
show_state: false
show_fill: false
- entity: input_number.nocni_doba
color: '#000000'
show_line: false
show_fill: fade
show_points: false
show_legend: false
y_axis: secondary
hours_to_show: ${obdobi}
hour24: true
points_per_hour: ${120 / obdobi}
animate: true
height: 60
line_width: 1
show:
labels: true
fill: fade
points: hover
extrema: false
average: false
card_mod:
style: |
ha-card .header.flex .name.flex {
font-size: 15px;
opacity: 1;
}
ha-card .header.flex .icon {
--mdc-icon-size: 25px;
{% if states('sensor.rvs_tuv_stav') in ['unavailable','unknown','Nezjištěno'] %}
color: DarkSlateGrey;
animation: blinking 1s linear alternate infinite !important;
{% endif %}
{% if states('sensor.rvs_tuv_stav') in ['Nabíjení aktivní', 'Push aktivní'] %}
color: orange;
animation: blinking 0.5s linear alternate infinite !important;
{% endif %}
}
@keyframes blinking {
0% {opacity: 0.2;}
100% {opacity: 1;}
}
ha-card .states.flex .state .state__value.ellipsis {
padding-left: 0px !important;
margin-top: -18px;
margin-left: -10px;
font-size: 15px;
font-style: bold;
opacity: 1;
}
ha-card .states.flex .state .state__uom.ellipsis {
padding-left: 0px !important;
margin-top: -21px !important;
margin-left: -4px !important;
font-size: 15px;
font-style: bold;
opacity: 1;
}
.graph__legend__item:nth-of-type(1) .ellipsis:after {
content: ":{{states('sensor.rvs_teplota_tuv')}}°C";
}
.graph__legend__item:nth-of-type(2) .ellipsis:after {
content: ":{{states('sensor.rvs_teplota_tuv_zadana')}}°C";
}
.graph__legend__item:nth-of-type(3) .ellipsis:after {
content: ":{{states('sensor.teplota_tuv')}}°C";
}
ha-card .graph__legend {
font-size: 12px;
}
ha-card .graph__legend {
padding-left: 40px !important;
font-size: 12px;
}
ha-card .graph {
margin-top: -42px;
}
- type: history-graph
entities:
- entity: sensor.rvs_tuv_stav
name: ' '
hours_to_show: ${obdobi}
hour24: true
card_mod:
style: |
.content {
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
}
ha-card {
margin-top: -4px;
}
Anybody else noticed that cards with ApexCharts crashes your HA App (Android)? I have to skip these cards when I view on my phone. Works perfectly on the desktop.
Works fine here.
HA App version 2022.6.0-full, Android 12.
The wall charger for my car is running ‘twcmanager’ and it publishes to homeassistant, however periodically the entity becomes available until the next time a charging session starts.
Is there a way that apexcharts can only draw that entity if it is available, so that the chart doesn’t break?
Hello everyone
does anybody know if there is a way to define a y-axis range around the chart values, i.e. make
max = highest value + 5%
min = lowest value - 5%
?
Idea is that if I set a fixed min and max, then the range will be either too big or too small. If I don’t set min and max, then temperatures that are pretty stable look unstable, because Apex zooms in to ±1°C.
maybe reference the document, around the min / max under yaxis options.
I could not find anything on my question. Only fixed values.
I would like to make it relative and not absolute, i.e. x %.
If I set a fixed value on a date adjustable power consumption, it will either be too big (e.g. in time periods with low power consumption) or too small (e.g. in time periods with hogh power consumption).
Hi, firstly amazing work. When downloading the CSV data, is there anyway of showing the time stamps also? all I seem to see if the data.
I have this very wife friendly graph showing energy prices for today. As the “now” line can’t be configured, is there a way to alter the color of the current hour somehow? The line is too tiny to be seen from far away.
type: custom:apexcharts-card
graph_span: 24h
header:
title: Strømpriser i dag
show: true
span:
start: day
layout: minimal
apex_config:
chart:
height: 183px
now:
show: true
color: yellow
series:
- entity: sensor.nordpool_kwh_krsand_nok_2_095_0
type: column
color: rgba(100, 100, 100, 0.1)
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
style: |
ha-card {
margin-top: -8px;
background: rgba(0,0,0,0)
}