# Changing axis label size while using Plot
**URL:** https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913
**Category:** Help
**Created:** [December 6, 2021, 3:26pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913 "2021-12-06T15:26:32Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Quackas](https://talk.observablehq.com/u/Quackas)
#### Post date: [December 6, 2021, 3:26pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/1 "2021-12-06T15:26:32Z")
Hello,
How would I go about changing the font size of the axis labels in a Plot like so:
```plaintext
area = Plot.areaY(datasort, {
x: "Date",
y: "Count",
fill: "Zone",
order: "sum",
reverse: true,
inset: 0,
title: "Zone"
}).plot({
width,
height: 900,
})
```
I know you can change the font size of Plot.text with fontSize:30 but this only works for marks and not the x and y axis labels.
Is there a way to do this without changing the entire html with something like:
```plaintext
html ``
```
As that doesn’t work in my situation…
---
### Author:  [@Fil](https://talk.observablehq.com/u/Fil)
#### Post date: [December 6, 2021, 4:52pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/2 "2021-12-06T16:52:10Z")
Plot 0.3 introduces a className option on top of the style option; hopefully this is enough to change whatever is necessary?
---
### Author:  [@Quackas](https://talk.observablehq.com/u/Quackas)
#### Post date: [December 6, 2021, 5:28pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/3 "2021-12-06T17:28:17Z")
So I set a className in the Plot like so:
```plaintext
area = Plot.areaY(datasort, {
x: "Date",
y: "Count",
className: "disco",
fill: "Zone",
order: "sum",
reverse: true,
inset: 0,
title: "Zone"
}).plot({
width,
height: 900,
style: {
fontSize: 30,
},
})
```
and then I use
```plaintext
html ``
```
to change only the specific SVG element with that className?
---
### Author:  [@Quackas](https://talk.observablehq.com/u/Quackas)
#### Post date: [December 10, 2021, 8:58am UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/4 "2021-12-10T08:58:27Z")
So I couldn’t figure out how to use the className properly to set the font-size…
But I did figure out that if I just directly alter the attribute value with:
```plaintext
area.setAttribute("font-size", 30);
```
It will change the x and y text sizes.
Unfortunately, these attribute settings don’t carry over when you import the cell into another notebook so this doesn’t work for my intended uses.
Does anyone know a way to import the set attributes with the cell? Or a way to set the attribute so that it is imported as set?
---
### Author:  [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [December 10, 2021, 1:04pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/5 "2021-12-10T13:04:54Z")
> [@Quackas](#):
>
> I did figure out that if I just directly alter the attribute value with:
>
> ```
> area.setAttribute(“font-size”, 30);
>
> ```
>
> It will change the x and y text sizes.
> Unfortunately, these attribute settings don’t carry over when you import the cell into another notebook
If you call `area.setAttribute` in a different cell, then you’ll need to name, import, and execute that into your other notebook as well for it to take effect. Alternatively, you could bundle it all into a single cell. Something like
```
{
let area = ...
area.setAttribute(“font-size”, 30);
return area
}
```
Of course, that will set the global `font-size` for the whole figure. You might also inspect the SVG and use CSS selectors to target the text more specifically. Something like so:
```
{
let p = Plot.plot({
marks: [Plot.line(d3.range(0, 20, 0.1).map((t) => [t, Math.sin(t)]))],
x: { label: "t" },
y: { label: "y" },
margin: 60
});
let sel = d3.select(p).selectAll("svg > g > text").style("font-size", "20px");
return p;
}
```
https://observablehq.com/embed/e258a9ac5afcb2ec?cells=plot
Of course, that will be quite fragile and would depend on the exact structure of your output. Proper class names would be ideal.
@Fil As far as I can tell, the `className` option only applies at the top level, not to marks, axes, and such.
---
### Author:  [@Fil](https://talk.observablehq.com/u/Fil)
#### Post date: [December 10, 2021, 1:25pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/6 "2021-12-10T13:25:25Z")
Yes. There is an older proposal to extend it to each of the marks and axes here: [className option for plot, facets, axes and marks by Fil · Pull Request #253 · observablehq/plot · GitHub](https://github.com/observablehq/plot/pull/253)
---
### Author:  [@nicola](https://talk.observablehq.com/u/nicola)
#### Post date: [February 15, 2023, 2:25am UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/7 "2023-02-15T02:25:10Z")
any new way to achieve this?
---
### Author:  [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [February 15, 2023, 3:00am UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/8 "2023-02-15T03:00:56Z")
> [@nicola](#):
>
> any new way to achieve this?
Yes, there is now a full fledged [axis mark](https://observablehq.com/@observablehq/plot-axes) that allows you to format the text in all kinds of ways.
---
### Author:  [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [February 15, 2023, 10:07pm UTC](https://talk.observablehq.com/t/changing-axis-label-size-while-using-plot/5913/9 "2023-02-15T22:07:25Z")
You can use the top-level **style** option to set the font size for the entire plot, including axis ticks and labels. For example:
```plaintext
Plot.plot({
y: {label: "↑ y"},
style: {fontSize: "16px"},
marks: [Plot.lineX(d3.range(0, 20, 0.1), {y: Math.sin})]
})
```
Or equivalently:
```plaintext
Plot.plot({
y: {label: "↑ y"},
style: "font-size: 16px;",
marks: [Plot.lineX(d3.range(0, 20, 0.1), {y: Math.sin})]
})
```
If you only want to affect the axes and not other marks, you can use the **fontSize** option on the axis marks, as @mcmcclur suggested.
```plaintext
Plot.plot({
marks: [
Plot.axisX({fontSize: 16}),
Plot.axisY({fontSize: 16, label: "↑ y"}),
Plot.lineX(d3.range(0, 20, 0.1), {y: Math.sin})
]
})
```