v1.0 · 8 chart types · SSR + agent-native

Beautiful charts,honestly tiny.

A zero-dependency SVG charting library. ~13KB gzipped, fast by default, WCAG AA, server-renderable — with React, Vue, Svelte, and a <chart-lite> web component.

See the charts →
0KB
gzipped
0
deps
0
chart types
0%
WCAG AA

Revenue

$0k

▲ 34%
JanMarMayJulSepNov

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.

The exact chart every snippet renders — live, right here.

$ npm i @chartlite/react
import { ComboChart } from '@chartlite/react';

<ComboChart data={data} />

Theme with pure CSS

Re-theme without re-rendering.

Pass cssVars and every color becomes a CSS custom property. Restyle palettes, or flip light/dark, entirely in CSS — no JavaScript, no redraw. Pairs with SSR for zero-JS theming.

Palette

Mode

.chart {
  --cl-series-0: #22d3ee;
  --cl-series-1: #a855f7;
}

Agent-native

A charting library your tools understand.

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

Monthly growthu chart showing data from Jan to Jun. Values range from 80.00 to 300.00, with a strong upward trend. Chart contains 2 data series: Signups, Active.
Monthly growth - Data Table
Category SignupsActive
Jan12080
Feb180110
Mar160140
Apr240190
May300230
Jun280280
0100200300JanFebMarAprMayJunMonthly growth

Rendered on the server — this SVG is in your page source. No client JS ran.

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
      }
    ]
  }
});

SSR

Render on the server

renderToString(spec) turns a chart spec into an SVG string in Node, Bun, or the edge — no browser, no jsdom. Ship charts with zero client JavaScript.

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

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

MCP

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

Machine-readable

Built for LLMs

A published JSON Schema for every chart spec, plus llms.txt and AGENTS.md, so tools and agents can discover and drive the whole API with confidence.

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

Ready in one line

Beautiful charts, shipping today.

Zero dependencies. ~13KB gzipped. MIT licensed. Pick your framework and go.

$ npm i @chartlite/core
View on npmStar on GitHub
@chartlite/core@chartlite/react@chartlite/vue@chartlite/svelte@chartlite/element@chartlite/mcp