Below are examples for each configuration option. You can click on any option to view the corresponding example.
- Custom Width and Height
- Y-Axis Range (yRange)
- Show Tick Labels
- Bar chart
- Horizontal Bar chart
- Hide X-Axis
- Hide Y-Axis
- Plot Title
- X-Axis Label
- Y-Axis Label
- Thresholds
- Fill Area
- Legend
- Axis Center
- Custom Formatter
- Custom Line Formatter
- Custom Symbols
Custom Width and Height
Description: Sets the width and height of the graph.
Possible Values: Numeric values for width and height, e.g., 20, 8.
▲
25┤ ┏━
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
4┤ ┏━━━━━━━━━━━━━━┛
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Y-Axis Range (yRange)
Description: Specifies the range for the y-axis.
Possible Values: A tuple specifying [min, max] values for the y-axis, e.g., [0, 30].
▲
│
│
│
│
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
1┤━━━━━━━━━━━━━━┛
│
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Show Tick Labels
Description: Enables or disables tick labels on the axis.
Possible Values: Boolean (true or false).
▲
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
Bar chart
Description: Draw bar chart.
Possible Values: Boolean (true or false).
▲ █
25┤ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █
│ █ █
16┤ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █
│ █ █ █
9┤ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █
│ █ █ █ █
4┤ █ █ █ █
│ █ █ █ █
│█ █ █ █ █
1┤█ █ █ █ █
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Horizontal Bar chart
Description: Draw horizontal bar chart.
Possible Values: Boolean (true or false).
▲
25┤███████████████████████████████████████████████████████████
│
│
│
│
│
│
│
│
16┤████████████████████████████████████████████
│
│
│
│
│
│
9┤██████████████████████████████
│
│
│
│
4┤███████████████
│
│
1┤
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Hide X-Axis
Description: Hides the x-axis from the graph.
Possible Values: Boolean (true or false).
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
│
Hide Y-Axis
Description: Hides the y-axis from the graph.
Possible Values: Boolean (true or false).
┏━
┃
┃
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
┃
┃
┃
┃
┏━━━━━━━━━━━━━┛
┃
┃
┃
┃
┏━━━━━━━━━━━━━━┛
┃
┃
━━━━━━━━━━━━━━┛
─┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Plot Title
Description: Adds a title to the graph.
Possible Values: A string value representing the title, e.g., "Sample Plot Title".
Sample Plot Title
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X-Axis Label
Description: Adds a label to the x-axis.
Possible Values: A string value representing the x-axis label, e.g., "X Axis".
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
X Axis
Y-Axis Label
Description: Adds a label to the y-axis.
Possible Values: A string value representing the y-axis label, e.g., "Y Axis".
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
Y │ ┃
│ ┃
A │ ┃
x │ ┃
i │ ┃
s │ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Thresholds
Description: Adds threshold lines at specific x or y coordinates.
Possible Values: An array of thresholds, each with optional x, y coordinates and a color, e.g., [{ x: 3, color: "ansiRed" }].
▲ ┃
25┤ ┃ ┏━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
16┤ ┃ ┏━━━━━━━━━━━━━━┛
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
│ ┃ ┃
9┤ ┏┃━━━━━━━━━━━━┛
│ ┃┃
│ ┃┃
│ ┃┃
│ ┃┃
4┤ ┏━━━━━━━━━━━━━━┛┃
│ ┃ ┃
│ ┃ ┃
1┤━━━━━━━━━━━━━━┛ ┃
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Fill Area
Description: Fills the area under the lines.
Possible Values: Boolean (true or false).
▲
25┤ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
│ ██
16┤ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
│ █████████████████
9┤ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
│ ███████████████████████████████
4┤ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
│ ██████████████████████████████████████████████
1┤████████████████████████████████████████████████████████████
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Legend
Description: Adds a legend to the graph.
Possible Values: An object specifying the position and series names, e.g., { position: "top", series: ["Series 1"] }.
█ Series 1
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Axis Center
Description: Specifies a custom center for the axes.
Possible Values: A tuple specifying the x and y coordinates, e.g., [2, 10].
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
┬──────────────┬──────────────┬─────────────┬──────────────┬─▶
1 9┤ 3━━━━━━━━━━━━━4 5
│ ┃
│ ┃
│ ┃
│ ┃
4┤━━━━━━━━━━━━━━┛
│
│
━━━━━━━━━━━━━1┤
│
Custom Formatter
Description: Formats the axis labels with custom logic.
Possible Values: A formatter function that returns custom labels, e.g., (value, { axis }) => ...
▲
25┤ ┏━
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
16┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
│ ┃
9┤ ┏━━━━━━━━━━━━━┛
│ ┃
│ ┃
│ ┃
│ ┃
4┤ ┏━━━━━━━━━━━━━━┛
│ ┃
│ ┃
1┤━━━━━━━━━━━━━━┛
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
A B C D E
Custom Line Formatter
Description: Formats the lines with custom symbols.
Possible Values: A function that returns custom symbols for each point, e.g., (args) => { ... }
▲
25┤ ▲
│
│
│
│
│
│
│
│
16┤ ▼
│
│
│
│
│
│
9┤ ▼
│
│
│
│
4┤ ▲
│
│
1┤▼
└┬──────────────┬──────────────┬─────────────┬──────────────┬▶
1 2 3 4 5
Custom Symbols
Description: Overrides the default axis and chart symbols.
Possible Values: An object defining custom symbols for the axis and chart, e.g., { axis: { ns: "|", we: "-" }, chart: { ns: "*", we: "*" } }.
▲
25┤ ┏*
| *
| *
| *
| *
| *
| *
| *
| *
16┤ ┏**************┛
| *
| *
| *
| *
| *
| *
9┤ ┏*************┛
| *
| *
| *
| *
4┤ ┏**************┛
| *
| *
1┤**************┛
└┬--------------┬--------------┬-------------┬--------------┬▶
1 2 3 4 5