> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Tables and charts

> Table, Sparkline, BarChart, LineChart, DonutChart and Legend.

## Table

```tsx theme={null}
import { Table, Sparkline } from '@cskn/ui';

<Table
  rowKey={(row) => row.id}
  onRowClick={openFilm}
  empty="No films yet"
  columns={[
    { key: 'title', header: 'Title' },
    { key: 'year', header: 'Year', align: 'right', width: 80 },
    { key: 'trend', header: 'Views', render: (row) => <Sparkline data={row.trend} area /> },
  ]}
  data={rows}
/>
```

<ParamField path="columns" type="TableColumn[]" required>Each column has `key`, `header`, `render?(row, index)` (defaults to `row[key]`), `align?` and `width?`.</ParamField>
<ParamField path="data" type="T[]" required>Rows.</ParamField>
<ParamField path="rowKey" type="(row, index) => string" required>Stable key per row.</ParamField>
<ParamField path="onRowClick" type="(row, index) => void">Makes rows clickable.</ParamField>
<ParamField path="empty" type="ReactNode">Shown when `data` is empty.</ParamField>

On narrow screens the table scrolls horizontally inside its own wrapper rather than widening the page.

## Charts

The charts share a categorical palette checked for color-vision deficiency, with separate light and dark steps that follow the theme automatically. They label values directly, show a legend only for two or more series, add hover tooltips, and keep axes quiet. Colors are assigned in a fixed order; they do not cycle.

### BarChart

```tsx theme={null}
import { BarChart } from '@cskn/ui';

<BarChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 9 }, { label: 'Wed', value: 15 }]} />
```

Props: `data: { label, value, color? }[]`, `height?` (default 200), `color?`, `showValues?` (default `true`), `formatValue?`, `describe?(index)` for extra tooltip lines.

### LineChart

```tsx theme={null}
import { LineChart } from '@cskn/ui';

<LineChart
  labels={['Jan', 'Feb', 'Mar', 'Apr']}
  series={[
    { label: 'Films', data: [8, 12, 9, 14] },
    { label: 'Series', data: [3, 5, 4, 6] },
  ]}
/>
```

<ParamField path="series" type="{ label, data: number[], color? }[]" required>One line per series.</ParamField>
<ParamField path="labels" type="string[]">X-axis labels, one per point.</ParamField>
<ParamField path="height" type="number" default="220">Chart height.</ParamField>
<ParamField path="area" type="boolean">Fill under the line (single series only).</ParamField>
<ParamField path="yMin" type="number | 'auto'">Axis floor. The default keeps zero; `'auto'` fits the data, which suits lines whose values never approach zero.</ParamField>
<ParamField path="yTicks" type="number" default="4">Number of y-axis ticks.</ParamField>
<ParamField path="formatValue / describe" type="function">Value formatting and extra tooltip lines.</ParamField>

### DonutChart

```tsx theme={null}
import { DonutChart } from '@cskn/ui';

<DonutChart centerLabel="titles" data={[{ label: 'Sci-fi', value: 42 }, { label: 'Drama', value: 30 }]} />
```

Props: `data: { label, value, color? }[]`, `size?` (default 180), `thickness?` (default 28), `centerValue?` (defaults to the total), `centerLabel?`, `formatValue?`.

### Sparkline

An inline trend with no axes.

```tsx theme={null}
<Sparkline data={[3, 5, 4, 8, 7]} width={100} height={28} area />
```

Props: `data`, `width?`, `height?`, `color?`, `area?`, `strokeWidth?`.

### Legend and palette

```tsx theme={null}
import { Legend, seriesVar } from '@cskn/ui';

<Legend items={[{ label: 'Films', color: seriesVar(0) }, { label: 'Series', color: seriesVar(1) }]} />
```

`seriesVar(i)` returns the palette color for series `i` (`var(--cskn-series-1)` through `-8`). Pass `color` on a datum or series to override it.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.