[Bar Chart] Set max width of a bar

[williaster]

The following was originally posted as an issue by @wisyr in #1032, moving it to a discussion.

---

tl;dr - Is there a way to set a max width of a bar in charts but still keep it dynamic?

The issue is related with bar width. If there's enough of data, a single bar looks just okey.

But if there's no enough data, the bars are getting too wide.

Is there a way to somehow set a max width of a single bar? But still keep it dynamic so it is responsive when chart is resizing.

Playground: https://codesandbox.io/s/holy-pine-i5sp2?file=/Example.tsx

Thank you for such an outstanding library!

[williaster]

@wisyr barWidth for a band type scale is determined by the available chart width (set as the scale's range) and the padding (paddingInner + paddingOuter) set on the scale. This is described in detail and depicted in d3-scale's docs:

So to get this behavior, you need to compute the necessary padding (using the available chart width and number of bars) in order to achieve your desired maximum width. Here's a sandbox that demonstrates the gist of it.

Note you can get different behavior by setting scale.padding (above, in sandbox) vs scale.paddingInner (below):

Hope that helps, let me know if I can clarify anything further.

[valtism]

This is great, but I think it is slightly off in the calculations (even though they seem to come out correct). When I was implementing this with bar groups, I had to take into account the number of bars per group and rejig the calculation.

const barsPerGroup = dataGroups[0].length
const numBars = dateRange.length
const barWidth = barsPerGroup * maxBarWidth
const barsWidthTotal = numBars * barWidth
const padding = (chartWidth - barsWidthTotal) / (numBars + 1)
const band = padding + barWidth
const paddingRatio = padding / band

Even then I would get bars which were slightly off in terms of size.

[rajatdangat07]

Here is a solution for grouped bar chart. Here's a sandbox demo.

[wisyr]

Dear @williaster
Absolutely incredible. Thank you for your time. Works like a charm.
Cheers!