# ASChartVBar

ASChartVBar displays one percentage as a vertical bar. It does not supply chart axes, legends, or data aggregation.

```tsx
import { ASChartVBar, ComponentSize } from '@eleventheye/asui';

<ASChartVBar
  value={65}
  size={ComponentSize.Medium}
  barKind="striped"
  primaryColor="#175cd3"
  secondaryColor="#ffd321"
  startLabel={0}
  endLabel="65%"
/>
```

## Data and layout

`value` defaults to 50 and is clamped to 0–100. Non-finite values render as zero. `direction` defaults to up (or down). `startLabel` marks the fixed origin and `endLabel` follows the filled endpoint. Both accept React nodes, including numeric zero. Labels are positioned outside the bar; allow room around the chart for their content. At zero, the endpoints coincide, so two long labels may overlap.

The default outer dimensions are 20px wide and 400px tall. The height establishes the percentage reference area. Use `style` or `className` to change outer layout. A percentage height requires a parent with a definite height. The visible bar thickness is independently sized: Small 6px, Medium 10px (default), Large 15px.

## Fill and themes

`barKind` accepts `solid` or `striped`. When omitted, `components.chartbar.barKind` supplies the default: classic uses stripes, neutral uses a solid fill. Explicit `primaryColor` and `secondaryColor` take precedence over theme colors. Solid uses only primaryColor; striped uses both colors. `withShadow` defaults to false and enables the theme's shadow when true.

Use inherited `ASThemeProvider`, a complete `theme`, or partial `themeOverrides`. Do not provide both theme props together. Appearance is shared with ASChartHBar through `components.chartbar`; no changes to the public orientation-specific component are needed.

```tsx
<ASChartVBar
  value={65}
  themeOverrides={{ components: { chartbar: {
    barKind: 'solid', radius: '4px', labelColor: '#175cd3',
    sizes: { ASMedium: { thickness: '12px' } },
  } } }}
/>
```

See the [theme reference](./theme-reference.md#bar-charts--componentschartbar) for every style property and default. Font loading belongs to the application.

## Motion and accessibility

The filled percentage and endpoint label animate along the vertical axis. Reduced-motion preferences disable that transition. Bars are noninteractive visualizations, not progress indicators; they do not imply task completion or announce live values automatically. Provide meaningful labels or a surrounding textual description, including the actual value and its meaning. Do not use color alone to distinguish data.