Aligning Bars in a BarChart

BarChart comes with some default settings for aligning bars within their categories. You can use the following props to customize the alignment:

• barSize: Controls the width of each Bar. This can be defined in pixels or in percent. If undefined, it's computed based on the available space and number of bars.
• barGap: Controls the distance between Bars in the same category. Increasing this gap will shrink the Bar rectangles. This can be defined in pixels or in percent.
• barCategoryGap: This prop controls the gap between categories. It can be specified as a percentage of the category width or as a fixed pixel value. This is a shortcut for setting the inner and outer padding of the band scale used for the XAxis. Notice how changing this value affects the alignment of the bars and XAxis ticks below. This can be defined in pixels or in percent.
• scale: You can provide a custom band scale to the XAxis component to have more control over the alignment of bars within their categories. This allows you to set properties like paddingInner, paddingOuter, and align on the scale itself. See d3-scale/band docs and d3-scaleband notebook for more information on band scales.

Bar alignment playground