Tables and charts

Table

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}
/>

TableColumn[]

required

Each column has key, header, render?(row, index) (defaults to row[key]), align? and width?.

T[]

required

Rows.

(row, index) => string

required

Stable key per row.

(row, index) => void

Makes rows clickable.

ReactNode

Shown when data is empty.

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

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

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] },
  ]}
/>

{ label, data: number[], color? }[]

required

One line per series.

string[]

X-axis labels, one per point.

number

default:"220"

Chart height.

boolean

Fill under the line (single series only).

number | 'auto'

Axis floor. The default keeps zero; 'auto' fits the data, which suits lines whose values never approach zero.

number

default:"4"

Number of y-axis ticks.

function

Value formatting and extra tooltip lines.

DonutChart

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.

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

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

Legend and palette

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.

Overview

Components

Platform

Profile integration

Table

Charts

BarChart

LineChart

DonutChart

Sparkline

Legend and palette

​Table

​Charts

​BarChart

​LineChart

​DonutChart

​Sparkline

​Legend and palette

Table

Charts

BarChart

LineChart

DonutChart

Sparkline

Legend and palette