Chart
SVG-based data visualization component supporting bar, line, area, step, donut, and radar chart types.
// Plain markup
import { Chart } from "@shavin/ui";Bar Mixed (Category Colors)
Bar Multiple (Grouped Series)
Bar Negative (Bi-directional Zero-Baseline)
Line Step (Orthogonal Curves)
Donut Active (Pie / Donut Highlight)
Radar Dots (Vertex Points)
Radar Grid Circle (Concentric Ring Axes)
Standard Bar & Area Charts
Bar
Area
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | ChartDataItem[] | — | Array of data item records for chart visualization. |
| type | | "bar" | — | Chart visualization style type. |
| series | ChartSeriesConfig[] | — | Optional series configuration array for multi-series charts (e.g. bar-multiple). |
| variant | "default" | "sparkline" | — | `sparkline` drops axes, grid and padding and fills the container (size it with className). |
| height | number | 260; | Chart height in px (default 260; sparkline defaults to the className height). |
| padding | ChartPadding | — | Plot padding in px, merged over the defaults (top 24, right 24, bottom 36, left 44). |
| yFormat | ChartYFormat | — | Y-axis tick / tooltip format. |
| yPrefix | string | $ | Text before each formatted y value (default "$" for currency). |
| ySuffix | string | % | Text after each formatted y value (default "%" for percent). |
| tickCount | number | 4, | Number of y-axis intervals (default 4, so 5 ticks). |
| yMax | number | — | Fixed y-axis maximum; defaults to the data maximum. |
| showYAxis | boolean | true) | Show y-axis tick labels (default true). |
| showGrid | boolean | true) | Show dashed horizontal grid lines (default true). |
| showXAxis | boolean | true) | Show x-axis labels (default true). |
| xLabelEvery | number | 1) | Show every Nth x label, starting with the first (default 1). |
| xLabelEveryMobile | number | — | Below the md breakpoint show every Nth x label instead (hides the rest on small screens). |
| xLabels | string[] | — | Explicit x labels to show (matched against datum `label`); overrides the stride props. |
| barRadius | ChartBarRadius | sm | Bar corner radius token (default "sm"). |
| barGap | number | — | Gap between single bars in px (default: 45% of the slot). |
| maxBarWidth | number | — | Maximum bar width in px. |
* required