Bar Chart X-Axis Label Display Issues

[PfisterFactor]

Describe the bug
Svelte REPL
The x-labels are not centered with the ticks on the bar chart, and the text gets cut off vertically (see the 'y' in "bye").

I copied the default code from the website here, kept all the style parameters the same (except I removed the y-axis units) and made a component in my project.

I was able to fix the text centering by changing the x-axis text component to:
<text y={marginBottom} dx={reactiveXScale.bandwidth() / 2} style="text-anchor: middle;">{xVal}</text>,
but I am having trouble fixing the text height cut off bug.

To Reproduce
Steps to reproduce the behavior:

1. See Svelte REPL

Expected behavior
The x-labels are centered and the text does not get cut off.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS Monterey, M1
• Browser: Firefox
• Version: 99