BarChart
Bars per category: single, grouped or stacked, upright or on their side, with references, annotations and a highlighted bar.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/bar-chart-fills-layout.json.
Usage
Examples
Fills, comparison and layout
Hover to reveal values
API
22 props
Accessibility
The plot is one tab stop named by ariaLabel. The arrow keys walk the points, Home and End jump to the ends, Enter or Space activates and Escape clears; the active point is drawn and read out politely. Every value is mirrored in a data table, and the SVG is hidden from assistive technology.
Related
CardCard frames reusable content with title, subtitle, and optional children.8 examplesChartFrameThe frame every chart renders in: a captioned figure with one keyboard stop and a readout, loading, empty, invalid and error states, locale-aware numbers and a data table built from points. Use it around a custom visual, with the Recharts composition parts and Gaudi primitives.1 exampleToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesPillPill renders compact category and status labels.4 examples