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
- Width
- Height
- Y Range
- Show Tick Label
- Hide X Axis
- Hide X Axis Ticks
- Hide Y Axis
- Hide Y Axis Ticks
- Custom X Axis Ticks
- Custom Y Axis Ticks
- Title
- X Label
- Y Label
- Thresholds
- Points
- Fill Area
- Legend
- Axis Center
- Formatter
- Line Formatter
- Symbols
- Mode
- Debug Mode
Color
Setting key: color
Description: `Color`, `Color[]`, or `ColorGetter` for series coloring.
Type: Colors
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
color: [
"ansiRed",
"ansiBlue"
]
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Width
Setting key: width
Description: Plot width.
Type: number
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 30,
height: 8
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
16┤ ┏━━━━━━┛
│ ┃
9┤ ┏━━━━━━┛
4┤ ┏━━━━━━━┛
1┤━━━━━━┛
└┬──────┬───────┬──────┬──────┬▶
1 2 3 4 5
Height
Setting key: height
Description: Plot height.
Type: number
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
height: 6
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
9┤ ┏━━━━━━━━━━━━━┛
4┤ ┏━━━━━━━━━━━━━━┛
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Y Range
Setting key: yRange
Description: Y-axis range as `[min, max]`. Values outside this range are filtered before rendering.
Type: [number, number]
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
yRange: [
0,
30
]
};
console.log(plot(input, settings));
▲
│
│
│
│
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
1┤━━━━━━━━━━━━━━┛
│
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Show Tick Label
Setting key: showTickLabel
Description: Show full tick labels on the Y-axis.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
showTickLabel: true
};
console.log(plot(input, settings));
▲
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: hideXAxis
Description: Hide the X-axis line.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideXAxis: true
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
│
Hide X Axis Ticks
Setting key: hideXAxisTicks
Description: Hide X-axis tick markers and labels.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideXAxisTicks: true
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└────────────────────────────────────────────────────────────▶
Hide Y Axis
Setting key: hideYAxis
Description: Hide the Y-axis line.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideYAxis: true
};
console.log(plot(input, settings));
┏━
┃
┃
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━┛
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
━━━━━━━━━━━━━━┛
─┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Hide Y Axis Ticks
Setting key: hideYAxisTicks
Description: Hide Y-axis tick markers and labels.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
hideYAxisTicks: true
};
console.log(plot(input, settings));
▲
│ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Custom X Axis Ticks
Setting key: customXAxisTicks
Description: Explicit X tick values.
Type: number[]
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));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬─────────────────────────────┬────────────────────────────┬▶
1 3 5
Custom Y Axis Ticks
Setting key: customYAxisTicks
Description: Explicit Y tick values.
Type: number[]
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));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━┛
8┤ ┃
│ ┃
│ ┃
│ ┃
│ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Title
Setting key: title
Description: Chart title shown above the plot.
Type: string
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));
Sample Plot Title
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X Label
Setting key: xLabel
Description: X-axis label.
Type: string
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
xLabel: "X Axis"
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X Axis
Y Label
Setting key: yLabel
Description: Y-axis label.
Type: string
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
yLabel: "Y Axis"
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
Y │ ┃
│ ┃
A │ ┃
x │ ┃
i │ ┃
s │ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Thresholds
Setting key: thresholds
Description: Threshold lines (`x` and/or `y`) with optional color.
Type: Threshold[]
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));
▲ ┃
25┤ ┃ ┏━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
16┤ ┃ ┏━━━━━━━━━━━━━━┛
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
9┤ ┏┃━━━━━━━━━━━━┛
│ ┃┃
│ ┃┃
│ ┃┃
│ ┃┃
4┤ ┏━━━━━━━━━━━━━━┛┃
│ ┃ ┃
│ ┃ ┃
1┤━━━━━━━━━━━━━━┛ ┃
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Points
Setting key: points
Description: Overlay points with optional color.
Type: GraphPoint[]
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));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ● ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Fill Area
Setting key: fillArea
Description: Fill area under lines using the `area` chart symbol.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
fillArea: true
};
console.log(plot(input, settings));
▲
25┤ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
16┤ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
9┤ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
4┤ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
1┤████████████████████████████████████████████████████████████
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Legend
Setting key: legend
Description: Legend config (`position`, `series`, `points`, `thresholds`).
Type: Legend
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));
█ Series 1
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Axis Center
Setting key: axisCenter
Description: Axis center as `[x, y]`. Default axis origin is bottom-left.
Type: MaybePoint
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
axisCenter: [
2,
10
]
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
┬──────────────┼──────────────┬─────────────┬──────────────┬─▶
1 92 3━━━━━━━━━━━━━4 5
│ ┃
│ ┃
│ ┃
│ ┃
4┤━━━━━━━━━━━━━━┛
│
│
━━━━━━━━━━━━━1┤
│
Formatter
Setting key: formatter
Description: Axis label formatter: `(value, helpers) => string \| number`.
Type: Formatter
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));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
A B C D E
Line Formatter
Setting key: lineFormatter
Description: Custom point renderer: `(args: LineFormatterArgs) => CustomSymbol \| CustomSymbol[]`.
Type: (args: LineFormatterArgs) => CustomSymbol | CustomSymbol[]
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));
▲
25┤ ▲
│
│
│
│
│
│
│
│
16┤ ▼
│
│
│
│
│
│
9┤ ▼
│
│
│
│
4┤ ▲
│
│
1┤▼
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Symbols
Setting key: symbols
Description: Symbol overrides for `axis`, `chart`, `empty`, `background`, `border`, `thresholds`, `point`.
Type: Symbols
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));
▲
25┤ ┏*
| *
| *
| *
| *
| *
| *
| *
| *
16┤ ┏**************┛
| *
| *
| *
| *
| *
| *
9┤ ┏*************┛
| *
| *
| *
| *
4┤ ┏**************┛
| *
| *
1┤**************┛
└┬--------------┬--------------┬-------------┬--------------┬▶
1 2 3 4 5
Mode
Setting key: mode
Description: Plot mode: `'line'`, `'point'`, `'bar'`, `'horizontalBar'`.
Type: GraphMode
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
mode: "bar",
width: 60
};
console.log(plot(input, settings));
▲ █
25┤ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █ █
16┤ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █ █
9┤ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █ █
4┤ █ █ █ █
│ █ █ █ █
│█ █ █ █ █
1┤█ █ █ █ █
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Debug Mode
Setting key: debugMode
Description: Enable debug logging for out-of-bounds draw attempts.
Type: boolean
const input = [
[
1,
1
],
[
2,
4
],
[
3,
9
],
[
4,
16
],
[
5,
25
]
];
const settings = {
width: 60,
debugMode: true
};
console.log(plot(input, settings));
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5