Bar Chart
NEWA hand-written, dependency-free SVG bar chart with grouped and stacked layouts, morphing bar transitions, interactive legend toggles, and accessible hover and keyboard tooltips.
Requests by platform
Monthly volume, last 12 months
| Category | Web | Mobile | API |
|---|---|---|---|
| Jan | 2,400 req | 2,080 req | 900 req |
| Feb | 3,041 req | 2,126 req | 1,244 req |
| Mar | 2,948 req | 1,994 req | 913 req |
| Apr | 2,462 req | 1,926 req | 1,264 req |
| May | 2,501 req | 2,119 req | 1,602 req |
| Jun | 3,212 req | 2,570 req | 1,271 req |
| Jul | 3,759 req | 3,081 req | 1,629 req |
| Aug | 3,546 req | 3,410 req | 1,960 req |
| Sep | 3,090 req | 3,451 req | 1,629 req |
| Oct | 3,264 req | 3,317 req | 1,993 req |
| Nov | 4,018 req | 3,254 req | 2,318 req |
| Dec | 4,453 req | 3,452 req | 1,987 req |
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/bar-chart
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data | BarDatum[] | — | Categories to render; each row needs a label plus one numeric key per series |
| series | BarSeries[] | — | Series definitions with a data key, display label, and optional color |
| variant | "grouped" | "stacked" | "grouped" | Places bars side by side or stacks them on top of each other |
| height | number | 260 | Height of the chart area in pixels |
| formatValue | (n: number) => string | Intl.NumberFormat | Formats values shown in tooltips and the accessible data table |
| formatTick | (n: number) => string | compact Intl.NumberFormat | Formats the y-axis tick labels |
| showLegend | boolean | true | Shows the interactive series legend when more than one series exists |
| animated | boolean | true | Enables entrance and bar morph animations (disabled for reduced motion) |
| ariaLabel | string | auto-generated | Accessible description for the chart image role |
| className | string | "" | Additional CSS classes for the chart wrapper |