Basic Example with Width/Height
Input:
[
[
1,
2
],
[
2,
4
],
[
3,
6
],
[
4,
8
]
]Options:
{
width: 30,
height: 15
}
▲
8┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
6┤ ┏━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
2┤━━━━━━━━━┛
└┬─────────┬────────┬─────────┬▶
1 2 3 4
Logarithmic Scale
Input:
[
[
0,
0
],
[
1,
0.6931471805599453
],
[
2,
1.0986122886681096
],
[
3,
1.3862943611198906
],
[
4,
1.6094379124341003
],
[
5,
1.791759469228055
],
[
6,
1.9459101490553132
],
[
7,
2.0794415416798357
],
[
8,
2.1972245773362196
],
[
9,
2.302585092994046
],
[
10,
2.3978952727983707
],
[
11,
2.4849066497880004
],
[
12,
2.5649493574615367
],
[
13,
2.6390573296152584
],
[
14,
2.70805020110221
]
]Options:
{
width: 35,
height: 15
}
▲
2.639┤ ┏━━━
2.485┤ ┏━━━━┛
2.303┤ ┏━━━━┛
2.079┤ ┏━━━━┛
1.946┤ ┏━┛
1.792┤ ┏━━┛
1.609┤ ┏━┛
1.386┤ ┏━━┛
1.099┤ ┏━┛
│ ┃
0.693┤ ┏━━┛
│ ┃
│ ┃
│ ┃
0┤━┛
└┬─┬──┬─┬──┬─┬──┬─┬─┬──┬─┬──┬─┬──┬─┬▶
0 1 2 3 4 5 6 7 8 910 1112 1314
Exponential Growth
Input:
[
[
0,
1
],
[
1,
1.4142135623730951
],
[
2,
2
],
[
3,
2.82842712474619
],
[
4,
4
],
[
5,
5.65685424949238
],
[
6,
8
],
[
7,
11.31370849898476
],
[
8,
16
],
[
9,
22.62741699796952
],
[
10,
32
],
[
11,
45.25483399593904
],
[
12,
64
],
[
13,
90.50966799187808
],
[
14,
128
]
]Options:
{
width: 35,
height: 15
}
▲
128┤ ┏━
│ ┃
│ ┃
│ ┃
90.51┤ ┏━┛
│ ┃
│ ┃
64┤ ┏━━┛
│ ┃
45.255┤ ┏━┛
│ ┃
32┤ ┏━━┛
16┤ ┏━━━━┛
5.657┤ ┏━━━━━━┛
1┤━━━━━━━━━━━┛
└┬─┬──┬─┬──┬─┬──┬─┬─┬──┬─┬──┬─┬──┬─┬▶
0 1 2 3 4 5 6 7 8 910 1112 1314
With Area Fill
Input:
[
[
0,
1
],
[
1,
1.5
],
[
2,
2
],
[
3,
2.5
],
[
4,
3
],
[
5,
3.5
]
]Options:
{
width: 20,
height: 10,
fillArea: true
}
▲
3.5┤ ██
│ ██
3┤ ██████
│ ██████
2.5┤ ██████████
2┤ █████████████
│ █████████████
1.5┤ █████████████████
│ █████████████████
1┤████████████████████
└┬───┬───┬──┬───┬───┬▶
0 1 2 3 4 5
Custom Thresholds
Input:
[
[
1,
2
],
[
2,
5
],
[
3,
8
],
[
4,
3
],
[
5,
7
],
[
6,
1
]
]Options:
{
width: 30,
height: 10,
thresholds: [
{
y: 5
},
{
x: 3
}
]
}
▲ ┃
8┤ ┏┃━━━┓
7┤ ┃┃ ┃ ┏━━━━━┓
│ ┃┃ ┃ ┃ ┃
│ ┃┃ ┃ ┃ ┃
5┤━━━━━━━━━━━━┃━━━━━━━━━━━━━━━━━━
│ ┃ ┃ ┃ ┃ ┃
3┤ ┃ ┃ ┗━━━━━┛ ┃
│ ┃ ┃ ┃
2┤━━━━━┛ ┃ ┃
1┤ ┃ ┗━
└┬─────┬─────┬────┬─────┬─────┬▶
1 2 3 4 5 6
With points
Input:
[
[
1,
2
],
[
2,
5
],
[
3,
8
],
[
4,
3
],
[
5,
7
],
[
6,
1
]
]Options:
{
width: 30,
height: 10,
points: [
{
y: 5,
x: 2
},
{
x: 3,
y: 2
}
]
}
▲
8┤ ┏━━━━┓
7┤ ┃ ┃ ┏━━━━━┓
│ ┃ ┃ ┃ ┃
│ ┃ ┃ ┃ ┃
5┤ ┏●━━━━┛ ┃ ┃ ┃
│ ┃ ┃ ┃ ┃
3┤ ┃ ┗━━━━━┛ ┃
│ ┃ ┃
2┤━━━━━┛ ● ┃
1┤ ┗━
└┬─────┬─────┬────┬─────┬─────┬▶
1 2 3 4 5 6
With Custom Axis Center
Input:
[
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
],
[
3,
7
]
]Options:
{
width: 30,
height: 10,
axisCenter: [
0,
0
]
}
▲
7┤ ┏━
│ ┃
5┤ ┏━━━━┛
│ ┃
3┤ ┏━━━━┛
│ ┃
2┤━━━┛
┏━━━1┤
┬────┬────┬───0┼───┬────┬────┬─▶
-3━━━-2 -1 -10 1 2 3
│
Bar Chart
Input:
[
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
],
[
3,
-7
]
]Options:
{
mode: "bar",
width: 30,
height: 20,
axisCenter: [
0,
0
]
}
▲ █
5┤ █
│ █
│ █ █
3┤ █ █
│ █ █
█ 2┤ █ █
█ 1┤ █ █
█ █ │ █ █
┬────┬────┬───0┼───┬────┬────┬─▶
-3 -2 -1 -10 1 2 3
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
-7┤
│
Horizontal Bar Chart
Input:
[
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
]
]Options:
{
mode: "horizontalBar",
width: 30,
height: 20,
axisCenter: [
0,
0
]
}
▲
5┤████████████
│
│
│
│
│
3┤██████
│
│
2┤
│
│
│
████1┤
│
│
┬─────┬─────┬───0┼─────┬─────┬─▶
-3 -2 -1 0 1 2
│
███████████████-1┤
│
With Title and Labels
Input:
[
[
0,
1
],
[
1,
2
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
]Options:
{
width: 30,
height: 10,
title: "Sample Plot",
xLabel: "X-Axis",
yLabel: "Y-Axis"
}
Sample Plot
▲
25┤ ┏━
│ ┃
│ ┃
Y16┤ ┏━━━━━┛
- │ ┃
A │ ┃
x 9┤ ┏━━━━━┛
i │ ┃
s 4┤ ┏━━━━┛
1┤━━━━━━━━━━━┛
└┬─────┬─────┬────┬─────┬─────┬▶
0 1 2 3 4 5
X-Axis
With Legend
Input:
[
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
],
[
[
0,
1
],
[
1,
3
],
[
2,
6
]
]
]Options:
{
width: 30,
height: 10,
legend: {
position: "bottom",
series: [
"Series 1",
"Series 2"
]
}
}
▲
6┤ ┏━
│ ┃
│ ┃
│ ┃
4┤ ┃━
3┤ ┏━━━━━━━━━━━━━┛
│ ┃ ┃
2┤ ┃━━━━━━━━━━━━━┛
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬─────────────┬▶
0 1 2
█ Series 1
█ Series 2
With complex Legend
Input:
[
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
],
[
[
0,
1
],
[
1,
3
],
[
2,
6
]
]
]Options:
{
title: "Legend",
width: 30,
points: [
{
x: 1,
y: 2
},
{
x: 2,
y: 4
}
],
thresholds: [
{
x: 1,
y: 2
}
],
height: 10,
legend: {
position: "right",
series: [
"S1",
"S2"
],
thresholds: [
"T1"
],
points: [
"P1",
"P2"
]
}
}
Legend
▲ ┃ █ S1
6┤ ┃ ┏━ █ S2
│ ┃ ┃
│ ┃ ┃ ┃ T1
│ ┃ ┃
4┤ ┃ ┃● ● P1
3┤ ┏┃━━━━━━━━━━━━┛ ● P2
│ ┃┃ ┃
2┤━━━━━━━━━━━━━━━●━━━━━━━━━━━━━━━
│ ┃┃
1┤━━━━━━━━━━━━━━┛┃
└┬──────────────┬─────────────┬▶
0 1 2
Bar chart
Input:
[
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
]
]Options:
{
width: 30,
mode: "bar",
height: 10
}
▲ █
4┤ █
│ █
│ █
│ █
│ █
│ █ █
2┤ █ █
│ █ █
│█ █ █
1┤█ █ █
└┬──────────────┬─────────────┬▶
0 1 2
Bar chart with negative values and axis center
Input:
[
[
[
0,
1
],
[
1,
2
],
[
2,
4
],
[
3,
-4
],
[
4,
-2
]
]
]Options:
{
width: 30,
mode: "bar",
height: 10,
axisCenter: [
0,
0
]
}
▲ █
4┤ █
│ █ █
2┤ █ █
1┤ █ █
├──────┬───────┬──────┬──────┬─▶
0 1 2 3 4
│ █ █
-2┤ █
│ █
-4┤
│
Horizontal bar chart
Input:
[
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
]
]Options:
{
width: 30,
mode: "horizontalBar",
height: 10
}
▲
4┤█████████████████████████████
│
│
│
│
│
2┤███████████████
│
│
1┤
└┬──────────────┬─────────────┬▶
0 1 2
Custom Formatter
Input:
[
[
0,
1
],
[
1,
4
],
[
2,
9
],
[
3,
16
],
[
4,
25
]
]Options:
{
width: 30,
height: 10,
formatter: (a,{axis:b})=>"x"===b?String.fromCharCode(65+a):a
}
▲
25┤ ┏━
│ ┃
│ ┃
16┤ ┏━━━━━━┛
│ ┃
│ ┃
9┤ ┏━━━━━━┛
│ ┃
4┤ ┏━━━━━━━┛
1┤━━━━━━┛
└┬──────┬───────┬──────┬──────┬▶
A B C D E
Not shareable via URL: this example includes values (for example functions) that cannot be safely serialized to query parameters.