Variable Font Charts

typechart

Inline charts powered by a variable font.
No SVG. No Canvas. No JS runtime.

GitHub Get Started →

Bar Chart

Sparkline

Pie Chart

Usage Examples

Inline charts shine where full charting libraries are overkill. Here are real-world patterns.

Data Table with Sparklines

Add a trend column to any table — no extra layout work.

Page	Views	Trend (7d)
/home	12,450	{l:40,55,50,65,60,80,75}
/pricing	8,320	{l:70,65,55,50,45,40,30}
/docs	6,180	{l:30,35,40,38,42,45,50}
/blog	3,940	{l:50,48,52,55,50,53,51}

KPI Cards

Pair a metric with a mini chart inside a compact card.

Revenue $48.2K {b:35,45,40,55,65,60,80}

Conversion 3.2% {p:32}

Sessions 24.1K {l:20,30,25,40,55,50,70}

Inline Stats in Text

Embed charts directly in paragraphs or labels — they're just text.

CPU usage over the last hour {l:20,25,30,28,45,60,55,70,65,50} peaked at 70% and is now trending down.

Deploy success rate is at {p:94} 94% this week — up from 87% last week.

Storage breakdown by team: {b:80,45,30,20} Frontend leads at 80%.

Live Demos

Adjust sliders to see charts update in real time. Charts are rendered entirely with the Datatype variable font.

Bar Chart

{b:30,70,50,40}

{b:30,70,50,40}

Values

v1: 30

v2: 70

v3: 50

v4: 40

Font Axes

wdth (width): 100

wght (weight): 400

Sparkline

{l:30,70,50,40}

{l:30,70,50,40}

Values

v1: 30

v2: 70

v3: 50

v4: 40

Font Axes

wdth (width): 100

wght (weight): 400

Pie Chart

{p:65}

{p:65}

Value: 65

Font Axes

wdth (width): 100

wght (weight): 400

Install & Usage

Add typechart components via the shadcn CLI. Pick your framework below.

1. Install components

BarChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/bar-chart.json

Sparkline npx shadcn@latest add https://imaimai17468.github.io/typechart/r/sparkline.json

PieChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/pie-chart.json

2. Use in your project

import { BarChart, Sparkline, PieChart } from "@/components/typechart";

export function Dashboard() {
  return (
    <div>
      <BarChart values={[30, 70, 50, 40, 80]} />
      <Sparkline values={[20, 55, 35, 75, 50]} wdth={120} />
      <PieChart value={65} wght={700} />
    </div>
  );
}

1. Install components

BarChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/vue-bar-chart.json

Sparkline npx shadcn@latest add https://imaimai17468.github.io/typechart/r/vue-sparkline.json

PieChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/vue-pie-chart.json

2. Use in your project

<script setup>
import { BarChart, Sparkline, PieChart } from "@/components/typechart";
</script>

<template>
  <div>
    <BarChart :values="[30, 70, 50, 40, 80]" />
    <Sparkline :values="[20, 55, 35, 75, 50]" :wdth="120" />
    <PieChart :value="65" :wght="700" />
  </div>
</template>

1. Install components

BarChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/svelte-bar-chart.json

Sparkline npx shadcn@latest add https://imaimai17468.github.io/typechart/r/svelte-sparkline.json

PieChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/svelte-pie-chart.json

2. Use in your project

<script>
  import { BarChart, Sparkline, PieChart } from "$lib/components/typechart";
</script>

<BarChart values={[30, 70, 50, 40, 80]} />
<Sparkline values={[20, 55, 35, 75, 50]} wdth={120} />
<PieChart value={65} wght={700} />

1. Install components

BarChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/solid-bar-chart.json

Sparkline npx shadcn@latest add https://imaimai17468.github.io/typechart/r/solid-sparkline.json

PieChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/solid-pie-chart.json

2. Use in your project

import { BarChart, Sparkline, PieChart } from "~/components/typechart";

