Chart
SVG-based chart with bars, lines, and axes
Chart Sample chart
- Jan: 108
- Feb: 112
- Mar: 119
- Apr: 128
- May: 134
- Jun: 142
Accessibility
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
- Expose the essential data in text form, such as a summary, value list, or table, rather than relying on the graphic alone.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Chart } from '@dryui/ui';
</script>
<Chart.Root>
<Chart.Bars>...</Chart.Bars>
<Chart.Line>...</Chart.Line>
<Chart.Area>...</Chart.Area>
<Chart.Donut>...</Chart.Donut>
<Chart.StackedBar>...</Chart.StackedBar>
<Chart.HorizontalBar>...</Chart.HorizontalBar>
<Chart.XAxis>...</Chart.XAxis>
<Chart.YAxis>...</Chart.YAxis>
</Chart.Root>Import options
Root package
ts
import { Chart } from '@dryui/ui'Per-component subpath
ts
import { Chart } from '@dryui/ui/chart'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Chart.Root | |||||
| data | import('@dryui/primitives').ChartDataPoint[] | — | — | ✓ | — |
| width | number | — | — | — | — |
| height | number | — | — | — | — |
| padding | { top?: number; right?: number; bottom?: number; left?: number } | — | — | — | — |
| summary | string | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Chart.Bars | |||||
| radius | number | — | 2 | — | — |
| onclick | (event: { label: string; value: number; index: number }) => void | — | — | — | — |
Chart.Line | |||||
| strokeWidth | number | — | 2 | — | — |
| showDots | boolean | — | true | — | — |
| dotRadius | number | — | 3 | — | — |
| color | string | Semantic color or tone applied to the component. | 'currentColor' | — | — |
Chart.Area | |||||
| strokeWidth | number | — | 2 | — | — |
| showDots | boolean | — | false | — | — |
| dotRadius | number | — | 3 | — | — |
| color | string | Semantic color or tone applied to the component. | 'currentColor' | — | — |
Chart.Donut | |||||
| innerRadius | number | — | 60 | — | — |
| outerRadius | number | — | 80 | — | — |
| label | Snippet<[{ total: number }]> | Visible label text shown for the control or item. | — | — | — |
| onclick | (event: { label: string; value: number; index: number }) => void | — | — | — | — |
Chart.StackedBar | |||||
| stackedData | import('@dryui/primitives').ChartStackedDataPoint[] | — | — | ✓ | — |
| radius | number | — | 2 | — | — |
Chart.HorizontalBar | |||||
| radius | number | — | 2 | — | — |
Chart.XAxis | |||||
Chart.YAxis | |||||
| ticks | number | — | — | — | — |