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:
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,
});
Hi, are you defining the dimensions of your chart? If you are I would increase the height to prevent the label being cut off.
// 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;
Tried it with dimensions, but it did not help:
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:
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.
svg.append("text")
.text("Year")
.attr("x", width / 2)
.attr("y", height + 40)
Is that any help?
Thanks
1 Like
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.
1 Like
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