# Avoid axis label bottom cut-off
**URL:** https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285
**Category:** Help
**Created:** [February 27, 2025, 11:57am UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285 "2025-02-27T11:57:27Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@mekterovic](https://talk.observablehq.com/u/mekterovic)
#### Post date: [February 27, 2025, 11:57am UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/1 "2025-02-27T11:57:27Z")
I have changed the axis font size (bcs I think that default is way too small) but now my x axis label get cut off at the bottom (note the g in “percentage”):
This is my code:
```auto
const plot = Plot.plot({
title: props.title,
y: {
grid: true,
label: props.yLabel,
},
x: {
label: props.xLabel,
},
marks: [
Plot.axisX({ fontSize: 16 }),
Plot.axisY({ fontSize: 16 }),
Plot.ruleY([0]),
Plot.barY(data, {
x: 'x',
y: 'y',
fill: 'rgb(160, 72, 253)', // Interior color
}),
],
marginBottom: 40,
});
```
---
### Author:  [@angeltapes](https://talk.observablehq.com/u/angeltapes)
#### Post date: [March 5, 2025, 12:35pm UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/2 "2025-03-05T12:35:23Z")
Hi, are you defining the dimensions of your chart? If you are I would increase the height to prevent the label being cut off.
```auto
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
```
---
### Author:  [@mekterovic](https://talk.observablehq.com/u/mekterovic)
#### Post date: [March 5, 2025, 2:13pm UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/3 "2025-03-05T14:13:20Z")
Tried it with dimensions, but it did not help:
```auto
const margin = { top: 100, right: 30, bottom: 30, left: 100 };
const width = 800 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
...
const plot = Plot.plot({
title: props.title,
width,
height,
marginBottom: margin.bottom,
marginLeft: margin.left,
marginRight: margin.right,
marginTop: margin.top,
y: {
grid: true,
label: props.yLabel,
},
x: {
label: props.xLabel,
},
marks: [
Plot.axisX({ fontSize: 16 }),
Plot.axisY({ fontSize: 16 }),
Plot.ruleY([0]),
Plot.barY(data, {
x: 'x',
y: 'y',
fill: 'rgb(160, 72, 253)', // Interior color
// stroke: 'white', // Outline color
// strokeWidth: 1.5, // Outline th
title: (d) => `${props.xLabel}: ${d.x}\n${props.yLabel}: ${d.y}`,
tip: true,
}),
],
});
```
the margins really do appear, but they affect the (inner) chart area, not the label:
---
### Author:  [@angeltapes](https://talk.observablehq.com/u/angeltapes)
#### Post date: [March 6, 2025, 11:51am UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/4 "2025-03-06T11:51:58Z")
Hi I’m a newbie too but I’m interested in the solution. I added text to a graph and moved it below the X-axis using height + 40.
```auto
svg.append("text")
.text("Year")
.attr("x", width / 2)
.attr("y", height + 40)
```
Is that any help?
Thanks
---
### Author:  [@mekterovic](https://talk.observablehq.com/u/mekterovic)
#### Post date: [March 6, 2025, 12:46pm UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/5 "2025-03-06T12:46:45Z")
Well, that is what they call a workaround :-).
I was hoping it would not come to that (to manually render label axis) since this is really a main stream topic, axis labels are not something exotic.
I’m still hoping someone will step in, but it is good to have a backup/workaround option, thanks.
---
### Author:  [@angeltapes](https://talk.observablehq.com/u/angeltapes)
#### Post date: [March 6, 2025, 2:46pm UTC](https://talk.observablehq.com/t/avoid-axis-label-bottom-cut-off/10285/6 "2025-03-06T14:46:27Z")
I agree, this should be straightforward. It looks like axis labels aren’t part of the D3.js documentation though. I’ll be interested if anyone else has an answer. [d3-axis | D3 by Observable](https://d3js.org/d3-axis)