I intend to take up a project that builds out a CLI using mander that makes requests to an API.

I am wondering how I would go about adding basic charts in the terminal that are similar to and a graph functionality in the terminal (similar to the GitHub contributions graph).

I am unable to find good npm packages for this (a Python alternative for this is termgraph), any help is appreciated.

I intend to take up a project that builds out a CLI using mander that makes requests to an API.

I am wondering how I would go about adding basic charts in the terminal that are similar to and a graph functionality in the terminal (similar to the GitHub contributions graph).

I am unable to find good npm packages for this (a Python alternative for this is termgraph), any help is appreciated.

• javascript
• node.js
• charts
• mand-line-interface

• Not sure of any ready made solutions, but using something like npmjs./package/chalk should be pretty easy to do – Keith Commented Dec 20, 2020 at 20:14

2 Answers 2

I don't know any package that display chart for the terminal, however, this can be done all by you using chalk.

This package allow you to display color within the terminal, it will be your job to format the console.log so it get printed with the right colors and width.

Otherwise, a quick search on npm, using terminal+chart keyword gave me the following interesting results:

• ervy
• cli-pie
• cli-chart
• terminal-bar
• ascii-chart
• asciichart

As @Dimitri suggested, you can take a look at a simple example using the chalk package for Node.js.

chart.js:

import chalk from 'chalk';

const rankingsData = {
  "Rankings": [
    8267,
    10747
  ],
  "Long Rankings": [
    6150,
    10494
  ],
  "Short Rankings":[
    0,
    3670
  ]
}

// Calculate the maximum value in the set. Will be used in normalization (see below):
const max = Math.max(...Object.values(rankingsData).flat());

// Helper function to 'normalize' values down to 100% according to min/max:
function normalize(value){
  return ( Math.floor((((value - 0) / (max - 0)) * 100)/2) )
}

Object.entries(rankingsData).forEach((([key, [first, second]])=>{

  const firstLength = " ".repeat(normalize(first));
  const secondLength = " ".repeat(normalize(second));

  console.log(
    key.padEnd(15," ") + ":", 
    chalk.bgBlue.bold(firstLength), 
    first + ".00"
  );
  console.log(
    " ".padEnd(16," "), 
    chalk.bgRed.bold(secondLength), 
    second + ".00"
  );
  // console.log("\n");
}));

$ npm install chalk
$ node chart.js