MARKVIS 2CHARTS AS TEXT

Charts as text in Markdown.

Write a short chart block. markvis draws it as plain SVG wherever Markdown is rendered. Where it cannot draw, the numbers stay as a table.

Get started GitHub

README.mdThat is the whole language. Click the text to try it.

type: bar
layout: stacked
title: US energy, 2023
unit: quads
x: source
y: quads
series: sector

source,sector,quads
Petroleum,Transport,24.9
Petroleum,Industry,8.6
Petroleum,Buildings,1.8
Natural gas,Electricity,13.3
Natural gas,Industry,10.9
Natural gas,Buildings,8.1
Coal,Electricity,7.2
Nuclear,Electricity,8.1
Renewables,Electricity,3.2
Renewables,Industry,2.4

58 kB gzip · 0 dependencies · under 1 ms a chart · plain SVG

Data: US EIA, Monthly Energy Review 2023Click the text to edit itOpen in Play

Use it

Four ways in. All of them draw the same chart.

01

One script tag

<script src="https://cdn.jsdelivr.net/npm/markvis@2/dist/markvis.min.js"></script>

In a page or a Markdown file. Every chart block draws. more →

02

JavaScript

import { render } from "markvis";
el.innerHTML = render(block).html;

One call. It never throws. more →

03

React

import { Markvis } from "markvis/react";
<Markvis source={block} />

Follows its container. Streams in react-markdown. more →

04

GitHub

npx markvis bake README.md

Writes a picture github.com can show. The block stays. more →

Your colors

The chart reads the page. Set a few CSS variables and every chart follows your text color, your grid, your series hues; switch to dark and nothing redraws. Theming

.page {
  --markvis-ink: #0b1a4a;
  --markvis-muted: #5a6a8a;
  --markvis-grid: #0b1a4a;
  --markvis-paper: #ffffff;
  --markvis-series-1: #002fa7;
  --markvis-series-2: #0f766e;
  --markvis-series-3: #b45309;
  --markvis-series-4: #7c3aed;
}

Leave them unset and the chart uses its own defaults.

Light page

Dark page

Seventeen kinds of chart

bar, line, area, scatter, pie, hist, heatmap, funnel, waterfall, radar, gauge, sankey, treemap, dumbbell, bullet, boxplot, calendar. That is the set, and each one is a block you can copy.

bar

Comparing categories, in the order written

block ▾

```chart
markvis: 2
type: bar
title: Mar led Midtown box office at 9.2k tickets
unit: tickets
x: month
y: tickets

month,tickets
Sep,5200
Oct,6100
Nov,7800
Dec,8500
Jan,4800
Feb,7200
Mar,9200
Apr,6900
```

line

A value over ordered steps or time

block ▾

```chart
type: line
title: Walk-up still leads member through week 12
x: week
y: count
series: channel

week,channel,count
W1,walk-up,64
W1,member,28
W2,walk-up,68
W2,member,32
W3,walk-up,71
W3,member,35
W4,walk-up,69
W4,member,38
W5,walk-up,74
W5,member,41
W6,walk-up,72
W6,member,44
W7,walk-up,75
W7,member,47
W8,walk-up,73
W8,member,50
W9,walk-up,76
W9,member,53
W10,walk-up,74
W10,member,55
W11,walk-up,77
W11,member,57
W12,walk-up,78
W12,member,59
```

area

A line with the volume under it

block ▾

```vis
type: area
title: Day 6 held the deepest queue at 48 holds
unit: holds
x: day
y: holds

day,holds
D1,18
D2,24
D3,31
D4,37
D5,42
D6,48
D7,40
D8,33
D9,28
D10,22
```

scatter

Two numbers per row

block ▾

```chart
type: scatter
title: Rent climbs as commute shortens on the Beltline
x: commute_min
y: rent_index

commute_min,rent_index
8,142
12,138
15,131
18,128
22,121
25,118
28,112
32,108
35,102
40,96
45,91
52,84
```

pie

Parts of a whole, as given

block ▾

```markvis
type: pie
title: MARTA takes the largest mode share
x: mode
y: count

mode,count
MARTA,38
Walk,24
Drive,22
Bike,11
Other,8
```

hist

How raw numbers spread

block ▾

```chart
type: hist
title: Most API samples stay under 40 ms
unit: ms
x: ms

ms
18
19
20
22
23
24
25
25
26
27
28
29
30
32
34
36
38
42
48
55
```

heatmap

A value per pair of categories

block ▾

