{"id":13846790,"url":"https://github.com/tool3/chartscii","last_synced_at":"2025-04-06T10:09:37.363Z","repository":{"id":39812131,"uuid":"241546892","full_name":"tool3/chartscii","owner":"tool3","description":"📊 create beautiful ascii charts","archived":false,"fork":false,"pushed_at":"2025-03-25T06:17:26.000Z","size":5816,"stargazers_count":50,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T09:05:21.866Z","etag":null,"topics":["ascii","ascii-chart","chart","javascript","npm-package"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tool3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-19T06:12:31.000Z","updated_at":"2025-03-28T11:22:05.000Z","dependencies_parsed_at":"2023-02-01T14:31:38.292Z","dependency_job_id":"f9859401-8670-4661-b4c0-25111561a3a8","html_url":"https://github.com/tool3/chartscii","commit_stats":{"total_commits":296,"total_committers":7,"mean_commits":"42.285714285714285","dds":"0.31418918918918914","last_synced_commit":"7f597c2f9057b659e2118b4d7738af652a56cd5a"},"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tool3%2Fchartscii","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tool3%2Fchartscii/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tool3%2Fchartscii/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tool3%2Fchartscii/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tool3","download_url":"https://codeload.github.com/tool3/chartscii/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464184,"owners_count":20942966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ascii","ascii-chart","chart","javascript","npm-package"],"created_at":"2024-08-04T18:00:47.636Z","updated_at":"2025-04-06T10:09:37.337Z","avatar_url":"https://github.com/tool3.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":["Node"],"readme":"# Chartscii 3.0!\n\n![](./shellfies/chartscii_main.png)\n\n[![](https://img.shields.io/static/v1?label=created%20with%20shellfie\u0026message=📸\u0026color=pink)](https://github.com/tool3/shellfie)\n\nfor command line usage see: [chartscii-cli](https://github.com/tool3/chartscii-cli)\n\nChartscii was rewritten from scratch in TypeScript!\nIt includes many new features, improvements and rich formatting capabilities.\n\n# What’s new\n\n✅ Full width and height control.  \n✅ New `padding` and `barSize` options!  \n✅ New `orientation` option! vertical charts are here!  \n✅ New rich styl3 formatting support!  \n✅ New Emoji characters support! [\\*](#unicode-issues)\n\n# install\n\n```bash\nnpm install chartscii\n```\n\n# usage\n\n`chartscii` accepts an array of data objects, with optional labels, and outputs an ascii bar chart.\n\n## usage example\n\n```typescript\nimport Chartscii from \"chartscii\";\n\nconst data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst options = {\n  title: \"chartscii\",\n  width: 50,\n  theme: \"pastel\",\n  color: \"pink\",\n  colorLabels: true,\n  barSize: 2,\n  orientation: \"vertical\"\n};\nconst chart = new Chartscii(data, options);\nconsole.log(char.create());\n```\n\n![](./shellfies/chartscii_simple.png)\n\n# Input\n\nChartscii accepts an array of data points to draw the chart.\n\nThis can be an array of numbers, or an array of chart points as explained below.\n\n## number[]\n\nIf you provide an array of numbers, chartscii will draw each bar using the provided values.\n\nValue is scaled to width/height of chart, depending on the orientation option.\n\n### example\n\n```tsx\nimport Chartscii from \"chartscii\";\n\nconst data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst chart = new Chartscii(data);\nconsole.log(chart.create());\n```\n\n![](./shellfies//chartscii_dead_simple.png)\n\n## ChartPoint[]\n\nFor maximum flexibility, provide an array of chart points. This will allow you to customize the following properties:\n\n| name  | description | type   | default       |\n| ----- | ----------- | ------ | ------------- |\n| label | bar label   | string | point.value   |\n| value | bar value   | number | N/A           |\n| color | bar color   | string | options.color |\n\n### example\n\n```tsx\nimport Chartscii from \"chartscii\";\n\nconst data = [\n  { label: \"label\", value: 2, color: \"pink\" },\n  { label: \"label\", value: 2, color: \"purple\" },\n  { label: \"label\", value: 2, color: \"marine\" }\n];\nconst chart = new Chartscii(data, { colorLabels: true, valueLabels: true });\nconsole.log(chart.create());\n```\n\n![](./shellfies/chartscii_chartpoint.png)\n\n# Options\n\nYou can customize the look and size of the chart, as well as rich formatting for labels provided by `styl3`.\n\n## default options\n\nChartscii accepts customization options as a second argument and will merge the provided options with the following one:\n\n```tsx\nconst options: ChartOptions = {\n  percentage: false,\n  colorLabels: false,\n  sort: false,\n  reverse: false,\n  naked: false,\n  labels: true,\n  color: undefined,\n  fill: undefined,\n  width: 100,\n  height: 10,\n  padding: 0,\n  barSize: 1,\n  title: \"\",\n  char: \"█\",\n  orientation: \"horizontal\",\n  theme: \"\",\n  structure: {\n    x: \"═\",\n    y: \"╢\",\n    axis: \"║\",\n    topLeft: \"╔\",\n    bottomLeft: \"╚\"\n  }\n};\n```\n\n## customization options\n\n| name                     | description                                                                                                 | type                 | default                                                        |\n| ------------------------ | ----------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------- |\n| percentage               | calculate and show percentage data                                                                          | `boolean`            | `false`                                                        |\n| colorLabels              | color labels with provided color per label, or color provided to option                                     | `boolean`            | `false`                                                        |\n| valueLabels              | show values of each bar                                                                                     | `boolean`            | `false`                                                        |\n| valueLabelsPrefix        | prefix for the value labels (for example to be used with currency)                                          | `string`             | `undefined`                                                    |\n| valueLabelsFloatingPoint | sets decimal place precision for value labels; defaults to printing entire number, excluding extra zeroes   | `number`             | `undefined`                                                    |\n| sort                     | sort the input data                                                                                         | `boolean`            | `false`                                                        |\n| reverse                  | reverse the input data                                                                                      | `boolean`            | `false`                                                        |\n| naked                    | don’t print chart structure ascii characters                                                                | `boolean`            | `false`                                                        |\n| labels                   | show labels                                                                                                 | `boolean`            | `true`                                                         |\n| color                    | fallback color or unified char bars color                                                                   | `string`             | `undefined`                                                    |\n| fill                     | use this character to fill remaining chart bar space                                                        | `string`             | `undefined`                                                    |\n| scale                    | values are scaled proportionate to this value. otherwise the max will be calculated from the provided data. | `number` or `string` | `auto`                                                         |\n| width                    | width of chart                                                                                              | `number`             | `100`                                                          |\n| height                   | height of chart                                                                                             | `number`             | `10`                                                           |\n| padding                  | padding between bars                                                                                        | `number`             | `0`                                                            |\n| barSize                  | size of each bar                                                                                            | `number`             | `1`                                                            |\n| title                    | chart title                                                                                                 | `string`             | `undefined`                                                    |\n| char                     | use this character to draw the chart bars                                                                   | `string`             | `█`                                                            |\n| orientation              | horizontal or vertical                                                                                      | `string`             | `horizontal`                                                   |\n| theme                    | `styl3`'s [themes](https://github.com/tool3/styl3?tab=readme-ov-file#themes)                                | `string`             | `undefined`                                                    |\n| structure                | use these characters to draw the enclosing chart borders.                                                   | `object`             | `{ x: '═', y: '╢', bottomLeft: '╚', axis: '║', topLeft: '╔' }` |\n\n## chartscii + styl3 = ❤️\n\nYou can use `styl3`’s [formatting](https://github.com/tool3/styl3?tab=readme-ov-file#map) for cool themes, built-in color names and rich label formatting.\n\nYou should check out `styl3` for a full list of customization options.\n\n### example\n\n```tsx\nconst colors = [\n  \"red\",\n  \"green\",\n  \"yellow\",\n  \"blue\",\n  \"purple\",\n  \"pink\",\n  \"cyan\",\n  \"orange\"\n];\n\nconst data = [];\nfor (let i = 0; i \u003c colors.length; i++) {\n  const color = colors[i];\n  data.push({ value: i + 1, color, label: `@invert ${i}@`, theme: \"pastel\" });\n}\n\nconst chart = new Chartscii(data, {\n  fill: \"░\",\n  colorLabels: true,\n  orientation: \"vertical\"\n});\n\nconsole.log(chart.create());\n```\n\n![](./shellfies/chartscii_styl3.png)\n\n# examples\n\nhere are some examples of charts using `styl3`'s formatting on the chart labels.\n\n\u003e [!TIP]  \n\u003e you can run more examples from the `./examples/` directory of this repository using `ts-node`.  \n\u003e for example `npx ts-node examples/loaders.ts`\n\n## vertical\n\n| options                                                                     | chart                                                                            |\n| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |\n| beach theme with italic and bold labels with a bar size of 2                | ![](./shellfies/vertical/chartscii_beach_italic_bold_barsize.png)                |\n| pastel theme with bold and underlined labels with padding of 2              | ![](./shellfies/vertical/chartscii_pastel_bold_underline_padding.png)            |\n| lush theme with strikedout labels no padding and emoji                      | ![](./shellfies/vertical/chartscii_lush_strikeout_emoji.png)                     |\n| lush theme with underlined labels no padding and no axis structure char     | ![](./shellfies/vertical/chartscii_lush_underline_no_axis_structure.png)         |\n| standard theme with dimmed and italic labels and padding 1                  | ![](./shellfies/vertical/chartscii_standard_dimmed_italic_padding_structure.png) |\n| pastel theme with inverted and underlined labels with a dark fill character | ![](./shellfies/vertical/chartscii_pastel_inverted_underline_dark_fill.png)      |\n\n## horizontal\n\n| options                                                               | chart                                                               |\n| --------------------------------------------------------------------- | ------------------------------------------------------------------- |\n| pastel theme with bold labels and percentage                          | ![](./shellfies/horizontal/chartscii_pastel_bold_percentage.png)    |\n| lush theme with inverted labels and naked chart                       | ![](./shellfies/horizontal/chartscii_pastel_lush_invert_naked.png)  |\n| beach theme with underlined labels and different structure characters | ![](./shellfies/horizontal/chartscii_beach_underline_structure.png) |\n| pastel theme with padding of 1 and custom char                        | ![](./shellfies/horizontal/chartscii_pastel_char.png)               |\n| pastel theme with naked chart to create multiple loaders              | ![](./shellfies/horizontal/chartscii_loaders.png)                   |\n\n# Unicode issues\n\nUnfortunately, there are some known issues with specific unicode characters width.  \nThis means that some emoji/unicode characters renders as 2 characters wide (or more) instead of 1, which is not a problem in itself.  \nThe problem is that Javscript determines this length as 1, which creates an issue with label alignment, or drawing the chart bars correctly.\n\n\u003e [!WARNING]  \n\u003e If you have issues with label alignment, or the chart bars aren't spaced correctly - you are probably using an emoji/unicode character which produce the wrong width in javascript.\n\nIf you encounter this issue unfortunately the current solution is to simply use a different emoji.  \n(For example: 🔥 works well while ✅ will result in a misaligned chart).  \nPRs for this problem are more than welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftool3%2Fchartscii","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftool3%2Fchartscii","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftool3%2Fchartscii/lists"}