Setting the height of each bar in a BarX mark, as opposed to the height of the whole Plot

[sbarre]

Is it possible to explicitly set the height of the bars in a BarX mark, rather than having them auto-compute their height based on the height of the whole Plot and the number of bars?

I don't mean different bar sizes in the same Plot but one height value to apply to all bars.

I am displaying multiple plots on one screen and they have different numbers of bars and I want the bars to be consistent sizes across plots, so I am omitting the height attribute, but I also don't want the bars to be the built-in/default height (which seems to be 18px).

I can't seem to figure out how to override this 18 pixel value, or find where it is defined.

<g aria-label="bar">
<rect x="200" width="3.4606299212598515" y="26" height="18" fill="#4269d0"></rect>
<rect x="200" width="3.4606299212598515" y="366" height="18" fill="#4269d0"></rect>
....

[sbarre]

It seems at some point a Band scale is created which contains the values used when rendering the bars, but so far I've been unable to figure out how to pass in my own D3 band scale object (where, and with what values?) ...

[sbarre]

You could alternatively pass a scale,

I tried this but couldn't figure out the syntax.. Do you know if there's an example somewhere?

I'd rather spend time calculating the parameters of a scale object that I can then pass in, than calculating the height of the Plot (because some plots may have different attributes like legends or different margins or other marks for aesthetic reasons so I don't see a one-size-fits all calculation there ).

I've been trying to step through the code with the Chrome debugger to understand where the scale object is created, or where the code checks "was I given a Scale object in the options?" but I'm not having much luck.

I see that a band scale needs the domain and a range, but when I use d3.scaleBand() to create an object with those props, I'm not sure where to set it.

If I just set y: myScale I get an error about the domain prop not being iterable (I'm passing in an Array). I've also tried setting y: { scale: myScale } but that didn't work either?

[Fil]

To clarify, when you pass a scale in, it has to be a Plot scale options (object), not a d3 scale.

I made this example where I'm creating a scale from another scale, but it doesn't feel like a great approach
https://observablehq.com/@fil/bars-with-a-shared-size

tbh I'm not seeing how you would define a bar height but leave the chart height unchanged — it might fit in some cases but overflow in some others, depending on the number of bars you have?

[sbarre]

Got it, thanks Fil! I'll try a different approach.

I think I was assuming that internally the Plot height was being calculated based on the height of the bars (when you don't specify a height attribute for the Plot), so if I could set the height of a bar, the Plot height would be calculated accordingly.

If you don't specify a height for the Plot, the bars all end up with a height of "18", no matter how many bars you have. I assumed that number had to come from somewhere that I could perhaps override.

I wasn't looking to keep the plot height unchanged with different bar sizes, sorry if that was unclear. I just wanted to specify a bar height, as opposed to a Plot height, to maintain consistent bar sizes across plots.

So if I have 3 bar charts, with varying numbers of bars, the bars would be consistent heights, even though the plots themselves would be different heights.

I can experiment with pre-calculating the whole Plot height myself as a way to end up with specific bar heights, but that just feels.. backwards?

Could using custom CSS classes on the SVG also be a way to do this, post-render?

[mbostock]

The default bar height of 18 comes from the 20 here (accounting for the padding between bars):

plot/src/dimensions.js

Line 119 in 14d6e43

return !!(y || fy) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;

The default bar height is not configurable; you can only set the overall height of the chart.