Bar Chart Margin / Padding

Hello,

(Disclaimer: Very Green d3/plot user)

How can I change the width of a bar chart column and/or the space between each bar?

Testing on this notebook: https://observablehq.com/d/0f51d4d236782c41

Could you make the notebook public so we can access it? You can go to the Publish menu item to either publish it listed or unlisted.

Thank you, I’m sure that would be helpful to actually see the chart :man_facepalming:

https://observablehq.com/@bz-jm/plot-testing (hopefully that link works this time)

You can use insetLeft and insetRight to decrease the width of the bars (described in the Plot documentation here). I’ve forked your notebook and sent you a suggestion with a little edit to that effect.

That was it!

Thanks much! I’m sure I’ll be back again soon.

You can also set the padding option of the x (band) scale when using Plot.barY (and likewise y of for Plot.barX). Use a value between 0 and 1 to control how much space is reserved for separating bars.

I recommend using insetLeft and insetRight if you want e.g. exactly one pixel separating bars, and otherwise use padding if you just want an approximate amount of separating space.

3 Likes

Mike,

That is fantastic. I updated the notebook to show both options for anyone who might stumble upon this thread in the future. https://observablehq.com/@bz-jm/plot-testing

D3 and Plot are brilliant libraries, thank you!

3 Likes