Add this to the root ? layout: minimal
1 Like
Thank you very much!
Is there a way to recreate the history charts for non-numeric, text-based states?
Two examples from the built-in History:
Top graph is changing color based on state of a weather entity changing from sunny to cloudy to whatever.
Bottom graph is changing color of fill area based on state of a climate entity changing from idle (no fill), to cooling (blue), to heating (red).
I’m trying to recreate the history of a climate entity in a more attractive chart. I have the three lines plotting with no problems, but am failing at figuring out how to depict the state change from idle to cooling to heating. It doesn’t have to be fill like the built-in history chart; I’m open to any ideas.
Hello
Is it possible to select an entity for the max value?
I would like to use the max value of Forecast.Solar for the solar production to see the yield in %
- type: custom:apexcharts-card
header:
show: true
title: Solarstrom
show_states: true
colorize_states: true
chart_type: radialBar
series:
- entity: sensor.solar_today_sensor_strom_tarif_bezug
name: erzeugt
max: 4
- entity: sensor.energy_production_today_remaining
name: verbleibend
max: 4
apex_config:
legend:
show: false
plotOptions:
radialBar:
startAngle: -90
endAngle: 90
I think this is a great idea. All you need to do is have the sensor report 100% when the corresponding distance is active. Using a custom sensor could achieve this.
The sensors are already available from Force.Solar.
There is the sensor.energy_production_today, which should be my 100 %. But now I can’t simply specify the sensor as max.
I found a way myself and what can I say…
I’m not sure if it’s brilliant or just stupid 
I use Node-Red to read my yaml-file, search with a function for the max-value, replace it with the value of an entity and then write the yaml-file back again. With the browser_mod I update the UI to apply the changes.
This is what the function I use looks like:
// Access the payload
let payload = msg.payload;
var ha = global.get('homeassistant');
var value = ha.homeAssistant.states['sensor.energy_production_today'].state;
// Define the new number as a variable
const newValue = value;
// Regular expression to find "max: " followed by a number (with or without decimal places)
const regex = /max: \d+(\.\d+)?/;
// Replace the found number (with or without decimal places) with the new value
payload = payload.replace(regex, `max: ${newValue}`);
// Return the updated payload
msg.payload = payload;
return msg;
I m using that code to show bar graph:
type: custom:apexcharts-card
graph_span: 1w
span:
end: day
header:
show: true
title: XamreX Stacjonarka ON
series:
- entity: sensor.czas_dec_xamrex_stacjonarny_home
type: column
show:
as_duration: hour
group_by:
func: last
duration: 1d
sometimes it shows ms, like here:
is there any way to get rid of displaying those ms?
Is there a way to use a template within the Title or Header - or otherwise get some templated data to appear on a chart?
I have a sensor updated by an API call 4 times a day but sometimes the API hasn’t been updated and the data returned is unchanged. eg: it should update at 0630 every day, I run the API call around 0650 but sometimes it returns data from the previous update at 1630 the previous day and I would like this to be visible on the chart.
The state of the sensor contains the last update time and I would like this displayed on the graph. I tried just adding templating to the title field but this doesn’t work (it just displays the template as plain text) and the guide on github says the Title field can only take text so this makes sense.
Is there a workaround to achieve what I want?
What does your sensor state value look like?
hello I am needing some help so I have a few ApexChart cards must say super card @RomRider
So here is one of my charts
I am wanting to keep the select zone like this.
here is the code for the chart
square: false
type: grid
columns: 1
cards:
- type: custom:apexcharts-card
header:
show: true
title: SUB 1 Voltages
show_states: false
colorize_states: true
graph_span: 30d
apex_config:
chart:
height: 300
stroke:
width:
- 0
- 2
- 2
- 2
all_series_config:
stroke_width: 1
opacity: 1
show:
in_brush: true
experimental:
brush: true
series:
- entity: sensor.lb_sub1_mains_lb_sub1_mains_modbus_chn_1
type: line
color: red
name: Phase 1
- entity: sensor.lb_sub1_mains_lb_sub1_mains_modbus_chn_2
type: line
color: white
name: Phase 2
- entity: sensor.lb_sub1_mains_lb_sub1_mains_modbus_chn_3
type: line
color: blue
name: Phase 3
title: SUB 1 Mains
Thank you, it saved me many frustrations to try and do the same
Try this …it will round it a bit but not sure if that is acceptable
Anyone having issues getting extremas to show? Have no idea why this isn’t working. I’ve tried applying it to all_series_config as well as individual series. Doesn’t work with either.
What am I missing? Anyone got any ideas? Surely it must be something simple. TIA
Code here
type: custom:apexcharts-card
apex_config:
legend:
show: true
graph_span: 24h
span:
start: minute
header:
show: true
title: Amber Electricity Forecast
show_states: false
colorize_states: true
all_series_config:
stroke_width: 1.5
float_precision: 3
show:
legend_value: false
extremas: true
datalabels: false
series:
- entity: sensor.home_general_forecast
name: Grid
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.start_time), entry.per_kwh];
});
- entity: sensor.home_feed_in_forecast
name: Feed in
data_generator: |
return entity.attributes.forecasts.map((entry) => {
return [new Date(entry.start_time), entry.per_kwh];
});
- entity: sensor.aemo_nem_nsw1_current_30min_forecast
name: AEMO Feed in
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.start_time), entry.price];
});
yaxis:
- min: -0.1
max: ~0.5
decimals: 2
apex_config:
forceNiceScale: true
Thank you!
Works perfect!
Need one more help to average data:
I got chart that shows how long my PC is turned On each day
It works perfect, and it pulls data from history stats:
Is it any way, to put on chart a new column, that show how long PC was turn on in last 7 days?
I m trying two versions, but none of it works:
type: custom:apexcharts-card
graph_span: 7d
span:
end: day
header:
show: true
show_states: true
title: Stacjonarki
series:
- entity: sensor.xamrex_stacjonarny_home
type: column
name: XamreX Dzisiaj
show:
in_header: false
group_by:
func: last
duration: 1d
############# TESTS ##########
- entity: sensor.xamrex_stacjonarny_home
name: Artur Średnio przez 7dni
type: column
transform: return Math.round(x*2);
show:
in_header: false
group_by:
func: avg
duration: 7d
- entity: sensor.xamrex_stacjonarny_home
name: Artur Średnio przez 7dniv2
type: column
statistics:
type: mean
period: week
align: middle
transform: return Math.round(x*2);
show:
in_header: false
group_by:
duration: 7d
It should be 5.8, but i got 4h and 6.7h ;(
It does not work with datagenerator series
1 Like
Bugger. I had a feeling that might be the case. Is that listed anywhere? I couldn’t find that anywhere in the documentation. Thanks mate
Extending apex-charts with new HA Sections.
I’m trying to get to expand to the new HA sections:
Have tried various combinations of apex_config without change.
type: custom:apexcharts-card
apex_config:
chart:
height: 400px
width: 100%
Hi there, I got following config:
Is there any way how can I change font size of the title “Exterior” that is defined within the Header section ? Thanks.
type: custom:apexcharts-card
layout: minimal
graph_span: 24h
card_mod:
style: |
ha-card {
font-size: 10px;
}
apex_config:
chart:
height: 90px
experimental:
color_threshold: true
header:
show: true
title: ‘Exterior’
show_states: true
colorize_states: true
floating: true
series:
- entity: sensor.zigbee_tem_hum_sensor_exterier_temperature
stroke_width: 2
color: salmon
type: area
curve: monotoneCubic
show:
name_in_header: false
header_color_threshold: true
extremas: false
color_threshold:
- value: -15
color: Blue- value: 0
color: CornflowerBlue- value: 15
color: rgb(244, 213, 122)- value: 24
color: orange- value: 30
color: red- value: 40
color: maroon