Thanks…
I see that it was there all the time… stupid me… haha had 1D … so take long time to get the info…
Now to 6h
Just installed this beta and happy to report that everything works fine again!
Can you change color and thickness of the horizontal lines for the X line numbers?
Care to share your code for this setup?
Hi
Not sure which setup you are referring to, do you mean this one? It is created in Mini Graph Card and not the ApexChart card 
I think you mean the y-axis lines?
If so, thickness no, but a bunch of other stuff yes: https://apexcharts.com/docs/options/grid/
1 Like
thanks you
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.