Source
plot([
[
1,
2
],
[
2,
4
],
[
3,
6
],
[
4,
8
]
], {
width: 30,
height: 15
});Examples for 6.0.0
Browse runnable examples for every simple-ascii-chart method with generated source, terminal output, and plot playground links.
Basic Example with Width/Height
Output
▲
8┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
6┤ ┏━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
2┤━━━━━━━━━┛
└┬─────────┬────────┬─────────┬▶
1 2 3 4
Logarithmic Scale
Source
plot([
[
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
]
], {
width: 35,
height: 15
});Output
▲
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
Source
plot([
[
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
]
], {
width: 35,
height: 15
});Output
▲
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
Source
plot([
[
0,
1
],
[
1,
1.5
],
[
2,
2
],
[
3,
2.5
],
[
4,
3
],
[
5,
3.5
]
], {
width: 20,
height: 10,
fillArea: true
});Output
▲
3.5┤ ██
│ ██
3┤ ██████
│ ██████
2.5┤ ██████████
2┤ █████████████
│ █████████████
1.5┤ █████████████████
│ █████████████████
1┤████████████████████
└┬───┬───┬──┬───┬───┬▶
0 1 2 3 4 5
Custom Thresholds
Source
plot([
[
1,
2
],
[
2,
5
],
[
3,
8
],
[
4,
3
],
[
5,
7
],
[
6,
1
]
], {
width: 30,
height: 10,
thresholds: [
{
y: 5
},
{
x: 3
}
]
});Output
▲ ┃
8┤ ┏┃━━━┓
7┤ ┃┃ ┃ ┏━━━━━┓
│ ┃┃ ┃ ┃ ┃
│ ┃┃ ┃ ┃ ┃
5┤━━━━━━━━━━━━┃━━━━━━━━━━━━━━━━━━
│ ┃ ┃ ┃ ┃ ┃
3┤ ┃ ┃ ┗━━━━━┛ ┃
│ ┃ ┃ ┃
2┤━━━━━┛ ┃ ┃
1┤ ┃ ┗━
└┬─────┬─────┬────┬─────┬─────┬▶
1 2 3 4 5 6
With points
Source
plot([
[
1,
2
],
[
2,
5
],
[
3,
8
],
[
4,
3
],
[
5,
7
],
[
6,
1
]
], {
width: 30,
height: 10,
points: [
{
y: 5,
x: 2
},
{
x: 3,
y: 2
}
]
});Output
▲
8┤ ┏━━━━┓
7┤ ┃ ┃ ┏━━━━━┓
│ ┃ ┃ ┃ ┃
│ ┃ ┃ ┃ ┃
5┤ ┏●━━━━┛ ┃ ┃ ┃
│ ┃ ┃ ┃ ┃
3┤ ┃ ┗━━━━━┛ ┃
│ ┃ ┃
2┤━━━━━┛ ● ┃
1┤ ┗━
└┬─────┬─────┬────┬─────┬─────┬▶
1 2 3 4 5 6
With Custom Axis Center
Source
plot([
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
],
[
3,
7
]
], {
width: 30,
height: 10,
axisCenter: [
0,
0
]
});Output
▲
7┤ ┏━
│ ┃
5┤ ┏━━━━┛
│ ┃
3┤ ┏━━━━┛
│ ┃
2┤━━━┛
┏━━━1┤
┬────┬────┬───0┼───┬────┬────┬─▶
-3━━━-2 -1 -10 1 2 3
│
Bar Chart
Source
plot([
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
],
[
3,
-7
]
], {
mode: "bar",
width: 30,
height: 20,
axisCenter: [
0,
0
]
});Output
▲ █
5┤ █
│ █
│ █ █
3┤ █ █
│ █ █
█ 2┤ █ █
█ 1┤ █ █
█ █ │ █ █
┬────┬────┬───0┼───┬────┬────┬─▶
-3 -2 -1 -10 1 2 3
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
-7┤
│
Horizontal Bar Chart
Source
plot([
[
-3,
-1
],
[
-2,
0
],
[
-1,
1
],
[
0,
2
],
[
1,
3
],
[
2,
5
]
], {
mode: "horizontalBar",
width: 30,
height: 20,
axisCenter: [
0,
0
]
});Output
▲
5┤████████████
│
│
│
│
│
3┤██████
│
│
2┤
│
│
│
████1┤
│
│
┬─────┬─────┬───0┼─────┬─────┬─▶
-3 -2 -1 0 1 2
│
███████████████-1┤
│
With Title and Labels
Source
plot([
[
0,
1
],
[
1,
2
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
], {
width: 30,
height: 10,
title: "Sample Plot",
xLabel: "X-Axis",
yLabel: "Y-Axis"
});Output
Sample Plot
▲
25┤ ┏━
│ ┃
│ ┃
Y16┤ ┏━━━━━┛
- │ ┃
A │ ┃
x 9┤ ┏━━━━━┛
i │ ┃
s 4┤ ┏━━━━┛
1┤━━━━━━━━━━━┛
└┬─────┬─────┬────┬─────┬─────┬▶
0 1 2 3 4 5
X-Axis
With Legend
Source
plot([
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
],
[
[
0,
1
],
[
1,
3
],
[
2,
6
]
]
], {
width: 30,
height: 10,
legend: {
position: "bottom",
series: [
"Series 1",
"Series 2"
]
}
});Output
▲
6┤ ┏━
│ ┃
│ ┃
│ ┃
4┤ ┃━
3┤ ┏━━━━━━━━━━━━━┛
│ ┃ ┃
2┤ ┃━━━━━━━━━━━━━┛
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬─────────────┬▶
0 1 2
█ Series 1
█ Series 2
With complex Legend
Source
plot([
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
],
[
[
0,
1
],
[
1,
3
],
[
2,
6
]
]
], {
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"
]
}
});Output
Legend
▲ ┃ █ S1
6┤ ┃ ┏━ █ S2
│ ┃ ┃
│ ┃ ┃ ┃ T1
│ ┃ ┃
4┤ ┃ ┃● ● P1
3┤ ┏┃━━━━━━━━━━━━┛ ● P2
│ ┃┃ ┃
2┤━━━━━━━━━━━━━━━●━━━━━━━━━━━━━━━
│ ┃┃
1┤━━━━━━━━━━━━━━┛┃
└┬──────────────┬─────────────┬▶
0 1 2
Bar chart
Source
plot([
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
]
], {
width: 30,
mode: "bar",
height: 10
});Output
▲ █
4┤ █
│ █
│ █
│ █
│ █
│ █ █
2┤ █ █
│ █ █
│█ █ █
1┤█ █ █
└┬──────────────┬─────────────┬▶
0 1 2
Bar chart with negative values and axis center
Source
plot([
[
[
0,
1
],
[
1,
2
],
[
2,
4
],
[
3,
-4
],
[
4,
-2
]
]
], {
width: 30,
mode: "bar",
height: 10,
axisCenter: [
0,
0
]
});Output
▲ █
4┤ █
│ █ █
2┤ █ █
1┤ █ █
├──────┬───────┬──────┬──────┬─▶
0 1 2 3 4
│ █ █
-2┤ █
│ █
-4┤
│
Horizontal bar chart
Source
plot([
[
[
0,
1
],
[
1,
2
],
[
2,
4
]
]
], {
width: 30,
mode: "horizontalBar",
height: 10
});Output
▲
4┤█████████████████████████████
│
│
│
│
│
2┤███████████████
│
│
1┤
└┬──────────────┬─────────────┬▶
0 1 2
Custom Formatter
Source
plot([
[
0,
1
],
[
1,
4
],
[
2,
9
],
[
3,
16
],
[
4,
25
]
], {
width: 30,
height: 10,
formatter: (a,{axis:b})=>"x"===b?String.fromCharCode(65+a):a
});Output
▲
25┤ ┏━
│ ┃
│ ┃
16┤ ┏━━━━━━┛
│ ┃
│ ┃
9┤ ┏━━━━━━┛
│ ┃
4┤ ┏━━━━━━━┛
1┤━━━━━━┛
└┬──────┬───────┬──────┬──────┬▶
A B C D E
Not shareable via URL: this example includes values that cannot be safely serialized to query parameters.
renderChart: Named line series
Source
renderChart({
height: 9,
series: [
{
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "requests",
name: "Requests"
}
],
title: "Request volume",
width: 34
});Output
Request volume
▲
8┤ ┏━
│ ┃
│ ┃
│ ┃
5┤ ┏━━━━━━━━━━┓ ┃
│ ┃ ┃ ┃
│ ┃ ┃ ┃
3┤ ┃ ┗━━━━━━━━━━┛
2┤━━━━━━━━━━┛
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
renderChart: Categorical X axis
Source
renderChart({
height: 9,
series: [
{
data: [
[
"Mon",
4
],
[
"Tue",
7
],
[
"Wed",
5
],
[
"Thu",
9
]
],
id: "deployments"
}
],
width: 36,
xAxis: {
label: "weekday",
scale: "band"
},
yAxis: {
label: "deployments"
}
});Output
▲
d9┤ ┏━
e │ ┃
p │ ┃
l7┤ ┏━━━━━━━━┓ ┃
o │ ┃ ┃ ┃
y │ ┃ ┃ ┃
m5┤ ┃ ┗━━━━━━━━┛
e │ ┃
n4┤ ━━━━━━━━┛
t └────┬────────┬────────┬────────┬────▶
s Mon Tue Wed Thu
weekday
renderChart: Mixed bar and line series
Source
renderChart({
height: 10,
legend: {
position: "bottom",
series: true
},
series: [
{
data: [
[
"Mon",
4
],
[
"Tue",
7
],
[
"Wed",
5
],
[
"Thu",
9
]
],
id: "actual",
mode: "bar"
},
{
data: [
[
"Mon",
5
],
[
"Tue",
6
],
[
"Wed",
7
],
[
"Thu",
8
]
],
id: "target",
interpolation: "linear"
}
],
width: 40,
xAxis: {
scale: "band"
}
});Output
▲ █
9┤ █
│ █
8┤ ┏━━━━
│ █ ┏━━━━━┛ █
7┤ █ ┏━━━━┛ █
6┤ ┏━━━━┛ █
│ ┏━━━━━┛█ █ █
5┤ ━━━┛ █ █ █
│ █ █ █ █
4┤ █ █ █ █
└─────┬─────────┬────────┬─────────┬─────▶
Mon Tue Wed Thu
█ actual
█ target
renderChart: Grouped bars with value labels
Source
renderChart({
barLayout: "grouped",
height: 10,
series: [
{
data: [
[
"Mon",
4
],
[
"Tue",
7
],
[
"Wed",
5
],
[
"Thu",
9
]
],
id: "web",
mode: "bar"
},
{
data: [
[
"Mon",
3
],
[
"Tue",
5
],
[
"Wed",
6
],
[
"Thu",
4
]
],
id: "mobile",
mode: "bar"
}
],
valueLabels: true,
width: 42,
xAxis: {
scale: "band"
}
});Output
▲ 9
9┤ 7 █
│ █ 6 █
7┤ █5 5█ █
6┤ 4 ██ ██ █4
5┤ █3 ██ ██ ██
4┤ ██ ██ ██ ██
3┤ ██ ██ ██ ██
│ ██ ██ ██ ██
│ ██ ██ ██ ██
├────┬─────────┬──────────┬─────────┬──────▶
│ Mon Tue Wed Thu
renderChart: Stacked bars
Source
renderChart({
barLayout: "stacked",
height: 10,
legend: {
position: "bottom",
series: true
},
series: [
{
data: [
[
"Mon",
4
],
[
"Tue",
7
],
[
"Wed",
5
],
[
"Thu",
9
]
],
id: "cached",
mode: "bar"
},
{
data: [
[
"Mon",
2
],
[
"Tue",
3
],
[
"Wed",
2
],
[
"Thu",
4
]
],
id: "uncached",
mode: "bar"
}
],
width: 42,
xAxis: {
scale: "band"
}
});Output
▲
13┤ █
│ █ █
10┤ █ █
9┤ █ █ █
7┤ █ █ █ █
6┤ █ █ █ █
4┤ █ █ █ █
│ █ █ █ █
│ █ █ █ █
├────┬─────────┬──────────┬─────────┬──────▶
│ Mon Tue Wed Thu
█ cached
█ uncached
renderChart: Secondary Y axis
Source
renderChart({
height: 10,
legend: {
position: "bottom",
series: true
},
secondaryYAxis: {
domain: [
0,
10
],
label: "errors"
},
series: [
{
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "latency",
name: "Latency"
},
{
data: [
[
0,
1
],
[
1,
4
],
[
2,
2
],
[
3,
6
]
],
id: "errors",
name: "Errors",
yAxis: "secondary"
}
],
width: 42,
yAxis: {
domain: [
0,
10
],
label: "milliseconds"
}
});Output
▲ ▲
m │ │
i │ │
l8┤ ┏━│ e
l │ ┃ │ r
i5┤ ┏━━━━━━━━━━━━┓ ┏━├6 r
s │ ┏━━━━━━━━━━━━┓ ┃ ├4 o
e3┤ ┃ ┃━━━━━━━━━━━━━┃ │ r
c2┤━━━━━━━━━━━━━┃ ┗━━━━━━━━━━━━━┛ ├2 s
o │━━━━━━━━━━━━━┛ ├1
n0┤ │
d └┬─────────────┬────────────┬─────────────┬┘
s 0 1 2 3
█ Latency
█ Errors
renderChart: Annotations
Source
renderChart({
annotations: [
{
axis: "y",
from: 6,
id: "warning-zone",
to: 8,
type: "span"
},
{
id: "peak",
text: "peak",
type: "text",
x: 3,
y: 8
},
{
from: [
0,
2
],
id: "trend",
to: [
3,
8
],
type: "arrow"
},
{
id: "variance",
type: "errorBar",
x: 1,
y: 5,
yError: 1
}
],
height: 11,
series: [
{
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "requests"
}
],
width: 42,
yAxis: {
domain: [
0,
10
]
}
});Output
▲
│
│
8┤░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░···↗
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░·······░░┃░
│░░░░░░░░░░░░░░┬░░░░░░░░░·······░░░░░░░░░┃░
5┤ ┏┼━━━······━━┓ ┃
│ ···┴··· ┃ ┃
3┤ ······· ┃ ┗━━━━━━━━━━━━━┛
2┤····━━━━━━━━━┛
│
│
└┬─────────────┬────────────┬─────────────┬▶
0 1 2 3
renderChart: Thresholds and points
Source
renderChart({
height: 10,
legend: {
points: true,
position: "bottom",
series: true,
thresholds: true
},
points: [
{
id: "release",
name: "Release",
x: 2,
y: 3
}
],
series: [
{
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "requests"
}
],
thresholds: [
{
id: "limit",
name: "Limit",
y: 6
}
],
width: 40
});Output
▲
8┤ ┏━
│ ┃
│ ┃
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5┤ ┏━━━━━━━━━━━━┓ ┃
│ ┃ ┃ ┃
│ ┃ ┃ ┃
3┤ ┃ ┗●━━━━━━━━━━━┛
│ ┃
2┤━━━━━━━━━━━━┛
└┬────────────┬────────────┬────────────┬▶
0 1 2 3
█ requests
┃ Limit
● Release
renderChart: Braille renderer
Source
renderChart({
height: 8,
renderer: "braille",
series: [
{
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "smooth",
interpolation: "linear"
}
],
width: 32
});Output
▲
8┤ ⡴⠋
│ ⣠⠞⠁
│ ⢀⡴⠃
5┤ ⣀ ⣠⠏
│ ⢀⡤⠞⠉⠙⠲⢤⣀ ⢠⠞⠁
│ ⣠⠖⠋ ⠈⠙⠲⢤⣀ ⢀⡴⠋
3┤ ⣀⡴⠋⠁ ⠈⠙⠲⠞
2┤⡤⠞⠁
└┬─────────┬──────────┬─────────┬▶
0 1 2 3
renderChart: Gradient coloring
Source
renderChart({
height: 9,
series: [
{
coloring: {
by: "y",
colors: [
"ansiBlue",
"ansiCyan",
"ansiGreen"
],
domain: [
0,
8
],
type: "gradient"
},
data: [
[
0,
2
],
[
1,
5
],
[
2,
3
],
[
3,
8
]
],
id: "gradient"
}
],
width: 34
});Output
▲
8┤ ┏━
│ ┃
│ ┃
│ ┃
5┤ ┏━━━━━━━━━━┓ ┃
│ ┃ ┃ ┃
│ ┃ ┃ ┃
3┤ ┃ ┗━━━━━━━━━━┛
2┤━━━━━━━━━━┛
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Basic OHLC chart
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
]
});Output
▲
│ │
│ │ │
115┤ ░ █
│ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
│░ █ ░ │
105┤░ █ ░
│░ │ │
│░ │ │
│░ │
││
││
││
└┬───────────────────┬──────────────────┬───────────────────┬▶
0 1 2 3
candlestick: Title and dimensions
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
title: "Daily OHLC",
width: 34
});Output
Daily OHLC
▲
│ │ │
115┤ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░ │ │
││
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Direction colors
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
style: {
falling: {
color: "ansiRed"
},
rising: {
color: "ansiGreen"
}
},
width: 34
});Output
▲
│ │ │
115┤ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░ │ │
││
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Custom body symbols
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
style: {
falling: {
symbol: "▼"
},
rising: {
symbol: "▲"
},
wick: "│"
},
width: 34
});Output
▲
│ │ │
115┤ ▲ ▼
││ │ ▲ ▼
110┤│ │ ▲ ▼
108┤▲ ▼ ▲ │
105┤▲ ▼ ▲
│▲ │ │
│▲ │ │
││
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Reference thresholds
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
thresholds: [
{
id: "target",
name: "Target",
y: 110
},
{
id: "midpoint",
name: "Midpoint",
x: 2
}
],
width: 36
});Output
▲ ┃
│ ┃ │
115┤ ┃ █
││ │ ┃ █
110┤━━━━━━━━━━━━━━━━━━━━━━━┃━━━━━━━━━━━━━
108┤░ █ ┃ │
105┤░ █ ┃
│░ │ ┃
│░ │ ┃
││ ┃
││ ┃
└┬───────────┬──────────┬───────────┬▶
0 1 2 3
candlestick: Axis domains and labels
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
width: 38,
xAxis: {
label: "session",
ticks: 4
},
yAxis: {
domain: [
90,
120
],
label: "price",
ticks: 4
}
});Output
▲
120┤
│ ░ █
││ │ ░ █
110┤│ │ ░ █
p │░ █ ░ │
r │░ │ │
i100┤░ │
c ││
e │
90┤
└┬───────────┬────────────┬───────────┬▶
0 1 2 3
session
candlestick: Unchanged-price style
Source
candlestick({
data: [
[
0,
100,
108,
96,
100
],
[
1,
100,
112,
98,
107
],
[
2,
107,
109,
101,
103
]
],
height: 10,
style: {
unchanged: {
symbol: "═"
}
},
width: 32
});Output
▲
│ │
│ │
││ │ │
107┤│ ░ █
││ ░ █
103┤│ ░ █
││ ░ │
100┤═ ░
││ │
││
└┬───────────────┬──────────────┬▶
0 1 2
candlestick: Compact dimensions
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 6,
width: 24
});Output
▲
│ │ │
115┤│ │ ░ █
108┤░ █ ░ █
105┤░ █ ░
│░ │ │
││
└┬───────┬──────┬───────┬▶
0 1 2 3
candlestick: Wide dimensions
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 52
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└┬────────────────┬────────────────┬────────────────┬▶
0 1 2 3
candlestick: Tall dimensions
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 16,
width: 32
});Output
▲
│ │
│ │ │
115┤ ░ █
│ │ ░ █
││ │ ░ █
110┤│ │ ░ █
││ │ ░ │
108┤░ █ ░ │
│░ █ ░
105┤░ █ ░
│░ │ │
│░ │ │
│░ │
││
││
││
└┬─────────┬──────────┬─────────┬▶
0 1 2 3
candlestick: Rising-price run
Source
candlestick({
data: [
[
0,
10,
13,
9,
12
],
[
1,
12,
16,
11,
15
],
[
2,
15,
19,
14,
18
],
[
3,
18,
22,
17,
21
]
],
height: 9,
width: 32
});Output
▲
│ │
21┤ ░
18┤ ░ ░
│ ░ │
15┤ ░ ░
│ ░ │
12┤░ ░
│░ │
││
└┬─────────┬──────────┬─────────┬▶
0 1 2 3
candlestick: Falling-price run
Source
candlestick({
data: [
[
0,
21,
22,
17,
18
],
[
1,
18,
19,
14,
15
],
[
2,
15,
16,
11,
12
],
[
3,
12,
13,
8,
9
]
],
height: 9,
width: 32
});Output
▲
││
│█
18┤█ █
││ █ │
15┤ █ █
│ │ █ │
12┤ █ █
9┤ █
│ │
└┬─────────┬──────────┬─────────┬▶
0 1 2 3
candlestick: Monochrome style
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
style: {
falling: {
color: "ansiWhite",
symbol: "█"
},
rising: {
color: "ansiWhite",
symbol: "░"
},
unchanged: {
color: "ansiWhite",
symbol: "─"
}
},
width: 34
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Bright direction colors
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
style: {
falling: {
color: "ansiBrightRed"
},
rising: {
color: "ansiBrightGreen"
},
unchanged: {
color: "ansiBrightYellow"
}
},
width: 34
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Shared symbol overrides
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
symbols: {
candlestick: {
falling: "F",
rising: "R",
unchanged: "U",
wick: "|"
}
},
width: 34
});Output
▲
│ | |
115┤ | R F
│| | R F
110┤| | R F
108┤R F R |
105┤R F R
│R | |
│R
│|
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Hidden X axis
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 34,
xAxis: {
hidden: true
}
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
│
candlestick: Hidden Y axis
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 34,
yAxis: {
hidden: true
}
});Output
│ │
│ ░ █
│ │ ░ █
│ │ ░ █
░ █ ░ │
░ █ ░
░ │ │
░
│
─┬──────────┬──────────┬──────────┬▶
0 1 2 3
candlestick: Hidden X-axis ticks
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 34,
xAxis: {
hideTicks: true,
label: "session"
}
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└──────────────────────────────────▶
session
candlestick: Complete Y-axis labels
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 38,
yAxis: {
showTickLabel: true,
ticks: 5
}
});Output
▲
118┤ │ │
│ │ ░ █
112.5┤│ │ ░ █
││ │ ░ █
107┤░ █ ░ │
│░ █ ░
101.5┤░ │ │
│░
96┤│
└┬───────────┬────────────┬───────────┬▶
0 1 2 3
candlestick: Exact X-axis ticks
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 34,
xAxis: {
ticks: [
0,
2,
3
]
}
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└┬─────────────────────┬──────────┬▶
0 2 3
candlestick: Exact Y-axis ticks
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 36,
yAxis: {
domain: [
90,
120
],
ticks: [
90,
100,
110,
120
]
}
});Output
▲
120┤
│ ░ █
││ │ ░ █
110┤░ █ ░ █
│░ █ ░
100┤░ │ │
││
│
90┤
└┬───────────┬──────────┬───────────┬▶
0 1 2 3
candlestick: Colored X axis
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 34,
xAxis: {
color: "ansiCyan",
label: "session"
}
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
110┤│ │ ░ █
108┤░ █ ░ │
105┤░ █ ░
│░ │ │
│░
││
└┬──────────┬──────────┬──────────┬▶
0 1 2 3
session
candlestick: Colored Y axis
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 9,
width: 36,
yAxis: {
color: "ansiMagenta",
label: "price"
}
});Output
▲
│ │ │
115┤ │ ░ █
││ │ ░ █
p110┤│ │ ░ █
r108┤░ █ ░ │
i105┤░ █ ░
c │░ │ │
e │░
││
└┬───────────┬──────────┬───────────┬▶
0 1 2 3
candlestick: Colored support and resistance
Source
candlestick({
data: [
[
0,
100,
112,
96,
108
],
[
1,
108,
114,
102,
105
],
[
2,
105,
117,
101,
115
],
[
3,
115,
118,
107,
110
]
],
height: 10,
thresholds: [
{
color: "ansiGreen",
id: "support",
y: 100
},
{
color: "ansiRed",
id: "resistance",
y: 115
},
{
color: "ansiCyan",
id: "event",
x: 2
}
],
width: 40
});Output
▲ ┃
│ ┃ │
115┤━━━━━━━━━━━━━━━━━━━━━━━━━━┃━━━━━━━━━━━━━━
││ │ ┃ █
110┤│ │ ┃ █
108┤░ █ ┃ │
105┤░ █ ┃
│░ │ ┃
│━━━━━━━━━━━━━━━━━━━━━━━━━━┃━━━━━━━━━━━━━━
││ ┃
││ ┃
└┬────────────┬────────────┬────────────┬▶
0 1 2 3
candlestick: Narrow decimal range
Source
candlestick({
data: [
[
0,
10.2,
10.8,
10.1,
10.6
],
[
1,
10.6,
11.1,
10.4,
10.9
],
[
2,
10.9,
11.2,
10.5,
10.7
],
[
3,
10.7,
11.4,
10.6,
11.3
]
],
height: 10,
width: 38,
yAxis: {
domain: [
10,
11.5
],
showTickLabel: true
}
});Output
▲
│
│ ░
│ │ │ ░
11┤ │ │ ░
││ ░ █ ░
│░ ░ █ ░
│░ │ │
│░ │
│░
10┤
└┬───────────┬────────────┬───────────┬▶
0 1 2 3
heatmap: Status matrix
Source
heatmap({
data: [
[
"pass",
"pass",
"fail"
],
[
"pass",
"pending",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
]
});Output
● ● ×
● ○ ●heatmap: Row and column labels
Source
heatmap({
columns: [
"Linux",
"macOS",
"Windows"
],
data: [
[
"pass",
"pass",
"fail"
],
[
"pass",
"pending",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
],
rows: [
"Node 22",
"Node 24"
],
title: "Build matrix"
});Output
Build matrix
Linux macOS Windows
Node 22 ● ● ×
Node 24 ● ○ ●heatmap: Colored legend
Source
heatmap({
data: [
[
"ready",
"busy",
"offline"
]
],
legend: true,
levels: [
{
color: "ansiGreen",
label: "Ready",
value: "ready"
},
{
color: "ansiYellow",
label: "Busy",
value: "busy"
},
{
color: "ansiRed",
label: "Offline",
value: "offline"
}
]
});Output
█ █ █
█ Ready █ Busy █ Offlineheatmap: Missing values and custom gaps
Source
heatmap({
data: [
[
1,
null,
2
],
[
2,
1,
null
]
],
levels: [
{
symbol: "·",
value: 1
},
{
symbol: "#",
value: 2
}
],
symbols: {
empty: "?",
gap: " | "
}
});Output
· | ? | #
# | · | ?heatmap: Numeric levels
Source
heatmap({
columns: [
"P50",
"P95",
"P99"
],
data: [
[
1,
2,
3
],
[
2,
3,
3
]
],
levels: [
{
label: "Low",
symbol: "░",
value: 1
},
{
label: "Medium",
symbol: "▒",
value: 2
},
{
label: "High",
symbol: "▓",
value: 3
}
],
rows: [
"API",
"Worker"
]
});Output
P50 P95 P99
API ░ ▒ ▓
Worker ▒ ▓ ▓heatmap: Numeric threshold
Source
heatmap({
data: [
[
42,
68,
83
],
[
35,
79,
null
]
],
threshold: {
aboveColor: "ansiBrightRed",
belowColor: "ansiCyan",
value: 80
}
});Output
░ ░ █
░ ░heatmap: Threshold labels and legend
Source
heatmap({
columns: [
"CPU",
"RAM",
"Disk"
],
data: [
[
45,
72,
91
],
[
63,
88,
54
]
],
legend: true,
rows: [
"web",
"worker"
],
threshold: {
aboveColor: "ansiRed",
aboveLabel: "Alert",
aboveSymbol: "!",
belowColor: "ansiGreen",
belowLabel: "Healthy",
belowSymbol: "·",
value: 80
},
title: "Resource health"
});Output
Resource health
CPU RAM Disk
web · · !
worker · ! ·
· Healthy ! Alertheatmap: Matrix title
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
],
title: "CI status"
});Output
CI status
● ○ ×
○ ● ●heatmap: Column labels
Source
heatmap({
columns: [
"Linux",
"macOS",
"Windows"
],
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
]
});Output
Linux macOS Windows
● ○ ×
○ ● ●heatmap: Row labels
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
],
rows: [
"stable",
"canary"
]
});Output
stable ● ○ ×
canary ○ ● ●heatmap: Default cell symbol
Source
heatmap({
data: [
[
1,
2,
1
],
[
2,
2,
1
]
],
levels: [
{
value: 1
},
{
value: 2
}
],
symbols: {
cell: "◆"
}
});Output
◆ ◆ ◆
◆ ◆ ◆heatmap: Custom empty symbol
Source
heatmap({
data: [
[
"on",
null,
"off"
],
[
null,
"on",
"on"
]
],
levels: [
{
symbol: "+",
value: "on"
},
{
symbol: "-",
value: "off"
}
],
symbols: {
empty: "?"
}
});Output
+ ? -
? + +heatmap: No cell gap
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
],
symbols: {
gap: ""
}
});Output
●○×
○●●heatmap: Wide cell gap
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
symbol: "●",
value: "pass"
},
{
symbol: "○",
value: "pending"
},
{
symbol: "×",
value: "fail"
}
],
symbols: {
gap: " | "
}
});Output
● | ○ | ×
○ | ● | ●heatmap: Categorical colors
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
levels: [
{
color: "ansiGreen",
symbol: "●",
value: "pass"
},
{
color: "ansiYellow",
symbol: "○",
value: "pending"
},
{
color: "ansiRed",
symbol: "×",
value: "fail"
}
]
});Output
● ○ ×
○ ● ●heatmap: Categorical legend labels
Source
heatmap({
data: [
[
"pass",
"pending",
"fail"
],
[
"pending",
"pass",
"pass"
]
],
legend: true,
levels: [
{
label: "Passed",
symbol: "●",
value: "pass"
},
{
label: "Pending",
symbol: "○",
value: "pending"
},
{
label: "Failed",
symbol: "×",
value: "fail"
}
]
});Output
● ○ ×
○ ● ●
● Passed ○ Pending × Failedheatmap: Single row
Source
heatmap({
columns: [
"API",
"Web",
"Worker",
"Queue"
],
data: [
[
"up",
"up",
"down",
"up"
]
],
levels: [
{
symbol: "▲",
value: "up"
},
{
symbol: "▼",
value: "down"
}
],
rows: [
"prod"
]
});Output
API Web Worker Queue
prod ▲ ▲ ▼ ▲heatmap: Single column
Source
heatmap({
columns: [
"Status"
],
data: [
[
"up"
],
[
"down"
],
[
"up"
]
],
levels: [
{
symbol: "▲",
value: "up"
},
{
symbol: "▼",
value: "down"
}
],
rows: [
"API",
"Web",
"Worker"
]
});Output
Status
API ▲
Web ▼
Worker ▲heatmap: Binary numeric levels
Source
heatmap({
data: [
[
0,
1,
0,
1
],
[
1,
1,
0,
0
]
],
levels: [
{
label: "Off",
symbol: "·",
value: 0
},
{
label: "On",
symbol: "█",
value: 1
}
],
legend: true
});Output
· █ · █
█ █ · ·
· Off █ Onheatmap: Colored numeric levels
Source
heatmap({
data: [
[
1,
2,
3,
4
],
[
4,
3,
2,
1
]
],
levels: [
{
color: "ansiBlue",
symbol: "░",
value: 1
},
{
color: "ansiCyan",
symbol: "▒",
value: 2
},
{
color: "ansiYellow",
symbol: "▓",
value: 3
},
{
color: "ansiRed",
symbol: "█",
value: 4
}
]
});Output
░ ▒ ▓ █
█ ▓ ▒ ░heatmap: Threshold symbols
Source
heatmap({
data: [
[
12,
55,
87
],
[
91,
38,
64
]
],
threshold: {
aboveColor: "ansiRed",
aboveSymbol: "!",
belowColor: "ansiGreen",
belowSymbol: ".",
value: 75
}
});Output
. . !
! . .heatmap: Threshold legend labels
Source
heatmap({
data: [
[
20,
49,
50,
80
]
],
legend: true,
threshold: {
aboveColor: "ansiYellow",
aboveLabel: "Warm",
belowColor: "ansiBlue",
belowLabel: "Cool",
value: 50
}
});Output
░ ░ █ █
░ Cool █ Warmheatmap: Thresholds with null cells
Source
heatmap({
data: [
[
10,
null,
90
],
[
null,
70,
30
]
],
symbols: {
empty: "?"
},
threshold: {
aboveColor: "ansiMagenta",
belowColor: "ansiCyan",
value: 60
}
});Output
░ ? █
? █ ░heatmap: Threshold grid labels
Source
heatmap({
columns: [
"CPU",
"RAM",
"Disk"
],
data: [
[
42,
81,
65
],
[
75,
52,
93
]
],
rows: [
"web",
"worker"
],
threshold: {
aboveColor: "ansiRed",
belowColor: "ansiGreen",
value: 80
},
title: "Capacity"
});Output
Capacity
CPU RAM Disk
web ░ █ ░
worker ░ ░ █heatmap: Exact threshold boundary
Source
heatmap({
data: [
[
49.9,
50,
50.1
]
],
legend: true,
threshold: {
aboveColor: "ansiBrightRed",
aboveLabel: "At or above",
belowColor: "ansiBrightGreen",
belowLabel: "Below",
value: 50
}
});Output
░ █ █
░ Below █ At or abovesparkline: Basic trend
Source
sparkline([
1,
3,
2,
5,
4,
8
]);Output
▁▃▂▅▄█sparkline: Negative and positive values
Source
sparkline([
-8,
-3,
-6,
0,
4,
2
]);Output
▁▄▂▆█▇sparkline: Constant values
Source
sparkline([
7,
7,
7,
7,
7
]);Output
▄▄▄▄▄sparkline: Null gaps
Source
sparkline([
1,
null,
3,
5,
null,
2
], {
symbols: {
empty: "·"
}
});Output
▁·▅█·▃sparkline: Single color
Source
sparkline([
2,
4,
6,
8,
5
], {
color: "ansiCyan"
});Output
▁▃▆█▅sparkline: Per-value colors
Source
sparkline([
1,
2,
3,
4,
5
], {
color: [
"ansiBlue",
"ansiCyan",
"ansiGreen",
"ansiYellow",
"ansiRed"
]
});Output
▁▃▅▇█sparkline: Threshold colors
Source
sparkline([
42,
61,
79,
83,
55
], {
threshold: {
aboveColor: "ansiRed",
belowColor: "ansiGreen",
value: 80
}
});Output
▁▄██▃sparkline: Custom levels and empty symbol
Source
sparkline([
0,
2,
4,
6,
8,
null
], {
symbols: {
empty: "?",
levels: [
".",
":",
"-",
"=",
"+",
"*",
"#",
"@"
]
}
});Output
.-+#@?sparkline: Ascending values
Source
sparkline([
1,
2,
3,
4,
5,
6,
7,
8
]);Output
▁▂▃▄▅▆▇█sparkline: Descending values
Source
sparkline([
8,
7,
6,
5,
4,
3,
2,
1
]);Output
█▇▆▅▄▃▂▁sparkline: Positive and negative wave
Source
sparkline([
0,
4,
8,
4,
0,
-4,
-8,
-4,
0
]);Output
▅▇█▇▅▃▁▃▅sparkline: Sparse spikes
Source
sparkline([
1,
1,
9,
1,
1,
7,
1,
1,
10
]);Output
▁▁█▁▁▆▁▁█sparkline: Fractional values
Source
sparkline([
0.1,
0.25,
0.2,
0.75,
0.5,
1
]);Output
▁▂▁▆▄█sparkline: Large values
Source
sparkline([
1000,
25000,
8000,
90000,
50000
]);Output
▁▃▁█▅sparkline: Tiny decimal values
Source
sparkline([
0.0001,
0.0003,
0.0002,
0.0008,
0.0005
]);Output
▁▃▂█▅sparkline: Single value
Source
sparkline([
5
]);Output
▄sparkline: Two values
Source
sparkline([
10,
20
]);Output
▁█sparkline: Alternating null gaps
Source
sparkline([
1,
null,
2,
null,
3,
null,
4
]);Output
▁ ▃ ▆ █sparkline: Dash gap symbol
Source
sparkline([
3,
null,
6,
null,
9
], {
symbols: {
empty: "-"
}
});Output
▁-▅-█sparkline: ASCII levels
Source
sparkline([
0,
1,
2,
3,
4,
5,
6,
7
], {
symbols: {
levels: [
".",
":",
"-",
"=",
"+",
"*",
"#",
"@"
]
}
});Output
.:-=+*#@sparkline: Red trend
Source
sparkline([
2,
5,
3,
8,
6
], {
color: "ansiRed"
});Output
▁▅▂█▆sparkline: Alternating color palette
Source
sparkline([
1,
3,
2,
5,
4,
7
], {
color: [
"ansiBlue",
"ansiYellow",
"ansiBlue",
"ansiYellow",
"ansiBlue",
"ansiYellow"
]
});Output
▁▃▂▆▅█sparkline: Partial color palette
Source
sparkline([
1,
2,
3,
4,
5
], {
color: [
"ansiGreen",
undefined,
"ansiYellow",
undefined,
"ansiRed"
]
});Output
▁▃▅▇█sparkline: Zero threshold
Source
sparkline([
-5,
-1,
0,
1,
5
], {
threshold: {
aboveColor: "ansiGreen",
belowColor: "ansiRed",
value: 0
}
});Output
▁▄▅▅█sparkline: Negative threshold
Source
sparkline([
-10,
-7,
-5,
-3,
0
], {
threshold: {
aboveColor: "ansiCyan",
belowColor: "ansiMagenta",
value: -5
}
});Output
▁▃▅▆█sparkline: Exact threshold boundary
Source
sparkline([
49,
50,
51,
50,
49
], {
threshold: {
aboveColor: "ansiBrightRed",
belowColor: "ansiBrightGreen",
value: 50
}
});Output
▁▅█▅▁histogram: Automatic bins
Source
histogram([
1,
1,
2,
2,
2,
4,
5,
8,
8,
9
]);Output
[
[
1.8,
5
],
[
3.3999999999999995,
1
],
[
5,
1
],
[
6.6,
0
],
[
8.2,
3
]
]histogram: Three bins
Source
histogram([
1,
1,
2,
2,
2,
4,
5,
8,
8,
9
], {
binCount: 3
});Output
[
[
2.3333333333333335,
5
],
[
5,
2
],
[
7.666666666666667,
3
]
]histogram: Six bins
Source
histogram([
3,
4,
4,
5,
7,
8,
9,
9,
10,
12,
13,
15
], {
binCount: 6
});Output
[
[
4,
3
],
[
6,
1
],
[
8,
2
],
[
10,
3
],
[
12,
1
],
[
14,
2
]
]histogram: Negative values
Source
histogram([
-9,
-7,
-4,
-4,
-1,
0,
2,
5
], {
binCount: 4
});Output
[
[
-7.25,
2
],
[
-3.75,
2
],
[
-0.25,
2
],
[
3.25,
2
]
]histogram: Constant samples
Source
histogram([
5,
5,
5,
5,
5
], {
binCount: 5
});Output
[
[
5,
5
]
]histogram: Normalize pre-counted bins
Source
histogram([
[
1,
3
],
[
2,
5
],
[
1,
2
],
[
4,
1
]
]);Output
[
[
1,
5
],
[
2,
5
],
[
4,
1
]
]