In an earlier version of this card, I was able to set the position of the tooltip, but that is not working anymore. Anyone know how to set it to a fixed position?
type: 'custom:apexcharts-card'
series:
- entity: sensor.nordpool_kwh_krsand_nok_5_095_025
name: Pris
type: area
curve: stepline
extend_to_end: false
float_precision: 4
- entity: sensor.nordpool_kwh_krsand_nok_5_095_025
name: Pris
type: area
curve: stepline
extend_to_end: false
float_precision: 4
data_generator: |
return entity.attributes.raw_today.map((p) => {
return [new Date(p.start), p.value];
});
- entity: sensor.nordpool_kwh_krsand_nok_5_095_025
name: Pris
type: area
curve: stepline
extend_to_end: false
float_precision: 4
data_generator: |
return entity.attributes.raw_tomorrow.map((p) => {
return [new Date(p.start), p.value];
});
y_axis_precision: 4
now:
show: true
label: Nå
graph_span: 3d
span:
start: day
offset: '-1d'
apex_config:
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
type: area
height: 300
locales:
- name: nb
options:
months:
- Januar
- Februar
- Mars
- April
- Mai
- Juni
- Juli
- August
- September
- Oktober
- November
- Desember
shortMonths:
- Jan
- Feb
- Mar
- Apr
- Mai
- Jun
- Jul
- Aug
- Sep
- Okt
- Nov
- Des
days:
- Søndag
- Mandag
- Tirsdag
- Onsdag
- Torsdag
- Fredag
- Lørdag
shortDays:
- Sø
- Ma
- Ti
- 'On'
- To
- Fr
- Lø
toolbar:
exportToSVG: Last ned SVG
exportToPNG: Last ned PNG
exportToCSV: Last ned CSV
menu: Menu
selection: Velg
selectionZoom: 'Zoom: Velg'
zoomIn: Zoome inn
zoomOut: Zoome ut
pan: Skyving
reset: Start på nytt
defaultLocale: nb
stroke:
show: true
width: 2
legend:
show: false
dataLabels:
enabled: false
yaxis:
min: 0
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
tooltip:
fixed:
position: bottomLeft
fill:
type: gradient
gradient:
shadeIntensity: 1
inverseColors: false
opacityFrom: 0.45
opacityTo: 0.05
stops:
- 20
- 100
- 100
- 100
I’ve started with the whole HomeAssistant-thing maybe 2 or 3 weeks ago. I’ve found this card and love the possibilities of customization. Thank you for your work !
Now I have a (maybe stupid) question:
Is there a way to put 3 different entities (with different units) into one single chart/graph ?
I thought I could put my Netatmo Weatherstation with humidity, C02 and actual temperature into one chart. Because of the different scale these three units have, the graph looks nearly flat for temperature and humidity. C02 defines the y-axis.
You have to add enabled: true to the fixed section of the tooltip config.
Note: also locales support (including nb) has been added to the latest beta, no need to define those locales anymore.
Yes, there are several examples of multi-y axis on the forum here, but it’s not very intuitive.
What you’ll want to do is:
apex_config:
yaxis:
# axis 1 (maps to the first entity in the series)
- min: xx
max: yy
show: true/false
decimalsInFloat: 1
title: #optional
text: title of the axis
opposite: true/false
# axis 2 (maps to the second entity in the series)
- min: xx
max: yy
show: true/false
decimalsInFloat: 1
title: #optional
text: title of the axis
opposite: true/false
# axis 3 (maps to the third entity in the series)
- min: xx
max: yy
show: true/false
decimalsInFloat: 1
title: #optional
text: title of the axis
opposite: true/false
Is it possible to fix this only to the top and let the tooltip only jump horizontal?
When using the chart in a browser_mod popup, the bottom of the tooltip sometimes isn’t visible.
That’s an awesome piece of work. I have couple of flex-horseshoe-card on my dashboard which was not updated in the last 3 months and I’d like to change them to apexcharts-card.
The problem is that my existing cards are showing the current power consumption in Watts (not %) and they have gradient colors (green-yellow-red).
Is it possible to achieve the same visual result with apexchart-card? I’ve tried several times but I’ve failed every time. Thank you.
I am trying to define some apexcharts_card_templates in ui-lovelace.yaml. However, this does not seem to be working and keeps giving me an error when I use a template. What am I doing wrong?
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
res.push([new Date(key).getTime(), value]);
}
return res.sort((a, b) => { return a[0] - b[0] })
Thankyou very much - that worked first time. I have now included two entities, one to show the current price sensor history, the other to show the upcoming rates as can be seen in the screen shots.
One question about the card header. The “Next Rate” value shows 10.4 which is the value of the last known value in the future ie. 16 Feb 2021 at 22:30. Ideally I’d like it to show 29.6 which is the value 15 Feb 2021 at 17:00. Not sure if this is a bug or I need to work around it.
The header always shows the last data from the chart and if I understand correctly, you’d want to display the first one for the data in the future. I guess I could offer that option .
Please open a feature request and I’ll look into it.
Points per hour is the equivalent of group_by with a duration and a func (if you want the same as mini-graph-card, it’s avg) .
Column width is determined by the number of data you want to display. Use group_by and it will increase the colum width.
@RomRider I am still LOVING this card!
Is there a way to combine multiple entities into one legend, but still have it display all entities separately on the graph?
i.e.: I have 5 thermometers. I’d like to have them all grouped into one legend marker for ease of hiding all at once in one click, but still see all 5 lines on the graph.
Been looking thru the git and apex docs but can’t for the life of me find a way to do it within the card.
Attempting to use the template feature, but I just can’t make it work. Likely missing something obvious…? (No issues with my button card templates which follow the same syntax.)
I also tried pasting the example config defining just colors, but got the same error.
Example with simplified card just to see if it take effect. No matter what I do I get the same error.
.
Show extremas on your chart with (doesn’t work yet with multi-y axis):
Language support with automatic detection
Deprecate