Hi,
i am new to HA and try to do some ApexCharts.
Annotations with fixed text are no problem.
Either xaxis, yaxis or points or areas.
What i want, is to output the dynamic value of a sensor e.g.
text: EVAL:states(‘sensor.ez1_holzgarage_gesamtleistung’)
Is this possible or only static text ?
Best regards
Joe
Inside the ApexCharts, I think that only the series constructs have access to the Home Assistant state, so no you can’t do this in annotations.
Annotations are there for adding ‘fixed’ things. It is possible to compute the x or y line/area values using the EVAL: command, but this just runs the expression through JavaScript, with no access to HA entities.
That does not mean that you can’t do what you want. Since most annotations are used to draw a line, either vertically or horizontally, you can always add another series to the graph (a line) and use the sensor of your choice as the subject, and then generate the data points yourself.
- entity: input_number.help_temp_number
name: Reference
data_generator: return [[start, entity.state]]
Inside the data_generator you have access to the entity, so entity.state will be the state value, or entity.attribute.my_attribute will return an attribute value.
Also you have the start and end timestamps for the graph plot, so it is very easy to return just one point at the left of the graph with start, and a value from the referenced series entity entity.state.
Since by default the graph extends any line to the right hand end, this is all we need to do to draw a line across the graph, at the value given by the entity of our choice.
Another approach is to wrap the chart in another card, which adds support for JavaScript templates and entity states. I use custom:button-card for this, and for a simple annotated chart, it would look like this:
type: custom:button-card
styles:
card:
- padding: 0px
grid:
- display: block
custom_fields:
chart:
card:
type: custom:apexcharts-card
apex_config:
annotations:
xaxis:
# minus 5 hours
- x: EVAL:new Date().getTime()-1000*60*60*5
borderColor: "#775DD0"
label:
style:
color: black
text: |
[[[
/* button-card template syntax; can be used for every field, e.g. instead of EVAL:... */
const sunElevation = states['sun.sun'].attributes.elevation;
return 'Elevation: ' + sunElevation;
]]]
series:
- entity: sun.sun
data_generator: |
const now = new Date();
const data = [];
for(let i = 0; i <= 24; i++) {
data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
}
return data.reverse();
