Documentation
Read generated simple-ascii-chart configuration documentation from the installed package metadata.
The options below are generated from the installed simple-ascii-chart package metadata. This page updates through the docs generation pipeline to stay in parity with the library.
Color
Type
type Colors = Color | Color[] | ColorGetter;Color, Color[], or ColorGetter for series coloring.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
color: [
"ansiRed",
"ansiBlue"
]
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Width
Setting key
Type
Plot width.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 30,
height: 8
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
16┤ ┏━━━━━━┛
│ ┃
9┤ ┏━━━━━━┛
4┤ ┏━━━━━━━┛
1┤━━━━━━┛
└┬──────┬───────┬──────┬──────┬▶
1 2 3 4 5
Height
Setting key
Type
Plot height.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
height: 6
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
9┤ ┏━━━━━━━━━━━━━┛
4┤ ┏━━━━━━━━━━━━━━┛
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Y Range
Setting key
Type
Y-axis range as [min, max]. Values outside this range are filtered before rendering.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
yRange: [
0,
30
]
};
console.log(plot(input, settings));Output
▲
│
│
│
│
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
1┤━━━━━━━━━━━━━━┛
│
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Show Tick Label
Setting key
Type
Show full tick labels on the Y-axis.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
showTickLabel: true
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
24┤ ┃
23┤ ┃
22┤ ┃
21┤ ┃
20┤ ┃
19┤ ┃
18┤ ┃
17┤ ┃
16┤ ┏━━━━━━━━━━━━━━┛
15┤ ┃
14┤ ┃
13┤ ┃
12┤ ┃
11┤ ┃
10┤ ┃
9┤ ┏━━━━━━━━━━━━━┛
8┤ ┃
7┤ ┃
6┤ ┃
5┤ ┃
4┤ ┏━━━━━━━━━━━━━━┛
3┤ ┃
2┤ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Hide X Axis
Setting key
Type
Hide the X-axis line.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideXAxis: true
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
│
Hide X Axis Ticks
Setting key
Type
Hide X-axis tick markers and labels.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideXAxisTicks: true
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└────────────────────────────────────────────────────────────▶
Hide Y Axis
Setting key
Type
Hide the Y-axis line.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideYAxis: true
};
console.log(plot(input, settings));Output
┏━
┃
┃
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━┛
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
━━━━━━━━━━━━━━┛
─┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Hide Y Axis Ticks
Setting key
Type
Hide Y-axis tick markers and labels.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideYAxisTicks: true
};
console.log(plot(input, settings));Output
▲
│ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Custom X Axis Ticks
Setting key
Type
Explicit X tick values.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
customXAxisTicks: [
1,
3,
5
]
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬─────────────────────────────┬────────────────────────────┬▶
1 3 5
Custom Y Axis Ticks
Setting key
Type
Explicit Y tick values.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
customYAxisTicks: [
1,
8,
16,
25
]
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━┛
8┤ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Title
Setting key
Type
Chart title shown above the plot.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
title: "Sample Plot Title"
};
console.log(plot(input, settings));Output
Sample Plot Title
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X Label
Setting key
Type
X-axis label.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
xLabel: "X Axis"
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X Axis
Y Label
Setting key
Type
Y-axis label.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
yLabel: "Y Axis"
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
Y │ ┃
│ ┃
A │ ┃
x │ ┃
i │ ┃
s │ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Thresholds
Setting key
Type
type Threshold = {
x?: number;
y?: number;
color?: Color;
};Threshold lines (x and/or y) with optional color.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
thresholds: [
{
x: 3
},
{
y: 15
}
]
};
console.log(plot(input, settings));Output
▲ ┃
25┤ ┃ ┏━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
16┤ ┃ ┏━━━━━━━━━━━━━━┛
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
9┤ ┏┃━━━━━━━━━━━━┛
│ ┃┃
│ ┃┃
│ ┃┃
│ ┃┃
4┤ ┏━━━━━━━━━━━━━━┛┃
│ ┃ ┃
│ ┃ ┃
1┤━━━━━━━━━━━━━━┛ ┃
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Points
Setting key
Type
type GraphPoint = {
x: number;
y: number;
color?: Color;
};Overlay points with optional color.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
points: [
{
x: 3,
y: 15
}
]
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ● ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Fill Area
Setting key
Type
Fill area under lines using the area chart symbol.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
fillArea: true
};
console.log(plot(input, settings));Output
▲
25┤ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
16┤ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
9┤ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
4┤ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
1┤████████████████████████████████████████████████████████████
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Legend
Setting key
Type
type Legend = {
position?: 'left' | 'right' | 'top' | 'bottom';
series?: string | string[];
points?: string | string[];
thresholds?: string | string[];
};Legend config (position, series, points, thresholds).
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
legend: {
position: "top",
series: [
"Series 1"
]
}
};
console.log(plot(input, settings));Output
█ Series 1
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Axis Center
Setting key
Type
type MaybePoint = Point | undefined | [number | undefined, number | undefined];Axis center as [x, y]. Default axis origin is bottom-left.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
axisCenter: [
2,
10
]
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
┬──────────────┼──────────────┬─────────────┬──────────────┬─▶
1 92 3━━━━━━━━━━━━━4 5
│ ┃
│ ┃
│ ┃
│ ┃
4┤━━━━━━━━━━━━━━┛
│
│
━━━━━━━━━━━━━1┤
│
Formatter
Setting key
Type
type Formatter = (value: number, helpers: FormatterHelpers) => number | string;Axis label formatter: (value, helpers) => string \| number.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
formatter: (value, { axis }) => {
if (axis === "x") {
return ["A","B","C","D","E"][value - 1] ?? value;
}
return value;
}
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
A B C D E
Line Formatter
Setting key
Type
type LineFormatterArgs = {
x: number;
y: number;
plotX: number;
plotY: number;
input: SingleLine;
index: number;
minY: number;
minX: number;
expansionX: number[];
expansionY: number[];
toPlotCoordinates: (x: number, y: number) => Point;
};type CustomSymbol = {
x: number;
y: number;
symbol: string;
};Custom point renderer: (args: LineFormatterArgs) => CustomSymbol \| CustomSymbol[].
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
lineFormatter: ({ plotX, plotY }) => [
{ x: plotX, y: plotY, symbol: plotX % 2 === 0 ? "▲" : "▼" },
]
};
console.log(plot(input, settings));Output
▲
25┤ ▲
│
│
│
│
│
│
│
│
16┤ ▼
│
│
│
│
│
│
9┤ ▼
│
│
│
│
4┤ ▲
│
│
1┤▼
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Symbols
Setting key
Type
type Symbols = {
axis?: Partial<typeof AXIS>;
chart?: Partial<typeof CHART>;
empty?: string;
background?: string;
border?: string;
thresholds?: Partial<typeof THRESHOLDS>;
point?: string;
};Symbol overrides for axis, chart, empty, background, border, thresholds, point.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
symbols: {
axis: {
ns: "|",
we: "-"
},
chart: {
ns: "*",
we: "*"
}
}
};
console.log(plot(input, settings));Output
▲
25┤ ┏*
| *
| *
| *
| *
| *
| *
| *
| *
16┤ ┏**************┛
| *
| *
| *
| *
| *
| *
9┤ ┏*************┛
| *
| *
| *
| *
4┤ ┏**************┛
| *
| *
1┤**************┛
└┬--------------┬--------------┬-------------┬--------------┬▶
1 2 3 4 5
Mode
Setting key
Type
type GraphMode = 'line' | 'point' | 'bar' | 'horizontalBar';Plot mode: 'line', 'point', 'bar', 'horizontalBar'.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
mode: "bar",
width: 60
};
console.log(plot(input, settings));Output
▲ █
25┤ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █ █
16┤ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █ █
9┤ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █ █
4┤ █ █ █ █
│ █ █ █ █
│█ █ █ █ █
1┤█ █ █ █ █
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Debug Mode
Setting key
Type
Enable debug logging for out-of-bounds draw attempts.
Options
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
debugMode: true
};
console.log(plot(input, settings));Output
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5