Bar Alignment

When rendering bar charts, vccs provides several props to control how bars are sized and spaced within each category.

Bar alignment controls

Here's how bar-size, bar-gap, and bar-category-gap work together:

Bar size

The bar-size prop sets the width (or height for horizontal bars) in pixels:

<Bar data-key="value" fill="#f97316" :bar-size="20" />

Without bar-size, bars automatically fill the available space.

Gap between bars

Use bar-gap on the chart container to control spacing between bars in the same category. The value is a percentage of the bar width:

<!-- 10% gap between bars (default: 4) -->
<BarChart :data="data" :bar-gap="10">
  <Bar data-key="a" fill="#f97316" />
  <Bar data-key="b" fill="#14b8a6" />
</BarChart>

Gap between categories

Use bar-category-gap to control spacing between groups of bars. Accepts a percentage or pixel value:

<!-- 20% of available space between categories (default: '10%') -->
<BarChart :data="data" bar-category-gap="20%">
  <Bar data-key="value" fill="#f97316" />
</BarChart>

Horizontal bar alignment

For horizontal bars (layout="vertical"), the same props apply but affect the vertical dimension:

<BarChart :data="data" layout="vertical" :bar-gap="4" bar-category-gap="15%">
  <XAxis type="number" />
  <YAxis data-key="name" type="category" />
  <Bar data-key="value" fill="#f97316" :bar-size="20" />
</BarChart>

Summary