```chart
type: heatmap
title: Eight o'clock still packs Five Points entries
x: hour
y: entries
series: weekday

hour,weekday,entries
6am,Mon,180
7am,Mon,420
8am,Mon,880
9am,Mon,610
12pm,Mon,340
5pm,Mon,760
6pm,Mon,510
7pm,Mon,290
6am,Tue,165
7am,Tue,390
8am,Tue,910
9am,Tue,640
12pm,Tue,355
5pm,Tue,790
6pm,Tue,530
7pm,Tue,305
6am,Wed,175
7am,Wed,410
8am,Wed,870
9am,Wed,600
12pm,Wed,330
5pm,Wed,740
6pm,Wed,495
7pm,Wed,280
6am,Thu,170
7am,Thu,405
8am,Thu,895
9am,Thu,625
12pm,Thu,345
5pm,Thu,770
6pm,Thu,520
7pm,Thu,295
6am,Fri,155
7am,Fri,380
8am,Fri,840
9am,Fri,580
12pm,Fri,360
5pm,Fri,820
6pm,Fri,560
7pm,Fri,340
```

funnel

Drop-off across ordered stages

block ▾

```chart
type: funnel
title: First ride still keeps 140 of 1,200 Midtown visits
x: stage
y: people

stage,people
Visit,1200
Signup,480
Verify,310
Activate,180
First ride,140
Week-4 return,95
```

waterfall

Signed steps from a start to an end

block ▾

```chart
type: waterfall
title: Concessions still cover Midtown rent after payroll
unit: USD k
x: step
y: delta

step,delta
Ticket sales,180
Concessions,64
Merch,28
Sponsorships,22
Payroll,-90
Rent,-42
Utilities,-12
Marketing,-18
```

radar

Several measures on one scale

block ▾

```chart
type: radar
title: Stage crew still leads box office on coverage
x: skill
y: score
series: crew

skill,crew,score
Speed,Stage,80
Range,Stage,72
Coverage,Stage,90
Safety,Stage,86
Cueing,Stage,84
Speed,Box,64
Range,Box,70
Coverage,Box,58
Safety,Box,74
Cueing,Box,61
Speed,Usher,71
Range,Usher,66
Coverage,Usher,82
Safety,Usher,88
Cueing,Usher,69
```

gauge

One value against a range

block ▾

```chart
type: gauge
min: 90
max: 100
title: Five Points uptime still holds at 99.4
x: station
y: uptime
unit: %

station,uptime
Five Points,99.4
```

sankey

Flows between nodes

block ▾

```chart
type: sankey
title: Five Points still feeds Midtown before Arts Center
x: from
y: riders
series: to

from,to,riders
North Springs,Five Points,620
Airport,Five Points,540
Doraville,Five Points,310
Five Points,Midtown,880
Five Points,Peachtree Center,410
Five Points,Georgia State,240
Midtown,Arts Center,390
Peachtree Center,Arts Center,210
Airport,College Park,160
Georgia State,King Memorial,95
```

treemap

Sizes in a flat or two-level hierarchy

block ▾

```chart
type: treemap
title: Red Line still carries Midtown mornings
x: station
y: boardings
series: line

station,line,boardings
Five Points,Red,4200
Midtown,Red,3100
Arts Center,Red,1800
North Springs,Red,1400
Lindbergh,Red,1600
Airport,Gold,3600
Peachtree Center,Gold,2200
College Park,Gold,1100
Doraville,Gold,980
Lindbergh,Green,900
Bankhead,Green,720
Ashby,Blue,640
```

dumbbell

Two values per category and the change

block ▾

```chart
type: dumbbell
title: Every MARTA line got faster after the signal upgrade
unit: min
x: line
y: minutes
series: period

line,period,minutes
Red,before,41
Red,after,36
Gold,before,39
Gold,after,35
Blue,before,33
Blue,after,31
Green,before,24
Green,after,23
```

bullet

Actuals against targets

block ▾

```chart
type: bullet
title: Only West is short of its Q3 quota
unit: USD k
x: region
y: booked
target: quota

region,booked,quota
North,420,400
South,365,350
East,512,480
West,288,360
```

boxplot

Distributions from raw rows

block ▾

```chart
type: boxplot
title: Search answers fastest but has the longest tail
unit: ms
x: service
y: latency

service,latency
Search,42
Search,38
Search,45
Search,40
Search,39
Search,44
Search,41
Search,120
Checkout,88
Checkout,92
Checkout,85
Checkout,95
Checkout,90
Checkout,99
Profile,61
Profile,58
Profile,70
Profile,66
Profile,63
Profile,74
```

calendar

A value per day

block ▾

```chart
type: calendar
title: Runs clustered on weekends in March
unit: km
x: date
y: km

date,km
2026-03-01,12
2026-03-04,5
2026-03-07,14
2026-03-08,10
2026-03-11,6
2026-03-14,16
2026-03-15,
2026-03-21,13
2026-03-22,11
2026-03-28,18
2026-03-29,9
```

Write the numbers. Get the chart.