This tool is brilliant! Thanks to RomRider for the effort.
I’ve tried to get the simple bar charts to stack, reducing amount of bars and grouping till nothing was left. After an hour or so, I decided to to a vanilla test by changing the default example to a stacked bar chart… lo and behold, same result, no stacking… will post on github as well:
type: custom:apexcharts-card
apex_config:
stacked: true
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.power_consumption
type: column
data_generator: |
// REMOVE ME
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();
- entity: sensor.power_generation
type: column
data_generator: |
// REMOVE ME
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();
Hello everyone,
I am trying to fine tune my apexchart and I would like to achieve two more things:
remove the empty area at the top of the chart (where the title usually is) so I can attach it directly to the button above
add data labels for each state change. Kind of like extremas, but for each plateau. It’s a climate entity so changes are rare and only certain states reached. Setting datalabels: enabled: truedoes not seem to do anything.
Bonus question for another graph:
Is it possible to remove the legend at the bottom for an entity?
To be able to use color_threshold I simply created to entitiesentries, one as line and one as area. But of course now I have each entity listed twice in the legend and only need the one.
Example
type: custom:config-template-card
entities:
- input_select.days_back_to_show
variables:
span: states['input_select.days_back_to_show'].state+'d'
days: |
-states['input_select.days_back_to_show'].state+'d'+'1d'
card:
type: vertical-stack
cards:
- type: custom:auto-entities
filter:
include:
- entity_id: sensor.eq_3_temperature*
options:
entity: this.entity_id
stroke_width: 0
group_by:
func: last
fill_raw: zero
type: area
opacity: 0.05
curve: stepline
color_threshold:
- value: 4.5
color: blue
- value: 20
color: red
- entity_id: sensor.eq_3_temperature*
options:
entity: this.entity_id
stroke_width: 2
group_by:
func: last
fill_raw: zero
opacity: 1
curve: stepline
card:
type: custom:apexcharts-card
graph_span: ${span}
span:
start: day
offset: ${days}
experimental:
color_threshold: true
update_interval: 10 s
now:
show: true
color: lightblue
label: Now
yaxis:
- min: 0
apex_config:
grid:
show: false
Hi all,
first of all @RomRider: extremely useful und advanced card, excellent job. Many thanks, it just pushes Home-Assistant to the next level. (and sorry for the typo… )
I’am playing around with it now for a few day, but cannot get one thing done.
Here ist what I have, a nice comparison of the past, present and future temperature:
I succeeded in highlighting a fixed area on the y-axis with an annotation (purple area):
but I fail in highlighting a dynamic area on the x-axis like “from sun.sunrise to sun.sunset”.
Is it possible to access the value of a sensor like sun.sun and paste it to these attributes?
apex_config:
annotations:
xaxis:
- x: '2021-11-23 13:00:00' #here should go a sensor value
x2: '2021-11-23 15:00:00' #here should go a sensor value
fillColor: '#FEB019'
Any help is greatly appreciated. Thanks in advance.
Max
I was wondering, is it possible to reduce the large space between top of the chart and the start of the header? Especially for small charts it wastes a lot of space. So when I want to show 20 charts on one dashboard, it would become too crowded.
As you can see, the gap between the maximum y-value (100) and the start of the header (eQ-3 Valve Kitchen) is around 20-30 % of the total chart card.
Is it a bug that apexcharts is not showing lines when all values are 0?
If I set the span to 1 hour and the sensor had a value of 0 for that entire hour, I see no line at all. If I set it to 2 hours and the sensor had values !=0 then I see a line including 0 values. So 0 can be displayed but the line is omitted if all values are 0.
This IMHO is a bug.
If it works in HA, you can set toFixed(x) with x=amount of decimals to show.
But not sure if this is supported. If not, it would probably be Jinja, so something like
{{ value | round | int }}
I have a question relating to the X axis formatting for times. Presumably it is related to the apexcharts library, but maybe nevertheless someone here knows a solution.
It seems for a time axis, the axis ticks are not always aligned with midnight. It also seems if a label gets wide, the tick spacing is not regular. Here is an example:
Because the label “27 Nov” is too wide, there is a three-hour interval afterwards, and for the next day midnight is skipped and the ticks are at 23:00 and then 01:00.
I looked through the apexcharts options and found the hideOverlappingLabels options, but if I set these to false I get far too many labels. And for datetime axes, the tickAmounts option seem to be disabled.
I thus wonder if there is any other “trick” that leads to a regular spacing of the ticks? If not, I can for sure live with the way it is now.
I understood a few releases ago, the donut chart behavior changed to show the value instead of the percentage. However, I really liked the percentage , but I can’t get it back. When this behavior changed, the release notes said the old behavior could be enabled with datalabels: percent, however this doesn’t work for me. Does anyone know how to show the percentages in the different donut parts?
But is the problem now the value or the state? Sorry, I may be completely off base here, but would you not need to format the state? Not sure if the state value is automatically formatted identical to in-graph values.
)
, but I can’t get it back. When this behavior changed, the release notes said the old behavior could be enabled with 
