How to properly display axis labels in Observable Plot

Community Help
1

I am new to D3 and I’m currently using Observable Plot to visualize data on a Next.js Web App. The app pulls data that is hosted on a Heroku PostgresSQL database and will display it on the website.
Here is the code I am using to render a simple Bar chart, I am using the Plot examples provided by Observable for reference.

var element = document.getElementById('chart')
    element?.append(
      Plot.plot({
        y: {
          grid: true
        },
        marks: [
          Plot.barY(data, {x: 'letter', y: 'frequency'}),
          Plot.ruleY[0]
        ]
      })
    )

Somewhere in the body of my code I have:

<div id='chart'></div>

However the axis labels on my chart are being cutoff when the SVG renders:

Screen Shot 2021-11-10 at 12.23.02 AM
Screen Shot 2021-11-10 at 12.23.02 AM1298×851 105 KB

How can I correct the label positions so they are not cutoff or overlapped?

1 Like
2

For the labels on the y axis you might want to add a marginLeft: 80 or something similar. For the other labels, I think it’s a css issue within the page you’re building, and the browser’s inspector is probably the best tool to debug this situation?

1 Like
3

I suspect that the issue here is that Plot’s stylesheet is missing. It will be inlined in the next version of Plot which will address this pitfall.

1 Like