Components

Chart

Chart presents numeric series as either bar or line marks.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Bar Mark

Loading preview…

Code
'use client';
import { Chart } from '@swiftuijs/ui';
const monthlyRevenue = [
    { id: 'jan', label: 'Jan', value: 12 },
    { id: 'feb', label: 'Feb', value: 24 },
    { id: 'mar', label: 'Mar', value: 18 },
    { id: 'apr', label: 'Apr', value: 30 },
];
export default function Example() {
    return (<Chart caption="Quarterly revenue" data={monthlyRevenue} label="Revenue" mark="bar" showValues></Chart>);
}

Usage and limitations

  • Use mark="bar" for category comparisons
  • Use mark="line" for trend visualization
  • Use showValues when exact values should stay visible beside the graphic
  • Use selectedDatumId or defaultSelectedDatumId when the surrounding UI needs a highlighted datum
  • Use valueFormatter to keep visible values and accessibility labels aligned
  • Marks support keyboard selection with arrow keys, Home, and End

More examples

Line Mark
Empty State
Selection
Line Selection

API reference

PropTypeRequiredDescription
dataIChartDatum[]Yes—
labelstringYes—
captionstringNo—
mark'bar' | 'line'No—
showValuesbooleanNo—
emptyStatestringNo—
heightnumberNo—
selectedDatumIdstringNo—
defaultSelectedDatumIdstringNo—
onSelectionChange(datum: IChartDatum) => voidNo—
valueFormatter(value: number, datum: IChartDatum) => stringNo—

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Card

Visually group related content in an elevated container.

Color

Render a CSS color swatch or background.