# Customizing charts

> Interpolation, axes, options per series, stacked bars and gauges. Chartist's options change the text art the way they change the SVG.

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](https://chartist.dev/docs/line-charts/) 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:

**A stepped line** (runs in the browser):

`src/main.ts`:

```ts
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'
    }
  );
}
```

`src/style.css`:

```css
/* A terminal window around the text art, for the looks. It takes the
   chart's size: more columns or rows make it bigger. */
.window {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #17161c;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.35);
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #2a2830;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.dot:nth-child(2) {
  background: #febc2e;
}

.dot:nth-child(3) {
  background: #28c840;
}

.title {
  flex: 1;
  margin-right: 52px;
  text-align: center;
  color: #a8a6b0;
  font:
    600 12px system-ui,
    sans-serif;
}

.screen {
  padding: 12px;
  color: #e6e4ec;
  /* Text art reads the same custom properties as SVG charts. */
  --ct-label-color: rgba(255, 255, 255, 0.7);
  --ct-grid-color: rgba(255, 255, 255, 0.16);
}

.screen .ct-terminal {
  margin: 0;
  font-size: 13px;
  /* Narrower than the chart, the window cuts it off. */
  overflow: hidden;
  /* Bold labels; the dots and lines come from the stylesheet's own font. */
  font-weight: 700;
}

/* On the dark screen, the area shading needs a little more. */
.screen .ct-area {
  opacity: 0.75;
}
```

`index.html`:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A stepped line</title>
  </head>
  <body>
    <div class="window">
      <div class="title-bar" aria-hidden="true">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="title">ct-cli</span>
      </div>
      <div class="screen">
        <div id="art"></div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</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](https://chartist.dev/docs/line-charts/#smooth-or-straight) and [Gaps in your data](https://chartist.dev/docs/line-charts/#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:

```ts
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](https://chartist.dev/docs/axes-and-scales/). With `autoScaleAxis()` on the X axis, a line chart becomes a scatter plot:

```ts
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](https://chartist.dev/docs/bar-charts/). Pies take `donut`, `startAngle`, `total` and `labelInterpolationFnc`, so a gauge is half a donut:

```ts
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](https://chartist.dev/docs/styling-with-css/#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](https://chartist.dev/packages/terminal/plugins/) in the terminal, or every option of the chart functions on the [API page](https://chartist.dev/packages/terminal/api/).