Plot Label and Tick Issues

I’ve got two issues so I’ll describe them separately.

Issue 1:

I’m working on a graph where I need to show fewer dates on the x-axis but not move around any data points. I also need to push the date label down a tiny bit. If I try and use ticks: 10, it changes nothing.

Here’s an example
Screenshot 2024-07-11 at 11.33.07 AM

Code for the x-axis

    x: {
      label: "Date",
      tickFormat: (d, i, ticks) => {
        const date = new Date(d);
        const day = date.getDate();
        const month = date.toLocaleDateString("en-US", { month: "short" });

        if (i === 0 || day < prevNum) {
          prevNum = day;
          return `${month} ${day}`;
        }
        prevNum = day;
        return `${day}`;
      },
    },

Issue 2:

I need to add padding to the inside of the Plot because my y-axis ticks are cut off (I set style: {fontSize: "14px" }).

The 1 in 1,000 is cut off on the left side of the plot so it looks like ,000 instead of 1,000.

Code for the y-axis:

   y: {
      grid: true,
      label: "Value",
      domain: yDomain,
    },

Plot Options Code:

const plotOptions = {
    x: {
      label: "Date",
      tickFormat: (d, i, ticks) => {
        const date = new Date(d);
        const day = date.getDate();
        const month = date.toLocaleDateString("en-US", { month: "short" });

        if (i === 0 || day < prevNum) {
          prevNum = day;
          return `${month} ${day}`;
        }
        prevNum = day;
        return `${day}`;
      },
    },
    y: {
      grid: true,
      label: "Value",
      domain: yDomain,
    },
    insetTop: 5,
    insetBottom: 5,
    height: 400,
    width: 1700,
    style: {
      fontSize: "14px",
    },
    marks: [
      Plot.lineY(plotData, {
        x: "date",
        y: "value",
        stroke: strokeColor(currentType),
        tip: true,
        marker: true,
        title: (d) => d.title,
      }),
    ],
}
1 Like

For Issue 1, I think you should use Javascript Date objects, rather than strings. That way, the x-scale will be treated numerically, rather than categorically.

For Issue 2, you might try the margin option.

Here’s an example that allows you to play with these things:

2 Likes