@cassa/ui-data

Data visualization components. Table with sort, search, and pagination. LineChart and BarChart with token-driven colors via Recharts.

Import

import { Table, LineChart, BarChart, type Column } from '@cassa/ui-data'

LineChart

BarChart

Full example

import { LineChart } from '@cassa/ui-data'

const salesData = [
  { month: 'Jan', sales: 4200, returns: 400 },
  { month: 'Feb', sales: 5800, returns: 320 },
  { month: 'Mar', sales: 5200, returns: 510 },
]

export const SalesChart = () => (
  <LineChart
    data={salesData}
    xKey="month"
    lines={[
      { key: 'sales', label: 'Sales' },
      { key: 'returns', label: 'Returns' },
    ]}
    height={300}
  />
)

Chart props

Prop	Type	Default	Description
data*	Record<string, unknown>[]	—	Array of data points.
xKey*	string	—	Key on each data object to use as the X axis.
lines / bars*	{ key: string; label: string }[]	—	Series to render — each maps to a token color.
height	number	300	Chart height in pixels.

For Table props, see the Table component page.