Avoid axis label bottom cut-off

New To Observable
1

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”):

plot5
plot5649×476 11.2 KB

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,
    });
2

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;
3

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:

problem
problem788×470 10.8 KB

4

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
5

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
6

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