export function Dashboard() {
  return (
    <div>
      <BarChart values={[30, 70, 50, 40, 80]} />
      <Sparkline values={[20, 55, 35, 75, 50]} wdth={120} />
      <PieChart value={65} wght={700} />
    </div>
  );
}

1. Install components

BarChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/astro-bar-chart.json

Sparkline npx shadcn@latest add https://imaimai17468.github.io/typechart/r/astro-sparkline.json

PieChart npx shadcn@latest add https://imaimai17468.github.io/typechart/r/astro-pie-chart.json

2. Use in your project

---
import { BarChart, Sparkline, PieChart } from "../components/typechart";
---

<BarChart values={[30, 70, 50, 40, 80]} />
<Sparkline values={[20, 55, 35, 75, 50]} wdth={120} />
<PieChart value={65} wght={700} />

API Reference

Props for each chart component.

BarChart

Prop	Type	Default	Description
`values`	`number[]`	required	Array of numbers, max 20 items. Values over 100 are auto-normalized (scaled so the max becomes 100)
`wdth`	`number`	`100`	Font width axis, range 50–150
`wght`	`number`	`400`	Font weight axis, range 100–900
`className`	`string`	—	Additional CSS class(es)
`ariaLabel`	`string`	auto-generated	Accessible label for screen readers

Sparkline

Prop	Type	Default	Description
`values`	`number[]`	required	Array of numbers, max 20 items. Values over 100 are auto-normalized (scaled so the max becomes 100)
`wdth`	`number`	`100`	Font width axis, range 50–150
`wght`	`number`	`400`	Font weight axis, range 100–900
`className`	`string`	—	Additional CSS class(es)
`ariaLabel`	`string`	auto-generated	Accessible label for screen readers

PieChart

Prop	Type	Default	Description
`value`	`number`	required	Single value 0–100 representing percentage. Values over 100 are clamped
`wdth`	`number`	`100`	Font width axis, range 50–150
`wght`	`number`	`400`	Font weight axis, range 100–900
`className`	`string`	—	Additional CSS class(es)
`ariaLabel`	`string`	auto-generated	Accessible label for screen readers

How It Works

typechart uses the Datatype variable font to render charts. No SVG, no Canvas, no charting library — just text and a font.

Write a text string

Chart data is encoded as a simple text syntax. For example, a bar chart with values 30, 70, 50 is written as:

{b:30,70,50}

Apply the Datatype font

The Datatype font contains OpenType ligature rules that detect chart patterns. When font-feature-settings: 'liga' 1, 'calt' 1 is enabled, the font substitutes the text with chart glyphs.

.typechart { font-family: 'Datatype'; }

Tune with variable font axes

The font has two axes: wdth (50–150) controls spacing, wght (100–900) controls thickness. Adjust them via CSS font-variation-settings.

{b:30,60,80,45,70}

wdth: 100 wght: 400

Why Components?

The font alone works great — but raw font syntax in production code has rough edges. typechart wraps it in framework-native components so you don't have to.

Accessibility built in

Every chart renders with role="img" and an auto-generated aria-label. Screen readers announce "Bar chart: 30, 70, 50" instead of seeing cryptic font syntax.

Input validation

Values over 100 are auto-normalized (scaled so the max becomes 100). Negative values are clamped to 0, and arrays are trimmed to 20 items. You can pass raw data like [1200, 3400, 800] directly.

Type-safe props

Pass values, wdth, wght as typed props instead of hand-assembling {b:30,70,50} strings and font-variation-settings CSS.

Framework-native DX

Install via shadcn CLI for React, Vue, Svelte, Solid, or Astro. Each wrapper is a single file — copy-paste friendly, zero runtime dependencies beyond the font.

typechart is built on top of the Datatype variable font by Frank Tisellano. Licensed under the SIL Open Font License.

Datatype on GitHub Official Site X (@franktisellano) GitHub (@franktisellano)