No. 1.1An almanac of small, honest chartsMIT · Zero dependencies

Beautiful charts,honestly tiny.

A zero-dependency SVG charting library for landing pages, docs, and dashboards that should load instantly. Accessible by default, server-renderable, and at home in React, Vue, Svelte, or plain HTML.

Browse the plates →

Monthly signups (k)

▲ 4.8× YoY

Fig. 1Drawn live by Chartlite: a smooth area, a reference line, and an annotation, themed with CSS variables. Illustrative data.

15KB
gzipped core, budget enforced in CI: 0
runtime dependencies: 8
chart types, one API: 4
data formats accepted as-is: AA
WCAG 2.1, with keyboard & screen-reader support

§1

Eight chart types

Every chart you actually need, and nothing you don’t.

Line, bar, area, scatter, pie & donut, radial gauges, sparklines, and combo. Everything below is live and themed only with CSS variables, so switching between Paper and Night in the nav re-colours all of it without a redraw.

Area

area

Pl. IMonotone smoothing never overshoots the data; one series gets a gradient.

Grouped bars

bar

Pl. IISide-by-side bars with a thickness cap and a legend that appears on its own.

Combo

combo

Pl. IIIBars and a trend line on shared axes, from one row-shaped dataset.

Donut

pie

Pl. IVPercentages are printed only on slices wide enough to hold them.

Radial gauge

radial

Pl. VProgress rings and gauges with rounded caps and any start/end angle.

Scatter

scatter

Pl. VINumeric x and y with nice ticks, and configurable point shape and size.

Revenue+34%

$72.4k

Active users+12%

18.2k

p95 latency−8%

42ms

Pl. VIISparklines: axis-less inline trends for metric strips and tables.

§2

Use it anywhere

One core. Every framework.

A zero-dependency core with first-party wrappers for React, Vue, and Svelte, plus a <chart-lite> web component that drops into Angular, Astro, or plain HTML.

Fig. 2The exact chart every snippet on the right renders, live.

$ npm i @chartlite/react

import { ComboChart } from '@chartlite/react';

<ComboChart data={data} />

§3

Theme with plain CSS

Re-theme without re-rendering.

Pass cssVars and every colour becomes a CSS custom property. Swap palettes or flip light and dark in CSS alone, with no JavaScript and no redraw. Combined with server rendering, that gives you theming with zero client JS.

Palette

Mode

.chart {
  --cl-series-0: ■ #d4441c;
  --cl-series-1: ■ #0f5e5c;
  --cl-bg: #faf7f1;
  --cl-text: #776d5f;
}

Fig. 3One chart instance. Each click changes only the CSS variables on its wrapper.

§4

Agent-native

A charting library your tools understand.

Declarative specs, server rendering, an MCP server, and machine-readable schemas mean humans and agents build the same charts in the same way.

Monthly growth - Data Table
Category	Signups	Active
Jan	120	80
Feb	180	110
Mar	160	140
Apr	240	190
May	300	230
Jun	280	280

Fig. 4Rendered on the server. This SVG is in the page source, and no client JavaScript drew it.

The spec

import { renderToString } from '@chartlite/core/server';

const svg = renderToString({
  type: 'combo',
  cssVars: true,
  width: 640,
  height: 340,
  title: 'Monthly growth',
  data: {
    series: [
      { name: 'Signups', dataKey: 'signups', type: 'bar' },
      { name: 'Active', dataKey: 'active', type: 'line' },
    ],
    data: [
      { x: 'Jan', signups: 120, active: 80 },
      { x: 'Feb', signups: 180, active: 110 },
      { x: 'Mar', signups: 160, active: 140 },
      { x: 'Apr', signups: 240, active: 190 },
      { x: 'May', signups: 300, active: 230 },
      { x: 'Jun', signups: 280, active: 280 },
    ],
  },
});

01SSR

Render on the server

renderToString(spec) turns a chart spec into an SVG string in Node, Bun, or at the edge, with no browser and no jsdom. Charts ship with zero client JavaScript.

import { renderToString } from '@chartlite/core/server';

const svg = renderToString({ type: 'line', data });

02MCP

Agents render charts

The @chartlite/mcp server exposes render_chart and list_chart_types over the Model Context Protocol, so assistants can turn data into charts directly.

{ "tool": "render_chart",
  "spec": { "type": "bar", "data": [1,2,3] } }

03Schema

Built for LLMs

Every chart spec has a published JSON Schema, alongside llms.txt and AGENTS.md, so tools and agents can discover and drive the whole API.

chartlite.dev/llms.txt
@chartlite/core/schema.json

Ready in one line

Ship a chart before your coffee cools.

Zero dependencies, about 15 KB gzipped, MIT licensed. Pick your framework and go.

View on npm Star on GitHub

@chartlite/core@chartlite/react@chartlite/vue@chartlite/svelte@chartlite/element@chartlite/mcp