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?
Hi
A dumb question. I see a lot of transform usages like this:
transform: 'return (x === 0 ? 12 : x);'
But then, this doesn’t seem to work:
transform: 'return (x>0 ? x : 0);'
Any ideas?
Best Eric
I’m trying to get create a graph that shows the time from midnight to the current time on its bottom axis. I have searched but can’t find the appropriate solution.
This is my current code:
type: custom:apexcharts-card
apex_config:
legend:
show: false
header:
show: true
title: Consumption vs Generation
show_states: true
colorize_states: true
graph_span: 24h
chart_type: line
update_interval: 5min
all_series_config:
stroke_width: 2
span:
start: day
offset: +4min
series:
- entity: sensor.power_photovoltaics_rounded
name: Energy Generated
color: green
extend_to: now
- entity: sensor.power_load_negative_to_positive_conversion
name: Energy Consumed
color: red
extend_to: now
I have included a screenshot showing how the card currently looks. Note the blank space on the right.
Thank you in advance!
Hi, I’m having issues using color threshold: colors are overlayed and not blended as expected. Maybe something wrong in card setting?
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 24h
header:
show: true
show_states: true
colorize_states: true
apex_config:
legend:
show: false
dataLabels:
enabled: false
all_series_config:
stroke_width: 3
extend_to: now
show:
extremas: true
series:
- entity: sensor.thermal_comfort_humidex
name: EXT humidex
fill_raw: last
color_threshold:
- value: 45
color: red
- value: 40
color: orange
- value: 30
color: yellow
- value: 20
color: green
- value: 10
color: blue
show:
legend_value: false
- entity: sensor.thermal_comfort_cameretta_humidex
name: Cameretta humidex
fill_raw: last
color_threshold:
- value: 10
color: blue
- value: 20
color: green
- value: 30
color: yellow
- value: 40
color: orange
- value: 45
color: red
show:
legend_value: false
- entity: sensor.thermal_comfort_soggiorno_humidex
name: Soggiorno humidex
fill_raw: last
color_threshold:
- value: 10
color: blue
- value: 20
color: green
- value: 30
color: yellow
- value: 40
color: orange
- value: 45
color: red
show:
legend_value: false
This is a sample code taken from some earlier post describing a good example of a normal data_generator structure
- type: custom:apexcharts-card
graph_span: 8d
span:
start: hour
apex_config:
dataLabels:
enabled: true
header:
show: true
title: Precipitation Forecast
series:
- entity: weather.home
type: column
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
I wish to make an offset to data values e.g. like this:
data_generator: |
let offset = 123
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), (entry.precipitation + offset)];
});
This works fine, but for the offset I would like to use an entity, that has the needed value, for example in input_number defined elsewhere in Home Assistant.
Any ideas how to do that?
EDIT: I used today’s trivial solution and asked ChatGPT4o. Got working solution right away.
„stacked=true“ no longer works after update?
Yesterday I installed the latest update of ApexCharts and since then the bars of the bar chart are displayed side by side, no longer stacked. Cache has been cleared and also tested on different browsers.
Has anyone else had this experience?
3 Likes
I’m trying to figure it out. The way the library handles this has changed quite drastically and it might take some time to fix it (if I can fix it on my side)
3 Likes
I have another question. Maybe it was already like this before. Why doesn’t the Y-axis starts at 0? This causes the bars to visually slip into the negative range
How do I remove the horizontal line in the line graph?
- type: 'custom:apexcharts-card'
apex_config:
chart:
height: 500px
yaxis:
- id: first
labels:
formatter: |
EVAL:function (val) {
return val.toFixed(0) + '€';
}
show: true
min: 0
graph_span: 60d
series:
- entity: sensor.mysensor
type: column
name: Per dag
unit: €
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.costs.map((entry) => {
return [new Date(entry.readingDate), entry.total];
});
- entity: sensor.mysensor
type: line
stroke_width: 2
name: Gemiddeld
unit: €
show:
in_header: false
legend_value: false
data_generator: |
return entity.attributes.costs.map((entry) => {
return [new Date(entry.readingDate), entry.average];
});
You can set the min value of the Y axis. You can see an example in my post above.
I have commented on another post earlier, likely the data is in reverse order and the horizontal line is connecting the dots
1 Like
Sorry if I missed it but what does the new statistics type “change” do?