my file is too long to post here … 3500 lines of raw config
I’d suggest you just experiment with a small config first to understand how it merges stuff together and then you can go full throttle
thats too much like common sense
much more fun to try on live config
haha, well good luck
BTW, there was a error in the doc that I just corrected: https://github.com/RomRider/apexcharts-card/commit/ea1fef45736b11fa79a78ca1ac59e7c80c42b39a
duh got me on that one
even better when I spotted it had a S at the end
appears to be working now - thanks
Are there any plans to make it possible to plot two lines but with different y-axis? As an example, I have this one showing outdoor temperature together with if my heating pump is using the immersion heater (in kW). I have a bunch of graphs similar to this.
That is already possible with
apex_config:
yaxis:
- # config axis1
- # config axis2
Also check the forum above, you’ll find some examples.
I have totally missed that, thanks a lot!
for the life of me, I cannot get the whole card to show, nor can I get it in the correct position and lose the background.
I’ve got this in a picture elements card:
cards:
- type: picture-elements
image: /local/ui/floorplan/background.png
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
- type: 'custom:apexcharts-card'
apex_config:
stroke:
width: 6
curve: smooth
graph_span: 7d
span:
start: day
header:
show: true
title: Likelyhood of Rain
series:
- entity: weather.dark_sky_home
type: line
fill_raw: last
extend_to_end: false
color: '54C0EF'
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation];
});
style: |
:host {
left: 50%;
top: 55%;
width: 95%;
overflow: hidden;
height: 55%;
background: none !important;
box-shadow: none !important;
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
border-radius: 1vw;
font-size: 1.2vw !important;
}
- type: 'custom:weather-card'
current: true
details: true
entity: weather.dark_sky_home
forecast: true
name: Weather
style: |
:host {
left: 50%;
top: 30%;
width: 95%;
overflow: hidden;
height: 63%;
background: none !important;
box-shadow: none !important;
}
.current {
margin-bottom: 7vw;
}
.variations {
margin-bottom: 4vw;
}
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
border-radius: 1vw;
font-size: 1.2vw !important;
}
.forecast{
padding: 0 2.5%;
width: 95%;
}
.forecast .day:first-child{
border-left: 0.1em solid #d9d9d9;
}
.forecast .day:last-child{
border-right: 0.1em solid #d9d9d9;
}
tap_action:
action: none
What about trying this:
apex_config:
chart:
height: 200px #or another value which works for you
For the background, you are missing a }
at the end of the :host
style block and it might even fix the position! And you might not even need the above block either.
Great. Thank you. The only issue left to resolve is the missing data and defining the scale on the left.
I guess the missing data is null
in the state?
if yes, this will fill them with 0:
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation || 0];
});
Scale:
apex_config:
yaxis:
- min: 0
max: 20 # or anything else that works for you
decimalsInFloat: 1
Perfect thank you
Sorry one more question, how do i remove the grid lines from the y axis? Just been looking over the documentation, but i can’t see it.
apex_config:
grid:
show: false
FYI
Don’t have my finger on it yet, but v1.6.0 does seem to be noticeably sluggish vs. v1.5.0.
Unless you activate the experimental features, nothing changed in the options/data passed to the chart. So it’s probably just an impression
Maybe a false alarm by me, I dups some charts on a new page and way trying with some of the ‘config_templates’ things. But of course now I can’t duplicate it, Will explore some more. It was kind of acting like the charts were constantly refreshing, not obeying ‘update_interval’.
for column chart the opacity doesn’t work neither way.
For line/area type, old way (set in apex config) doesn’t work in v1.6 (not sure it’s intentional). New way works.
I am not sure if this has been addressed through one of the features in the card.
I have got a sensor with the following attribute:
data: [0.082,0.077,0.072,0.085,0.076,0.074,0.082,0.074,0.073,0.081,0.075,0.072,0.057,0.011,0.201,0.004,0,0.153,0.012,0,0,0,0,0,0,0.07,0.2,0.23,0,0.001,0,0,0,0,0.044,0.001,0.962,0.549,0.194,0.167,0.146,0.115,0.117,0.13,0.163,0.122,0.09,0.073]
I would like to plot these values in a graph with the x-axis showing the time in 30 min intervals, which means that there are always 48 in the data attribute.
Hoping someone can guide me.