Customizing charts

The terminal’s chart functions take the options of Chartist’s presets, and the layout is Chartist’s own. So an option changes the text art the way it changes the SVG chart, and what you know from the Chartist guides carries over. This page goes through the options you’ll reach for first.

Line interpolation

lineSmooth takes a function from Interpolation, as in the browser. Interpolation.step() turns each value into a step, which suits counts that change at a point in time:

import '@chartist-js/terminal/styles.css';
import './style.css';
import { Interpolation } from 'chartist';
import { lineChart } from '@chartist-js/terminal';

const art = document.querySelector('#art');
if (art) {
  art.innerHTML = lineChart(
    {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      series: [
        [3, 5, 2, 6, 4],
        [1, 2, 1, 3, 2]
      ]
    },
    {
      // Options of Chartist's lineChart(): a step for each value.
      lineSmooth: Interpolation.step(),
      showArea: true,
      showPoint: false,
      low: 0,
      axisY: { onlyInteger: true },
      columns: 34,
      rows: 16,
      format: 'html'
    }
  );
}

The other interpolations work the same way: Interpolation.none() for straight segments, simple() and cardinal() for curves, and monotoneCubic(), the default. A missing value (null) breaks the line, and fillHoles: true bridges it. Smooth or straight and Gaps in your data show them in SVG.

Options per series

Name your series, and series sets options for one of them. Here the signups are a stepped area next to the smooth visits:

import { Interpolation } from 'chartist';
import { lineChart } from '@chartist-js/terminal';

console.log(
  lineChart(
    {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      series: [
        { name: 'visits', data: [5, 2, 4, 2, 7] },
        { name: 'signups', data: [1, 3, 2, 5, 3] }
      ]
    },
    {
      series: {
        signups: {
          lineSmooth: Interpolation.step(),
          showArea: true,
          showPoint: false
        }
      }
    }
  )
);

Axes and scales

low and high, onlyInteger, labelInterpolationFnc and the axis types work as in Axes and scales. With autoScaleAxis() on the X axis, a line chart becomes a scatter plot:

import { autoScaleAxis } from 'chartist';
import { lineChart } from '@chartist-js/terminal';

console.log(
  lineChart(
    {
      series: [
        [
          { x: 1, y: 2 },
          { x: 3, y: 7 },
          { x: 6, y: 4 },
          { x: 9, y: 8 }
        ]
      ]
    },
    {
      showLine: false,
      low: 0,
      axisX: { type: autoScaleAxis(), onlyInteger: true },
      axisY: { labelInterpolationFnc: value => `${value}k` }
    }
  )
);

fixedScaleAxis() with ticks puts the ticks where you want them. The automatic scales keep their ticks at least two rows apart, so a short chart gets fewer of them, as a small SVG chart does.

Bars and pies

Stacked and horizontal bars, distributeSeries and reverseData work as on Bar charts. Pies take donut, startAngle, total and labelInterpolationFnc, so a gauge is half a donut:

import { barChart, pieChart } from '@chartist-js/terminal';

console.log(
  barChart(
    {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
      series: [
        [5, 4, 3, 7],
        [3, 2, 5, 3]
      ]
    },
    { stackBars: true, axisY: { onlyInteger: true } }
  )
);

// Half a donut, starting on the left.
console.log(
  pieChart(
    { series: [20, 10, 30, 40] },
    { donut: true, startAngle: 270, total: 200 }
  )
);

Where two stacked bars meet inside a cell, the cell shows both: the upper series as a block on the lower one’s background.

What stays in the browser

• Styling. A cell has a character and a color. The terminal colors by series, from palette or, in HTML, from the custom properties; line widths, dashes and your own classes don’t reach it.
• Size. There are no responsiveOptions and no container to measure: columns and rows set the size.
• Interaction. No animation, no tooltips: the output is text.

Next: plugins in the terminal, or every option of the chart functions on the API page.