# ASChartHBar

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

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

<ASChartHBar
  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 right (or left). `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 400px wide and 20px tall. The width establishes the percentage reference area. Use `style` or `className` to change outer layout. A percentage width, such as `style={{ width: '100%' }}`, resolves against the containing block's width; ensure the surrounding layout provides the intended available width. 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 ASChartVBar through `components.chartbar`; no changes to the public orientation-specific component are needed.

```tsx
<ASChartHBar
  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 horizontal 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.