# Split bar

A single 100% bar split into shares: rest on a segment to widen it and read its exact figures, toggle segments from the legend and the rest reflow, with labels inside when they fit and on leader lines when they don't.

- ID: `split-bar`
- Import: `animui/split-bar`
- Category: Data
- Runtime exports: `SplitBar`
- Declaration: `types/pro/split-bar.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: donut-chart, waffle-chart, treemap, bar-chart, usage-meter

```tsx
import { SplitBar } from 'animui/split-bar';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info split-bar` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface SplitSegment { id: string; label: string; value: number; color?: string; }
export interface SplitBarProps {
  segments?: readonly SplitSegment[];
  title?: string;
  description?: string;
  format?: Intl.NumberFormatOptions;
  unit?: string;
  totalLabel?: string;
  hidden?: readonly string[];
  defaultHidden?: readonly string[];
  onHiddenChange?: (hidden: string[]) => void;
  legend?: boolean;
  locale?: string;
  label?: string;
  className?: string;
  style?: CSSProperties;
}

export declare const SplitBar: ComponentType<SplitBarProps>;

export default SplitBar;
```