Theme

Chart

display @dryui/ui Compound

SVG-based chart with bars, lines, and axes

chartgraphbarlinedatavisualization

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

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'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Bar Chart

svelte
<Chart.Root data={data} width={500} height={250}>
  <Chart.Bars />
  <Chart.XAxis />
  <Chart.YAxis />
</Chart.Root>

Line Chart

svelte
<Chart.Root data={data} width={500} height={250}>
  <Chart.Line />
  <Chart.XAxis />
  <Chart.YAxis />
</Chart.Root>

Structure

Compound components always start with Chart.Root. Use this structure block to understand required wrappers before you wire state or styling.

Chart.Root
  Chart.Bars
  Chart.Line
  Chart.Area
  Chart.Donut
  Chart.StackedBar
  Chart.HorizontalBar
  Chart.XAxis
  Chart.YAxis
Chart.Root Chart.BarsChart.LineChart.AreaChart.DonutChart.StackedBarChart.HorizontalBarChart.XAxisChart.YAxis

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Chart.Root, then add only the parts you need.

Chart.BarsChart.LineChart.AreaChart.DonutChart.StackedBarChart.HorizontalBarChart.XAxisChart.YAxis

Chart.Root

Prop Type Default Required Bindable
data
import('@dryui/primitives').ChartDataPoint[]
— ✓ —
width
number
— — —
height
number
— — —
padding
{ top?: number; right?: number; bottom?: number; left?: number }
— — —
children
Snippet
— ✓ —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.Bars

Prop Type Default Required Bindable
radius
number
— — —
onclick
(event: { label: string; value: number; index: number }) => void
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.Line

Prop Type Default Required Bindable
strokeWidth
number
— — —
showDots
boolean
— — —
dotRadius
number
— — —
color
string
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.Area

Prop Type Default Required Bindable
strokeWidth
number
— — —
showDots
boolean
— — —
dotRadius
number
— — —
color
string
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.Donut

Prop Type Default Required Bindable
innerRadius
number
— — —
outerRadius
number
— — —
label
Snippet<[{ total: number }]>
— — —
onclick
(event: { label: string; value: number; index: number }) => void
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.StackedBar

Prop Type Default Required Bindable
stackedData
import('@dryui/primitives').ChartStackedDataPoint[]
— ✓ —
radius
number
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.HorizontalBar

Prop Type Default Required Bindable
radius
number
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.XAxis

Prop Type Default Required Bindable

Also accepts standard HTML attributes (class, style, id, etc.)

Chart.YAxis

Prop Type Default Required Bindable
ticks
number
— — —

Also accepts standard HTML attributes (class, style, id, etc.)