10000
Feature Request: Allow Explicit Bar Height (barHeight or maxBarHeight) for Bar Charts · Issue #2771 · plouc/nivo · GitHub
More Web Proxy on the site http://driver.im/
You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
Yes, my feature request is related to a problem with controlling bar height for certain layouts.
In use cases where the number of bars is small (e.g., 3–6), I want the bars to always have a fixed, explicit height (e.g., 16px or 32px), regardless of the overall chart height or the parent container’s height. Currently, Nivo's automatically distributes all available vertical space among bars and padding, making it impossible to strictly control individual bar height via a prop or API.
Describe the solution you'd like
I’d like to be able to explicitly set or lock the height of bars (for horizontal bars) or width (for vertical bars) in the Nivo Bar chart—for example, by specifying a barHeight or maxBarHeight prop (in pixels). When this is set, each bar should render at exactly the specified height, regardless of the container’s overall height or the number of bars, as long as all bars fit within the chart area. The chart should automatically adjust its total height to fit the specified bars (with optional padding or margin).
If the number of bars is too high for the available chart height (i.e., bars plus gaps would overflow), then the chart should gracefully fallback to a calculated bar height or a minimum allowed bar height, ensuring all data remains visible. This way, the strict barHeight is enforced only when possible and reasonable.
Describe alternatives you've considered
Manually setting the chart container’s height based on the number of bars and desired bar height, but this approach is fragile, not responsive, and doesn’t scale well with dynamic data.
Adjusting the Nivo padding prop, but this only controls the fraction of space between bars and doesn’t guarantee fixed bar height.
Additional context
This feature is important for dashboard and design system use cases where visual consistency is required—e.g., having 5 bars, each exactly 16px tall, regardless of parent size.
Below is an example mockup and workaround I’ve tried, which requires hard-coding the container’s height and doesn’t respond well to changes:
Adding My Mocks Images as well
The text was updated successfully, but these errors were encountered:
Uh oh!
There was an error while loading. Please reload this page.
Is your feature request related to a problem? Please describe.
Yes, my feature request is related to a problem with controlling bar height for certain layouts.
In use cases where the number of bars is small (e.g., 3–6), I want the bars to always have a fixed, explicit height (e.g., 16px or 32px), regardless of the overall chart height or the parent container’s height. Currently, Nivo's automatically distributes all available vertical space among bars and padding, making it impossible to strictly control individual bar height via a prop or API.
Describe the solution you'd like
I’d like to be able to explicitly set or lock the height of bars (for horizontal bars) or width (for vertical bars) in the Nivo Bar chart—for example, by specifying a barHeight or maxBarHeight prop (in pixels). When this is set, each bar should render at exactly the specified height, regardless of the container’s overall height or the number of bars, as long as all bars fit within the chart area. The chart should automatically adjust its total height to fit the specified bars (with optional padding or margin).
If the number of bars is too high for the available chart height (i.e., bars plus gaps would overflow), then the chart should gracefully fallback to a calculated bar height or a minimum allowed bar height, ensuring all data remains visible. This way, the strict barHeight is enforced only when possible and reasonable.
Describe alternatives you've considered
Manually setting the chart container’s height based on the number of bars and desired bar height, but this approach is fragile, not responsive, and doesn’t scale well with dynamic data.
Adjusting the Nivo padding prop, but this only controls the fraction of space between bars and doesn’t guarantee fixed bar height.
Additional context
This feature is important for dashboard and design system use cases where visual consistency is required—e.g., having 5 bars, each exactly 16px tall, regardless of parent size.
Below is an example mockup and workaround I’ve tried, which requires hard-coding the container’s height and doesn’t respond well to changes:
Adding My Mocks Images as well
The text was updated successfully, but these errors were encountered: