7
7
8
8
** Simple ASCII Chart** is a TypeScript package for creating customizable ASCII charts in the terminal. It supports two-dimensional data, multiple series, custom colors, and formatters, making it a versatile solution for terminal-based data visualization.
9
9
10
- [ Interactive demo.] ( https://simple-ascii-chart.vercel.app/ )
10
+ [ Playground and documentation] ( https://simple-ascii-chart.vercel.app/ )
11
+ [ NPM] ( https://www.npmjs.com/package/simple-ascii-chart )
11
12
12
13
## Installation
13
14
@@ -25,9 +26,14 @@ import plot from 'simple-ascii-chart';
25
26
const graph = plot (input , settings );
26
27
```
27
28
29
+ ## CLI
30
+
31
+ [ CLI tool is available too] ( https://github.com/gtktsc/simple-ascii-chart-cli )
32
+ [ NPM] ( https://www.npmjs.com/package/simple-ascii-chart-cli )
33
+
28
34
## Playground
29
35
30
- Create charts interactively in the [ playground] ( https://simple-ascii-chart.vercel.app/ ) .
36
+ Create charts interactively in the [ playground] ( https://simple-ascii-chart.vercel.app/playground ) .
31
37
32
38
## API Endpoint
33
39
@@ -108,10 +114,13 @@ Customize the `plot` function with a variety of settings:
108
114
| ` yLabel ` | Label for the y-axis. |
109
115
| ` thresholds ` | Defines threshold lines or points with optional colors at specific x or y coordinates. |
110
116
| ` fillArea ` | Fills the area under each line, suitable for area charts. |
117
+ | ` barChart ` | Draws bar chart. |
118
+ | ` horizontalBarChart ` | Draws horizontal bar chart. |
111
119
| ` hideXAxis ` | Hides the x-axis. |
112
120
| ` hideYAxis ` | Hides the y-axis. |
113
121
| ` symbols ` | Symbols for customizing the chart’s appearance, including axis, background, and chart symbols. |
114
122
| ` legend ` | Configuration for a legend, showing series names and position options (` left ` , ` right ` , ` top ` , ` bottom ` ). |
123
+ | ` debugMode ` | Enables debug mode (` default = false ` ). |
115
124
116
125
### Advanced Settings
117
126
@@ -864,3 +873,100 @@ Expected Output:
864
873
└┬───┬───┬───┬────┬───┬───┬───┬▶
865
874
1 2 3 4 5 6 7 8
866
875
```
876
+
877
+ ### Bar chart
878
+
879
+ Input:
880
+
881
+ ``` typescript
882
+ plot (
883
+ [
884
+ [0 , 3 ],
885
+ [1 , 2 ],
886
+ [2 , 3 ],
887
+ [3 , 4 ],
888
+ [4 , - 2 ],
889
+ [5 , - 5 ],
890
+ [6 , 2 ],
891
+ [7 , 0 ],
892
+ ],
893
+ {
894
+ title: ' bar chart with axis' ,
895
+ barChart: true ,
896
+ showTickLabel: true ,
897
+ width: 40 ,
898
+ axisCenter: [0 , 0 ],
899
+ },
900
+ );
901
+ ```
902
+
903
+ Expected Output:
904
+
905
+ ``` bash
906
+ bar chart with axis
907
+ ▲ █
908
+ 4┤ █ █
909
+ 3┤ █ █ █ █
910
+ 2┤ █ █ █ █
911
+ 1┤ █ █ █ █ █
912
+ 0┤─────┬────┬─────┬────┬─────┬────┬─────┬─▶
913
+ -1┤ 1 2 3 4 5 6 7
914
+ -2┤ █
915
+ -3┤ █
916
+ -4┤ █
917
+ -5┤
918
+ │
919
+ ```
920
+
921
+ ### Bar chart
922
+
923
+ Input:
924
+
925
+ ``` typescript
926
+ plot (
927
+ [
928
+ [0 , 3 ],
929
+ [1 , 2 ],
930
+ [2 , 3 ],
931
+ [3 , 4 ],
932
+ [4 , - 2 ],
933
+ [5 , - 5 ],
934
+ [6 , 2 ],
935
+ [7 , 0 ],
936
+ ],
937
+ {
938
+ horizontalBarChart: true ,
939
+ showTickLabel: true ,
940
+ width: 40 ,
941
+ height: 20 ,
942
+ axisCenter: [3 , 1 ],
943
+ },
944
+ );
945
+ ```
946
+
947
+ Expected Output:
948
+
949
+ ``` bash
950
+ ▲
951
+ 4┤
952
+ │
953
+ ████████████████3┤
954
+ │
955
+ ██████████2┤████████████████
956
+ │
957
+ ┬─────┬────┬────1┤────┬─────┬────┬─────┬─▶
958
+ 0 1 2 3 4 5 6 7
959
+ 0┤██████████████████████
960
+ │
961
+ -1┤
962
+ │
963
+ -2┤
964
+ │█████
965
+ -3┤
966
+ │
967
+ -4┤
968
+ │
969
+ │
970
+ -5┤███████████
971
+ │
972
+ ```
0 commit comments