Jumpy barplot

I’ve got a bar plot (built with Plot) with a lot of bars that’s responsive to a slider to control the number of bars that are displayed. It works but the bars jump around when the slider is moved In particular, the position of the left edge of the left most bar is volatile. I’ve fiddled with options involving margin and padding and inset but haven’t found the magic incantation to prevent this. Here’s a simplified illustration:

Note that this is easy to accomplish with D3. The fundamental difference seems to be that I’ve got more direct control over not just the domain, but the range of the domain - i.e., the the numerical values that d3.scaleBand maps the ordinal domain to. Here’s the D3 implementation:

But, again, I wonder if I can accomplish this with Plot?

1 Like

Hi Mark! I am on a mobile device at the moment, which appears to be behaving similarly for both charts embedded. Are you experiencing the jumpy behavior on a particular browser? Or maybe I am just not noticing what I should?

1 Like

I’m on my extra wide MacBook Pro. The effect is much less noticeable when I resize the browser window to be very narrow, which is probably why you can’t see the difference on mobile.

Hi Mark, try to set round to false on the x scale. If you absolutely want no jump, also set paddingOuter to 0, and maybe add an inset (or insetLeft) so that the left bar doesn’t touch the y axis.

round: false, paddingOuter: 0, inset: 10


That seems to do it - thanks!

1 Like