Skip to content
oks-ui

Features

React charts without a charting library

Seven chart types, one component, and nothing extra to install.

The short answer

oks-ui draws its charts itself, as interactive SVG, so you get line, area, column, bar, pie, donut and heatmap charts without installing a charting library. One Chart component covers all seven types, and oks-ui still has zero runtime dependencies. The whole Chart is about 64 KB of JavaScript and 21 KB of CSS gzipped.

Try it

<Chart type="line" />

Signups and active users

Signups and active usersJanFebMarAprMayJun20406080100

The buttons only change the type prop. Hover a point for its tooltip, and click a legend item to hide a series.

How you use it

Pass row-shaped data, say which key is the x axis and which keys are the series. That is the whole minimum.

Sales.tsx
import { Chart } from "oks-ui/chart";
import "oks-ui/chart.css";

const data = [
  { month: "Jan", sales: 10 },
  { month: "Feb", sales: 18 },
];

export function Sales() {
  return <Chart type="line" title="Sales" data={data} x="month" series="sales" />;
}

What one component covers

  • Seven types. Line, area, column, bar, pie, donut and heatmap through one type prop.
  • Interaction. Tooltips, legend toggling, zoom and pan, and data filters.
  • Output. Export to SVG or PNG, and a fullscreen view.
  • Real-world states. Loading, error and empty states are built in, and large datasets can be decimated so they stay responsive.
  • Themed with CSS. Colours come from your --oks-* variables, so a chart follows your theme and dark mode with no chart-specific setup.

What it costs

Measured on oks-ui 1.2.1 on , minified with esbuild and gzipped, with React left out: the Chart is about 64 KB of JavaScript and 21 KB of CSS. That is the price of all seven types together with zoom, export and fullscreen. Because it is imported from its own subpath, a page that has no chart does not load any of it.

The full size table for other components is on the zero dependencies page.

Every chart type, documented

Questions

Does oks-ui use a charting library?

No. The Chart component draws every chart itself as SVG, and oks-ui has no runtime dependencies, so no charting library is installed with it. React is the only requirement.

Which chart types does oks-ui support?

Seven: line, area, column, bar, pie, donut and heatmap. They all use the same Chart component, and you switch between them with the type prop.

How big is the oks-ui Chart component?

Measured on oks-ui 1.2.1, minified and gzipped with React excluded, Chart is about 64 KB of JavaScript and 21 KB of CSS. That covers all seven chart types with tooltips, legend toggling, zoom, export and fullscreen. It is imported from its own subpath, so pages without a chart do not pay for it.

Can users export an oks-ui chart?

Yes. With the export option enabled, the chart toolbar offers downloads as SVG or PNG.

Are oks-ui charts accessible?

Each chart has an accessible label taken from its title, announces loading and error states, and handles keyboard input: for example arrow keys move through a bar chart's data and Enter selects, and a heatmap's cells can be browsed with the arrow keys. As with any chart, give it a clear title and describe the takeaway in nearby text.

Keep exploring

Figures and claims on this page were last checked on 2026-09-24.