Total revenue
$45,231.89
Fixture values for this interactive preview.
OATJS DASHBOARD UI
Charts and dashboard components, built for your data.
A TypeScript component library for charts, metrics, tables, layouts, and dashboard widgets. Explore the live examples, inspect the inputs, and check support status before you build.
INTERACTIVE SAMPLE
Revenue overview
Last 30 days · Sample data
Subscriptions
+2,350
Fictional sample count.
Active now
+573
Fixture activity count.
Charts load when this sample enters view. Data shown is illustrative fixture data.
QUICK START
Connect OatJS to your application
Install the dashboard package and Oat styles. Add a chart renderer when your application uses canvas charts.
Read setup and first chart guide →npm install @oatjs/dashboard @knadh/oat chart.js
import '@knadh/oat';
import '@oatjs/dashboard/styles';
import { createChart, type ChartData } from '@oatjs/dashboard/charts';
const data: ChartData = {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ label: 'Revenue', data: [12, 18, 15] }],
};
const chart = createChart('line', { data, title: 'Revenue trend' });
document.querySelector('#chart')?.append(chart.element);
// Release chart resources from your view cleanup:
chart.adapter.destroy();COMPONENT FOUNDATIONS
Start with semantic controls
Oat styles native buttons, form fields, tables, and navigation. Filter these fixture rows to see the controls working together.
| Area | Working examples | Docs |
|---|---|---|
| Controls | Button, input, select, tabs | Open controls |
| Charts | Line, bar, distribution, hierarchy | Open chart docs |
| Tables | Rows, filters, status, pagination | Open tables |
| Layouts | Dashboard shell, grid, toolbar | Open layouts |
Showing all four component areas.
CHART GALLERY
Choose a chart for the question
These live examples use separate deterministic fixture data. Open a chart page to inspect its exact input contract and current renderer status.
Explore relationships
Inspect paired measurements, not a decorative curve.
Scatter chart documentation →Live chart examples load with their data when the page is ready.
START WITH A WORKING EXAMPLE
Six connected dashboard demos
Each demo uses local fixture data and includes pages you can navigate and inspect.
Loading dashboard examples…
Loading live charts from the dashboard fixtures…
PREVIEW AND CODE
Inspect the same chart you run
The preview and source use the same labels, values, options, and renderer. Copy returns the full TypeScript snippet, including package setup and teardown.
Loading one chart configuration for both tabs.
THEME AND TOKENS
Theme the surface, keep meaning
Switch the actual Oat theme mode and inspect the rendered token values used by this sample.
System themeOat semantic surfaceBackground, text, border, radius, spacing, and font come from the active theme tokens.
Background
—Text —Radius —Spacing —INTERACTIONS AND STATES
Check the behavior, not just the shape
Filter the sample data and change the view. Keyboard focus, selected state, and the result count are visible in the interface.
- SaaS Analytics — recurring revenue and customer activity
- Personal Finance — cash flow and budget tracking
- E-commerce Operations — orders and inventory
- Project Workspace — tasks and delivery
- People Operations — workforce and leave
- AI Automation Monitor — executions and logs
Showing six local dashboard examples.
COMPOSITION SHOWCASE
A chart belongs inside a workflow
This small ledger view combines page navigation, period control, a live chart, and filterable rows around one consistent fixture.
Recent cash flow
Fictional fixture rows for the interface example.
| Payee | Category | Amount |
|---|---|---|
| Northwind Studio | Income | $5,200.00 |
| Maple Market | Groceries | −$68.40 |
| City Utilities | Housing | −$162.00 |
| Metro Pass | Transport | −$47.00 |
| Laptop return | Refund | −$129.00 |
Showing this month’s fixture transactions.
BUILD WITH CONFIDENCE
Guides for real projects
Use the docs to verify theme behavior, accessible output, supported renderers, and package boundaries.
Installation
Install Oat and the dashboard package, then render your first chart.
Accessibility
Keyboard behavior, semantic markup, and chart data alternatives.
API and package exports
Typed inputs, public entry points, and component boundaries.
Implementation guides
Connect examples, components, chart inputs, and styling.
RELIABILITY AND SUPPORT
Know what has been checked
The chart inventory distinguishes implemented renderers from declared unsupported variants. A catalog entry alone is not a verification result.
- Data contractsReview input and renderer status
- Theme behaviorInspect light, dark, and system modes
- Accessible patternsRead interaction guidance
- Application examplesOpen six fixture-backed workflows
Example datasets are fictional. Support and QA statements are limited to the published registry and recorded checks.
FROM EXPLORATION TO IMPLEMENTATION
Choose a component and inspect how it works.
Start with a real dashboard flow, then open the component docs for its props and example code.