Use a + or - offset and indeed the span, as long as you are not changing / modifying the data (which is not that easy imo) you have to settle for a non-perfect representation.
This seems to get me very very close 
Pulling stats per 5minutes in combination with an extra entity to just show the true state in the header.
type: custom:apexcharts-card
graph_span: 1d
header:
show: true
show_states: true
now:
show: true
span:
start: day
apex_config:
chart:
height: 150px
legend:
show: false
series:
- entity: sensor.rainfall_today
show:
in_chart: false
name_in_header: false
- entity: sensor.rainfall_today
unit: mm
color: 488fc2
type: line
stroke_width: 2
extend_to: now
show:
in_header: false
statistics:
type: state
period: 5minute
align: start
group_by:
func: raw
duration: 1d
1 Like
Hi,
The ApexChart Card for Home Assistant is a really great package - and it’s derived from the ApexChart.JS project.
That kind of brings me to my issue:
For my data, I want to display the current state with a Radar plot (also called a Spider or Web plot).
ApexCharts.JS does support Radar Charts. That’s where I have the example image from.
ApexCharts Card does not have the radar plot in its chart_type options.
But … it has apex_config options. These only apply to the Options in ApexCharts.JS, not the whole command set?
Now I’m properly confused.
Are Radar Charts possible in the ApexCharts card? Maybe via the apex_config option? And if so, does anyone has a working example I can built off from?
Much appreciated,
Thomas
Hi, I’m asking for help from someone more experienced than me, I need to create a graph of a sensor that records the values from 7pm to 5am for 7 days.
what is the correct code for recording time?
Now it’s as shown below, but it’s not good…
graph_span: 11h
show:
last_updated: true
span:
start: day
offset: +19h
This might get you close if you adjust the figures to 7 days. It will create buckets of 24hrs.
Hi, but I need to monitor the window that goes from 05 in the morning to 07 in the evening for 7 days… I don’t know how to modify the code…
Just to be clear, in 1 graph you want to see 7 days of data but only those values between 19:00 and 05:00, i.e. for the other times it should be 0 ?
Yes exactly I only want to see the values of one sensor from 7 in the evening to 5 in the morning, the other times don’t interest me.
basically I want to see every day, for 7 days, how much discharge my battery has.
Not easy as it is over multiple days, not even sure if feasible. You would need some functon for the series… I will try a bit but not sure if I can
EDIT, no clue sorry… alternative is to create a template sensor that would only register if the time is between 1900 and 0500 and use that in the chart
1 Like
Ah, right! I did not think about it! I’ll try to create a sensor that records the battery discharge at those times…
Thank you!
I tried to create this sensor with helpers, but I don’t think it can be done… I didn’t succeed
This is not the correct thread for that, you would need a template, start another item in the forum, people are there to help.
1 Like
Hi,
is it possible to set the zero point of the right y-axis to the zero point of the left y-axis?
Much appreciated,
Michael
Following code is used to create a radial bar that dynamically changes the gradient color from blue to red based on the entity value which is a boiler temperature.
For example the right one I would expect to be blue because the temperature is 28 and the left looks good but once the temperature drops, it becomes like the right one.
How can I get the thresholds and stops so that they change color based on the temperature vs the max 80?
Example 1)
On temp 50 the radial should be blue, orange and starting to become red.
Example 2)
On 30 it should go from dark blue to medium blue, hence no orange or red like to picture!
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.boiler_apartment_temperature
color_threshold:
- value: 0
color: '#0000FF'
- value: 20
color: '#0000FF'
- value: 30
color: '#007FFF'
- value: 40
color: '#FFA500'
- value: 50
color: '#FF0000'
- value: 60
color: '#FF0000'
show:
legend_value: false
max: 80
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: dark
type: radial
shadeIntensity: 0.5
inverseColors: true
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#0000FF'
- offset: 25
color: '#007FFF'
- offset: 50
color: '#FFA500'
- offset: 100
color: '#FF0000'
stroke:
lineCap: round
legend:
show: false
chart:
height: 240
- type: custom:mushroom-template-card
multiline_secondary: false
entity: sensor.boiler_apartment_temperature
layout: vertical
primary: |
{{states('sensor.boiler_apartment_temperature')}} °C
secondary: |
Boiler: {{states('switch.ariston_apartment_power')}}
icon: |-
{% if states('sensor.boiler_apartment_temperature') | float < 40 %}
mdi:thermometer-alert
{% else %}
mdi:thermometer
{% endif %}
icon_color: |-
{% if states('sensor.boiler_apartment_temperature') | float > 55 %}
red
{% elif states('sensor.boiler_apartment_temperature') | float > 45 %}
orange
{% else %}
blue
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -120px !important;
width: 120px !important;
margin-left: auto !important;
margin-right: auto !important;
border-width: 0px !important;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: switch.ariston_apartment_power
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: water_heater.apartment
1 Like
Hello!
I like the ApexCharts integration and I try to fill up a graph with data from my own custom template sensor with constant values. The values are measured by “hand” and written down. Later I want to add automatic measured values, but for now, I try to get this simple scenario running.
The template is basic and returns a monthly hot-water usage:
sensor:
- platform: template
sensors:
warmwasser_2023_24:
unit_of_measurement: kWh
value_template: >
values:
- time: '2023-01-01T10:00:00+00:00'
value: 495.0
- time: '2023-02-01T10:00:00+00:00'
value: 420.0
- time: '2023-03-01T10:00:00+00:00'
value: 461.0
- time: '2023-04-01T10:00:00+00:00'
value: 169.0
- time: '2023-05-01T10:00:00+00:00'
value: 84.0
- time: '2023-06-01T10:00:00+00:00'
value: 37.0
- time: '2023-07-01T10:00:00+00:00'
value: 37.0
- time: '2023-08-01T10:00:00+00:00'
value: 31.0
- time: '2023-09-01T10:00:00+00:00'
value: 37.0
- time: '2023-10-01T10:00:00+00:00'
value: 54.0
- time: '2023-11-01T10:00:00+00:00'
value: 454.0
- time: '2023-12-01T10:00:00+00:00'
value: 733.0
- time: '2024-01-01T10:00:00+00:00'
value: 667.0
- time: '2024-02-01T10:00:00+00:00'
value: 419.0
- time: '2024-03-01T10:00:00+00:00'
value: 216.0
- time: '2024-04-01T10:00:00+00:00'
value: 173.0
- time: '2024-05-01T10:00:00+00:00'
value: 120.0
Now I try to show these values in a chart (a simple check, if it’s working):
type: custom:apexcharts-card
graph_span: 1y
header:
show: true
title: Warmwasser Z9
show_states: true
colorize_states: true
series:
- entity: sensor.warmwasser_2023_24
name: Warmwasser
type: line
data_generator: |
return entity.attributes.values.map((entry) => {
return [new Date(entry.time).getTime(), entry.value];
});
However, it’s not working. I get an endless “loading…” inside the chart:
I tried two different structures (values as two arrays with an index-access, and the way from above). All time I get a “loading…” without any error.
Maybe I misunderstood something. I googled a lot to find similar examples (most are API-driven) but I don’t get it running.
TIA for any hint.
Never seen this before and although I believe to be more than medioicrate in HA usage, I doubt this will work… what does the sensor itself show?
Hm, it’s more or less documented here:
With the statement:
So, maybe I missed something in the declaration of a sensoror I did something wrong.
Nothing. And unfortunately the data generator is never called (I added a console output, but nothing happens).
It’s unclear to me what type of sensor is meant in the documentation, and my guess was to try a template.
Exactly, I have not seen a template setup work like that. and since not data in sensor, no graph. So you first have to make sure that your sensor gets properly created and I have no clue what your data-source is and how that looks like wrt to format.
Sensor-creation is not part of this thread (apex only) so I would suggest to create another post in the forum to get that supported.
How to change size of the header values?