I think the line along the x-axis (beautifully highlighted by me in yellow :)) should be possible to modify just like the y-axis? Can’t get it to work, tried several ways with xaxis. Can you pint me in the right direction?
I cannot get that to work, setting the fontfamily or size only works in the legend for me. I would like to be able to change the font in the header and preferably in the entire chart.
Well, share your config and we’ll see why it doesn’t work 
It’s the small things that are the most frustrating…
type: 'custom:apexcharts-card'
header:
title: Elpriset idag & imorgon
show: true
fontSize: 30px
apex_config:
chart:
height: 225
fontSize: 20px
Where did you see that fontSize was a valid option for header of chart?
for the xaxis you have this option for example:
apex_config:
xaxis:
labels:
style:
fontSize: 20px
For the chart I found it in this thread and also read somewhere that it applies to most parts of the chart, guess I was wrong. So header font cannot be changed? Thanks.
That is true for the fontFamilly, not for the font size.
And no not for the header, but you can use card-mod for that.
Header font can be changed if you have card mod installed. Here’s a sample, the header font is controlled under style
- type: custom:apexcharts-card
chart_type: radialBar
header:
show: true
floating: false
show_states: true
colorize_states: true
apex_config:
title:
floating: false
align: center
style:
fontSize: 20px
fontWeight: bold
chart:
fontFamily: "Julius Sans One"
foreColor: rgb(148,148,148)
offsetY: 5
legend:
show: false
position: top
series:
- entity: sensor.glances_cpu_used
name: CPU Load
- entity: sensor.glances_etc_hostname_used_percent_2
name: SSD
- entity: sensor.glances_ram_used_percent
name: Memory
- entity: sensor.glances_swap_used_percent
name: Swap
style: |
ha-card {
border: 0px solid green;
background-color: var(--dwains-theme-primary);
box-shadow: none;
font-size: 15px;
color: rgb(148,148,148);
height: 300px;
}
7 Likes
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;
}
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:
Do you see a reason why font-weight wouldn’t work there? I tried to use a font that isn’t available on my phone and that didn’t work (without work-arounds), but font-weight should work, right?
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;
}
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;
}
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?
Now my graph is mixed with the buttons. Its a cosmetic thing …:
apex_config:
chart:
height: 300px
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
And is there a way to get candlesticks graph?
You can use offsetX and offsetY, for example
toolbar:
show: true
offsetX: 0
offsetY: -25
1 Like
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
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;
}
