The wall charger for my car is running ‘twcmanager’ and it publishes to homeassistant, however periodically the entity becomes available until the next time a charging session starts.
Is there a way that apexcharts can only draw that entity if it is available, so that the chart doesn’t break?
Hello everyone
does anybody know if there is a way to define a y-axis range around the chart values, i.e. make
max = highest value + 5%
min = lowest value - 5%
?
Idea is that if I set a fixed min and max, then the range will be either too big or too small. If I don’t set min and max, then temperatures that are pretty stable look unstable, because Apex zooms in to ±1°C.
maybe reference the document, around the min / max under yaxis options.
I could not find anything on my question. Only fixed values.
I would like to make it relative and not absolute, i.e. x %.
If I set a fixed value on a date adjustable power consumption, it will either be too big (e.g. in time periods with low power consumption) or too small (e.g. in time periods with hogh power consumption).
Hi, firstly amazing work. When downloading the CSV data, is there anyway of showing the time stamps also? all I seem to see if the data.
I have this very wife friendly graph showing energy prices for today. As the “now” line can’t be configured, is there a way to alter the color of the current hour somehow? The line is too tiny to be seen from far away.
type: custom:apexcharts-card
graph_span: 24h
header:
title: Strømpriser i dag
show: true
span:
start: day
layout: minimal
apex_config:
chart:
height: 183px
now:
show: true
color: yellow
series:
- entity: sensor.nordpool_kwh_krsand_nok_2_095_0
type: column
color: rgba(100, 100, 100, 0.1)
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
style: |
ha-card {
margin-top: -8px;
background: rgba(0,0,0,0)
}
Does anyone know how to transform the data so that 35 345 lx is rounded off to 35 300 lx? Been trying using transform but not getting anywhere.
Is it possible to use templating to show the entity friendly name as the title?
Does this work
transform: "return ((Math.round(x/1000))*1000) ;"
Yes it did, thank you!
But I just realized that the group_by functionen messes it up anyway so I have to figure out how to get a smooth curve but also rounded values in the header.
group_by:
func: avg
duration: 10min
I am trying to integrate a few graphs into a dashboard and would like to make the entire background transparent. Is this possible for apex charts? I did nto find any option in the github docs.
Hi guys
I use garmin connection and related integration to record my daily steps data to hass.
Both garmin connection and integration has big update delay, which makes the correct daily data updated to the next day
In apexcharts-card, it looks like this
Has anyone found a way to control the width of the radialbar’s bar? Compare the two charts below and the left radialbar has thicker bars because only using one series:
Is there a way to set stacked: true for specific entities only?
As you can see from the image, I’ve got whole of house ‘consumption’ but also showing key appliances individually. I’d like to just stack those appliances only without stacking the total consumption.
Yes, you can do it with hollow: size: like this:
type: horizontal-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.cpu_temperature
color: rgb(255, 87, 34)
max: 90
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 200
grid:
padding:
left: 10
right: 10
bottom: 0
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.cpu_temperature
color: rgb(255, 87, 34)
max: 90
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 200
grid:
padding:
left: 0
right: 0
bottom: 20
Ah, of course! Tanks for sharing!
Has anyone found a way to force 1 or 2 decimals in ApexCharts? On the axis I believe it is possible but not in header or labels in the chart. Would look a lot better if it was consistent.
I tried having two axis but a) I couldn’t seem to make only one axis stacked and b) I couldn’t get the two axis to have the same range.
Any ways around this?
Hey! I use this code down here to track the daily usage of my smart plug. I guess I got it right?
I have 2 questions, is there some way to change where the info “energy use today” in the header is? Can I have that info below everything?
And I would like a chart below this showing the average energy use and min/max per week and month. How would that code look like?
Thank you!
type: vertical-stack
cards:
- type: custom:apexcharts-card
apex_config:
chart:
stacked: true
graph_span: 14d
span:
end: day
show:
last_updated: true
header:
show: true
show_states: true
colorize_states: true
title: Energy-use today =
yaxis:
- min: 0
decimals: 3
apex_config:
tickAmount: 5
series:
- entity: sensor.smartplug_energi_dator_dag
name: Energy-use per day
type: column
color: fc7703
float_precision: 3
group_by:
func: last
duration: 1d
show:
datalabels: true
I would like to share some data_generator that I wrote because I think it might be of interest for some of you: I wanted to have local extrema instead of just a single one. Since I use long-term statistics, with the hourly values, I decided that a local extremum was a value that was as extreme as its two neighboring hours and more extreme than the hours h±2.
The trick here is that I want to have access to the whole list of values so tranform is not going to cut it. I thus (ab)used data_generator:
- entity: sensor.temperature_exterieure
name: Mini/maxi
stroke_width: 0
show:
datalabels: true
legend_value: false
data_generator: |
const statistics = await hass.callWS({
type: 'history/statistics_during_period',
start_time: new Date(start).toISOString(),
end_time: new Date(end).toISOString(),
statistic_ids: [entity.entity_id],
period: "hour",
});
const stats = statistics[entity.entity_id];
var result = [];
var window = [];
stats.forEach( (item) => {
window.push([item, parseFloat(item.mean)]);
if (window.length < 5)
return;
if (window.length > 5)
window = window.slice(1)
var [mid, val] = window[2]
if ((val >= window[1][1] &&
val >= window[3][1] &&
val > window[0][1] &&
val > window[4][1]) ||
(val <= window[1][1] &&
val <= window[3][1] &&
val < window[0][1] &&
val < window[4][1])) {
result.push([
((new Date(mid.start).getTime()) + (new Date(mid.end).getTime()))/2,
val
])
}
});
return result;
The result looks like this:
The only downside is that since there are only as many values as extrema, apexcharts detects that the different series do not have synchronized dates and thus only shows a single series in the popup. I didn’t try, but a way to mitigate that may be to produce null values instead of outright skipping the datapoint.
