but an awfull lot is from you answering my question or other peoples questions
And for that power stuff you need an awfull lot to get it fixed especially for elderly people that need a 50+ inch Screen to read Home Assistant
What I did not find is how to increase the font size on the vertical axis.
Where can I start looking ?
I have used this for xaxis, but doing the same for yaxis did not work at all to my surprise.
apex_config:
legend:
show: true
showForZeroSeries: true
yaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
xaxis:
labels:
style:
colors: black
fontSize: 16px
fontWeight: normal
Currently working on replacing some of my mini-graph-cards with ApexCharts and have a couple of questions regarding what’s possible. Apologies if this has been discussed before.
Is it possible to fill the area between to lines?
For example, I have a min and max temperature on my thermostat and would like to highlight just the space between, vs the space from the line to the bottom of the graph (‘area’ type).
Is it possible to toggle what entities are displayed based on their value?
Example: When the thermostat is set to heat or cool, the setpoint is a single value. When it’s toggled to heat/cool mode, that value becomes ‘NaN’ and Min and Max become readable. I’d like to use one chart to display both variants based on their value (hidden when NaN, shown when not) or based on the current climate state. Currently, I am using two separate charts with a conditional card to toggle between them, but this leads to ‘broken’ data on them when the mode is changed.
Any reasons why ‘stroke_width: 0’ would still display a line?
I’m using a few binary_sensors with ‘transform’ to show heating and cooling state, and would just like the area fill when on, without the line(s) living at the bottom of the graph when off.
Card YAML
type: custom:apexcharts-card
apex_config:
stroke:
width: 2
chart:
zoom:
type: x
enabled: true
toolbar:
show: true
height: auto
experimental:
color_threshold: true
header:
show: true
title: Inside Temp
show_states: true
colorize_states: true
all_series_config:
group_by:
func: last
graph_span: 1d
span:
end: day
yaxis:
- id: first
opposite: false
min: "|-2|"
max: "|+2|"
decimals: 0
- id: second
show: false
decimals: 0
opposite: true
min: 0
max: 1
series:
- entity: sensor.living_room_thermostat_temperature
yaxis_id: first
name: Current
color: orange
curve: smooth
- entity: climate.living_room_thermostat
attribute: target_temp_high
name: Target high
unit: °F
color: red
curve: stepline
yaxis_id: first
- entity: climate.living_room_thermostat
attribute: target_temp_low
name: Target Low
unit: °F
color: blue
curve: stepline
yaxis_id: first
- entity: binary_sensor.heating_on
transform: "return x === 'on' ? 1 : 0;"
name: Heating
yaxis_id: second
type: area
opacity: 0.5
curve: stepline
stroke_width: 0
color: red
show:
in_header: false
legend_value: false
- entity: binary_sensor.cooling_on
transform: "return x === 'on' ? 1 : 0;"
name: Cooling
yaxis_id: second
type: area
opacity: 0.5
curve: stepline
stroke_width: 0
color: blue
show:
in_header: false
legend_value: false
- entity: zone.home
name: Occupancy
curve: stepline
color: grey
opacity: 0.1
type: area
transform: "return x > 0 ? 1 : 0;"
stroke_width: 0
show:
in_header: false
legend_value: false
yaxis_id: second
Only option I know is to use config card templater, with that you can use templates to show/hide things from the graph based on entity values, i.e. you would need to hide the line and the legend and the header I assume
Maybe you can use my yaml code (Work in progress) take and adjust what you like.
There are some issues in the code - like the outside Temp line color is yellow instead of blue (according to the temperature)
I guess I have asked you this before and remember now reading that you found a solution I will check when i am back home
Where did you get that from cause it is not in the romrider apexchart github documentation
And I guess you had told me back then more or less that there are possibilites sometimes that are in the apexchart.js documentation well epxlained.
If I remember right you had taught me how and where to look for these annotations and how to use now with a sensor or so.
I can remember that cause that was the point when I started to document every single keyword or function I had used cause it was an eye opener that I could at least try how it could work based on that documentation.
I made a dozens of annotations to find out usecases and used just 1 or 2, but spend 2 or 3 days and loved how those worked together.
So now I will check your solution (which I bet i will work, but then check the apex charts.js website, if I can find it somewhere there. I had searched for that there over weeks from time to time and could not find it therefore I wanna know where I can find that in the documentation.
First of all thank you so much for all the Work you are doing . I am very new to HA and visualization and have no JS or Web Programming skills. So this makes it not so easy to get this done what i want to get out .
I am trying to create and chart which shows the Power Distribution of my house . I am already happy with it, but some things do not work. ( this is already some copy to have something to start with … - so not my “work” )
I have 4 enties where 1 is the sum of the 3 others .
I want to show the Summary of the day in the header
I want to show the Summary per Day in the Chart .
I do not want to stack the Summary onto the column .
Problem’s:
Tooltip / Mouse over does not show all Enties because of column + line usage
The Line entity “somehow” plots data into the Future (+1 day ) and shows data from today.
There is no need to have the line chart if i somehow get the summary calculated as Datalabel on top + shown in the tooltip history .
I tried with offsets on the line series, but this ofc does not work. For me it looks that the line is simply going into the “future” with the today’s current value …
If i mouse over on the line chart i see Data from 21.12 (+1 day)
I am sure there is a lot of not needed code in there ( from my trial and error ) . I have seen some posts where some JS Code was added for the tooltip , i tried to copy this - but it never worked out for me ( because i have no idea how the series data is handled in the sort of “array’s” / states in there . ( … you get it - i have no idea ) .
Any help would be great on this.
Greetings from Vienna,
Best regards, Dietmar
ps. for me an Option would be great for a column : show datalabel true, hide in stack true ( not hide in chart ) . This would solve the tooltip as all entities are column and it would show the summary per day .
There is some more behavior which i do not understand.
If i filter the series in the legend , the mouse over just shows/focus the series on the place they are in the chart . If i click on the Legend to filter out a series of the stacked column i get different results depending which series i use .
For me it looks like:
If the 1st series is filter’d no value is displayed at all.
The behavior is indeed a bit odd, can you try to see what happens if you put the Batterieverbrauch first entity in the yaml?
EDIT: and I remember some issue with stacked…check the github issue list of apexcharts/romrider
Yes i can confirm, changing in yaml does exaclty that. The first entity in the yaml is a must to show (filted) values at all , and the first entity is the only one which could end up in a single (filted) chart.
I think it will be too complicated to just keep the stacked correct if running filter - i would suggest to just overlay all colums and filter them out as wanted would be much easier and more predictable …
so it feels that more or less every item is adressable if you know the proper name
I had not thought that label would be that description of the figures of a scale
But what about the header here like the first one 2,8 kWh
I know that it is turned on as header and that I can decide what sensors can appear with that show in header: true or so feature
But how can i change the fontsize and color of the name of the title ?
It is far too tiny for my elderly and also grey ish instead of black
I know it blongs to the sensor, so I had thougt I put it here
I never could get this to work properly, I believe it is because the header values are not really apexcharts but HA. I can add a title and have that nicely enlarged but as soon as I try to apply the suggested values-sizing, the title moves below the values, again…I think because title is still apex and headers not.
EDIT: there are other exampes of card_mod with ha-card but for some reason they donot work with me (with others they do)…if you find something, please share
And I myself was thinking to provide layout-tweaking page to the romrider github to summarize all thse things that are not easy to find.
Hi all,
truly amazing card! I just started to dabble with it but hit a wall I can’t seem to get through quite early. Perhaps I’m just missing something really simple.
I have a restful sensor with a list of data that starts on a specific date. The list will update irregularly. I want to show all values starting on the specific date up until today, but can’t find a solution which does exactly this. I found workarounds, but those involve that I update the YAML now and then which is not ideal.
