I tried with font-size and didn’t get it to work but font-family works just fine. Can you see why font-size isn’t working?
type: 'custom:apexcharts-card'
header:
title: Elpriset idag & imorgon
show: true
graph_span: 2d
span:
start: day
now:
show: true
color: orange
apex_config:
label: Now
grid:
show: true
borderColor: '#404040'
strokeDashArray: 3
position: back
yaxis:
min: 0
forceNiceScale: true
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
xaxis:
axisBorder:
show: false
labels:
style:
fontSize: 10px
fontFamily: Segoe UI Light
chart:
height: 225
legend:
show: false
dataLabels:
enabled: false
stroke:
width: 1
fill:
type: gradient
gradient:
shadeIntensity: 0.8
inverseColors: true
opacityFrom: 0.7
opacityTo: 0.2
stops:
- 20
series:
- entity: sensor.nordpool_kwh_se3_sek_3_095_025
name: Idag
type: area
color: 3ca358
extend_to_end: false
show:
legend_value: true
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
- entity: sensor.nordpool_kwh_se3_sek_3_095_025
name: Imorgon
type: area
color: a3a3a3
show:
legend_value: false
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px;
font-size: 20px;
font-family: Segoe UI Light;
}
Tdw
February 17, 2021, 1:05pm
541
div#header__title {
font-size: 30px;
}
add that under style
1 Like
Thank you! Finally got it as clean as I wanted!
Btw, very nice looking card you got there!
Edit:
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 8px 8px 18px 8px;
font-size: 15px;
text-align: center;
font-weight: 250;
font-family: Segoe Ui Light;
}
div#header__title {
font-size: 15px;
font-weight: 250;
font-family: Segoe Ui Light;
}
Tdw
February 17, 2021, 9:26pm
543
It works under the header. It starts at 500 so maybe there isn’t much of a noticeable difference going down to 250 based on your font. I put 900 in on one of mine just to try and it definitely changes a header title to bold.
Strange that I cna’t get it to work. Do you do it like this?
div#header__title {
font-size: 15px;
font-weight: 900;
}
poudenes
February 18, 2021, 7:52am
545
Hi All,
I love this add-on so much !!! Really nice and lots of options.
Is it possible to move this part to upper right corner?
apex_config:
chart:
height: 300px
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
poudenes
February 18, 2021, 8:14am
546
And is there a way to get candlesticks graph?
gerard33
February 18, 2021, 10:19am
547
You can use offsetX and offsetY, for example
toolbar:
show: true
offsetX: 0
offsetY: -25
1 Like
poudenes
February 18, 2021, 10:38am
548
I become every minute more and more happier
Not yet, but I was thinking about adding it, I just need to find time to work on it
1 Like
Tdw
February 18, 2021, 12:41pm
550
It does. Make sure cache is cleared is all I can think of. Using just this changes a title on my side. First picture is at 200 second at 900
style: |
div#header__title {
font-size: 15px;
font-weight: 900;
font-family: Segoe Ui Light;
}
Ah, so yes, I can get that to work but I was trying to get the header states to change (temperature at the very top). I’ll do some digging in the code to find that div, just assumed it was the same since the font_size changed.
Tdw
February 18, 2021, 1:07pm
552
if you inspect the page (control - shift - i), it looks like this is what you need to add under style
#state__value > #state {
1 Like
I tried the #state__value before and now also your code but not getting anything to work, even downloaded a new browser to make sure the cache was empty
Never mind, sorry for taking your time and hijacking this thread.
Two questions that I haven’t been able to find answers to.
Is it possible to not show any decimaals in the header?
Can there be a line along the x-axis as I have drawn (the white line) and still have it very minimal at the bottom where the date/time is shown as in my example below?
Can a line/area/column be hidden if the value is zero, so that the line doesn’t end up as the orange line below?
poudenes
February 19, 2021, 1:29pm
555
Will it be possible to use attribute of a entity as sensor without creating a sensor that extract from a rest sensor:
sensor.bitladon_ada
state: 0.74905
attributes
ticker: ADA
name: Cardano
buyfinal: 0.78274
change24h: -0.91
friendly_name: Bitladon ADA
templates: icon_color: 'if (state === ''on'') return ''rgba(251,214,67,1)''; return ''rgba(71,116,157,1)'';' icon_color: rgba(71,116,157,1)
Now I use sensor.bitladon_ada to get the sell price
sensor.bitladon_ada.attributes. buyfinal
to show them both in graph.
If not possible, will it a idea to support this so you can add attributes directly in graph
It’s already available, read the documentation on github
1 Like
Yes, with float_precision: 0 in each serie
You can probably do something with annotations
You could use transform to remove data with a value of 0 (return x === 0 ? null : x;)
1 Like
I have a problem with a column chart, i have today 3 times the same values, but only the first bar is displayed en the other 2 not.
type: 'custom:apexcharts-card'
graph_span: 1d
span:
end: day
header:
show: true
title: Verbuik gas per uur m3
apex_config:
chart:
height: 250
stroke:
width: 4
series:
- entity: sensor.hourly_gas_consumption
float_precision: 3
type: column
group_by:
duration: 1h
how can i solve this?
With group_by, if there is no state change (in the history) during that period of time, it will report null as a value giving you that result.
