chartist Documentation

Technical Documentation: chartist-js/chartist

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Chartist

Simple, responsive charts, drawn in SVG and styled with CSS. Tiny, typed, and happy without a build step.

chartist.dev · Getting started · API · Examples · Plugins · Changelog

Coming from Chartist 1? Your code keeps working. Coming from 1.x shows what's new, and the 1.x docs are at chartist.dev/v1/.

Install Copy Chapter

npm install chartist

import { lineChart } from 'chartist';
import 'chartist/styles.css';

lineChart('#chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3]
  ]
});

<div id="chart" class="ct-golden-section"></div>

No bundler? Chartist is a native ES module:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.css"
/>
<div id="chart" class="ct-golden-section"></div>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.js';

  lineChart('#chart', { series: [[1, 3, 2, 5]] });
</script>

Why Chartist Copy Chapter

• Style it with CSS. Plain SVG with predictable classes and custom properties for colors, lines and labels. No theme engine.
• Responsive, two ways. Options that change with media queries, or with the chart's own container.
• Composed charts. Bars and lines in one chart, on as many axes as you need.
• Renders anywhere SVG does. Render on a server, with real SVG text labels, for PDFs, email and images.
• Extend everything. Every element passes through an open pipeline you can hook into, and the community's plugins keep working.
• Tiny and typed. Written in TypeScript, no dependencies, and you ship only what you import.

Coming from 1.x Copy Chapter

Your 1.x code keeps working: the chart classes draw what they drew before. 1.x events and plugins work with chartist/compat. The classes are deprecated, and 3.0 removes them from chartist. Coming from 1.x explains what changed and how to move to the functions.

Community wrappers Copy Chapter

Chartist needs no wrapper: a chart is a container and a function call, and Charts in frameworks has recipes for React, Vue, Angular and Svelte, with server rendering. If you'd rather use a component, the community wraps Chartist for these stacks. Thank you to everyone who built them!

Wrappers built for 1.x run on v2: see Community wrappers for the npm overrides entry they need until they allow chartist@2. Maintain a wrapper that's missing here? Send a pull request.

Supported by Copy Chapter

Cube sponsors Chartist's maintenance. Thank you!

Contributing Copy Chapter

This repository holds the library (packages/chartist), its docs site at chartist.dev (apps/docs), the examples and the playground, in an Nx and pnpm monorepo. Clone it, run pnpm install, and run tasks through Nx, for example pnpm nx test chartist or pnpm nx dev docs. CONTRIBUTING.md has the setup, the tests and the submission guidelines.

License Copy Chapter

Dual-licensed under MIT or WTFPL, at your choice.

Overview (`docs/visual-design/README.md`) Copy Section

Visual design

Chartist's brand and the docs site's design were made in Claude Design. This folder is a snapshot of that canvas, kept as the design reference for the site.

• Canvas: https://claude.ai/artifact/CFCX75HRhyT28hXYSNdgbU (snapshot of version 1791919724-153a)
• Implemented in apps/docs: the tokens in src/styles/tokens.css, the mascot in src/components/Mascot.astro, the logomark in src/components/Logomark.astro. Styling rules: apps/docs/STYLING.md.

To change the design, change the site; the canvas is the reference for new pages and components, not a source the site is generated from. When the design itself changes in the canvas, download a new snapshot here and say what changed in the commit.

Contents Copy Chapter

• project/canvas.json: the canvas index (artboard titles, positions, grouping).
• project/chartist.css: the design system. It holds the palette (--p-*), the semantic tokens for light (.cx) and dark (.cx.dark), the mascot colors (--m-*), the chart series palette (--ct-series-*, including the accessible theme), and component styles.
• project/*.dc.html: one file per artboard.
• project/paper.png, project/paper-dark.png: the design's paper texture, "Cream Paper" from Subtle Patterns (CC BY-SA 3.0). The site uses it as the page ground texture (apps/docs/src/assets/).
• assets/reference-*-0x.svg: the original 2014 mascot and icon, uploaded as a reference for the redesign.

The .dc.html files are Claude Design component pages. They need the Design runtime (support.js, not included) to render, so read them as source (markup, tokens, copy, data), and open the canvas link to see them rendered.

The design's key choices Copy Chapter

• Mascot: the 0.x gentleman (top hat, moustache, red waistcoat, easel, hay fork), redrawn. All his colors are custom properties.
• Palette: cream became Paper, red became Waistcoat (#C8102E), yellow became Mustard (logo tile), warm gray became Ink.
• Chart series colors: unchanged from 1.5 (--ct-series-a … -o), plus an opt-in color-blind-safe theme.
• Typography: Zilla Slab (display) and Atkinson Hyperlegible Next (body).

Where the site differs from the snapshot Copy Chapter

• Code font: JetBrains Mono instead of Atkinson Hyperlegible Mono. All fonts are self-hosted.
• Code samples use the functional API and the real export paths; the design's samples use the 1.x classes and old paths.
• Charts are drawn by Chartist. The design's Chart component draws them with its own simplified math, as a mockup.
• Numbers and comparisons on the landing page come from a dated facts snapshot (pnpm nx run docs:facts) and measurements, where the design has placeholders. The design's "Trusted by" logo row became a curated "Used by" list that links to the evidence.

Overview (`packages/chartist/README.md`) Copy Section

Chartist

Simple, responsive charts, drawn in SVG and styled with CSS. Tiny, typed, and happy without a build step.

chartist.dev · Getting started · API · Examples · Plugins · Changelog

Coming from Chartist 1? Your code keeps working. Coming from 1.x shows what's new, and the 1.x docs are at chartist.dev/v1/.

Install Copy Chapter

npm install chartist

import { lineChart } from 'chartist';
import 'chartist/styles.css';

lineChart('#chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3]
  ]
});

<div id="chart" class="ct-golden-section"></div>

No bundler? Chartist is a native ES module:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.css"
/>
<div id="chart" class="ct-golden-section"></div>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.js';

  lineChart('#chart', { series: [[1, 3, 2, 5]] });
</script>

Why Chartist Copy Chapter

• Style it with CSS. Plain SVG with predictable classes and custom properties for colors, lines and labels. No theme engine.
• Responsive, two ways. Options that change with media queries, or with the chart's own container.
• Composed charts. Bars and lines in one chart, on as many axes as you need.
• Renders anywhere SVG does. Render on a server, with real SVG text labels, for PDFs, email and images.
• Extend everything. Every element passes through an open pipeline you can hook into, and the community's plugins keep working.
• Tiny and typed. Written in TypeScript, no dependencies, and you ship only what you import.

Coming from 1.x Copy Chapter

Your 1.x code keeps working: the chart classes draw what they drew before. 1.x events and plugins work with chartist/compat. The classes are deprecated, and 3.0 removes them from chartist. Coming from 1.x explains what changed and how to move to the functions.

Community wrappers Copy Chapter

Chartist needs no wrapper: a chart is a container and a function call, and Charts in frameworks has recipes for React, Vue, Angular and Svelte, with server rendering. If you'd rather use a component, the community wraps Chartist for these stacks. Thank you to everyone who built them!

Wrappers built for 1.x run on v2: see Community wrappers for the npm overrides entry they need until they allow chartist@2. Maintain a wrapper that's missing here? Send a pull request.

Supported by Copy Chapter

Cube sponsors Chartist's maintenance. Thank you!

License Copy Chapter

Dual-licensed under MIT or WTFPL, at your choice.

Overview (`packages/essentials/README.md`) Copy Section

@chartist-js/essentials

The Chartist additions people ask for most, as layers you add to a chart. They're kept out of the core, so charts that don't use them stay small, and they're made and released together with Chartist.

It holds axisTitle(), targetLine(), trendLine(), valueLabels() and logAxis() today. More layers and axes follow.

Install Copy Chapter

npm install @chartist-js/essentials

It depends on chartist, which npm installs with it. Load its stylesheet after Chartist's:

import 'chartist/styles.css';
import '@chartist-js/essentials/styles.css';

Without a bundler Copy Section

Map both packages in an import map, so the package and your page share one copy of Chartist:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2/dist/index.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@chartist-js/essentials@2/dist/styles.css"
/>
<script type="importmap">
  {
    "imports": {
      "chartist": "https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.js",
      "@chartist-js/essentials": "https://cdn.jsdelivr.net/npm/@chartist-js/essentials@2/dist/index.js"
    }
  }
</script>
<script type="module">
  import { lineChart } from 'chartist';
  import { axisTitle } from '@chartist-js/essentials';
</script>

Axis titles Copy Chapter

axisTitle() names an axis. It reserves the room the title needs next to the axis labels, so you don't have to guess a padding, and the title never overlaps the labels:

import { lineChart } from 'chartist';
import { axisTitle } from '@chartist-js/essentials';

lineChart(
  '#chart',
  { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [[12, 9, 7, 8, 5]] },
  {
    layers: {
      above: [
        axisTitle({ axis: 'x', text: 'Day' }),
        axisTitle({ axis: 'y', text: 'Visits' })
      ]
    }
  }
);

One layer draws one title. On the presets the axes are x and y; in a composed chart, use the ids you gave the axes:

import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  cartesianAxes,
  chart,
  line,
  stepAxis
} from 'chartist';
import { axisTitle } from '@chartist-js/essentials';

chart('#chart', {
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    series: [
      [120, 150, 170, 210],
      [135, 160, 190, 230]
    ]
  },
  axes: cartesianAxes([
    { id: 'month', side: 'bottom', type: stepAxis() },
    { id: 'eur', side: 'left', type: autoScaleAxis() },
    { id: 'usd', side: 'right', type: autoScaleAxis() }
  ]),
  layers: [
    axisGrid({ axes: ['month', 'eur'] }),
    line({ series: [0], x: 'month', y: 'eur' }),
    line({ series: [1], x: 'month', y: 'usd' }),
    axisLabels(),
    axisTitle({ axis: 'month', text: 'Month', align: 'end' }),
    axisTitle({ axis: 'eur', text: 'EUR' }),
    axisTitle({ axis: 'usd', text: 'USD', flip: true })
  ]
});

Titles on the same side stack outward in the order of layers.

Styling Copy Section

The title is an SVG text with the classes ct-axis-title, ct-horizontal or ct-vertical, and ct-start or ct-end. It looks like the axis labels until you say otherwise:

.ct-axis-title {
  --ct-axis-title-color: #555;
  --ct-axis-title-size: 0.875rem;
  font-weight: 600;
}

Target and trend lines Copy Chapter

targetLine() draws a line across the chart at a value, such as a goal or a limit, with an optional label. trendLine() fits a straight line through each series' values (least squares) and draws it in the series' color:

import { lineChart } from 'chartist';
import { targetLine, trendLine } from '@chartist-js/essentials';

lineChart(
  '#chart',
  {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [[620, 810, 740, 930, 880, 1020]]
  },
  {
    low: 0,
    layers: {
      above: [targetLine({ value: 1000, label: 'Goal' }), trendLine()]
    }
  }
);

A target line takes value, label, className, the axis it's on (a Y axis draws it across, an X axis up and down) and where its label sits. A trend line's node knows its slope, intercept and correlation. On a log axis it's fitted to the logarithms, so it's straight there. Style them with --ct-target-line-color, --ct-target-line-width, --ct-target-line-dasharray, --ct-trend-line-width and --ct-trend-line-dasharray.

Value labels Copy Chapter

valueLabels() writes each value next to its point or bar: above points, past the ends of bars, and in the middle of stacked segments. Labels that don't fit their bar or would leave the chart move to where they fit:

import { barChart } from 'chartist';
import { valueLabels } from '@chartist-js/essentials';

barChart(
  '#chart',
  { labels: ['Q1', 'Q2', 'Q3'], series: [[1250, 1830, 1470]] },
  {
    layers: {
      above: [
        valueLabels({
          locale: 'en-US',
          numberFormat: { style: 'currency', currency: 'USD' }
        })
      ]
    }
  }
);

format(item) gets the same item as the format of @chartist-js/tooltips: undefined keeps the default text, null draws no label, and \n starts a new line. pointPosition, barPosition and offset place the labels, roles and series pick what gets one. Style them with --ct-value-label-color, --ct-value-label-inside-color and --ct-value-label-size.

Log axis Copy Chapter

logAxis() is an axis type for values that span several orders of magnitude. Each power of the base is the same distance from the next, so 100, 1,000 and 10,000 are evenly spaced:

import { lineChart } from 'chartist';
import { logAxis } from '@chartist-js/essentials';

lineChart(
  '#chart',
  {
    labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
    series: [[120, 980, 4100, 36000, 210000, 850000]]
  },
  {
    axisY: {
      type: logAxis({ minorTicks: true }),
      labelTransform: value => value.toLocaleString('en-US')
    }
  }
);

The axis's own options work as on the core's axes: low and high set the range exactly, ticks sets the ticks by hand, and labelTransform formats the labels. Zero and negative values have no place on a log scale: they're drawn at the start of the axis. Use null for a gap. A trendLine() on a log axis is fitted to the logarithms, so it's straight on the chart.

On the server Copy Chapter

The layers and the log axis are part of the scene, so they render with chartist/server and hydrate like the rest of the chart:

import { lineChartConfig } from 'chartist';
import { renderToString, toScene } from 'chartist/server';
import { axisTitle } from '@chartist-js/essentials';

const config = lineChartConfig(
  { labels: ['Mon', 'Tue', 'Wed'], series: [[12, 9, 7]] },
  { layers: { above: [axisTitle({ axis: 'y', text: 'Visits' })] } }
);
console.log(renderToString(toScene(config, { width: 600, height: 300 })));

@chartist-js/terminal draws them too, vertical titles in a column.

License Copy Chapter

MIT or WTFPL, like Chartist. See chartist.dev for the guides.

Overview (`packages/examples/README.md`) Copy Section

@chartist/examples

The Chartist examples, shared by the docs site, the live playground and the visual regression tests (packages/visual). Private, never published.

Example format Copy Chapter

Each example is a folder laid out like an npm create vite vanilla TypeScript starter (minus package.json):

<type>/<name>/
  index.html     the chart container and <script type="module" src="/src/main.ts">
  src/main.ts    imports 'chartist/styles.css' and the chart from 'chartist'
  src/style.css  optional, imported from src/main.ts

Copy a folder into a Vite app that has chartist installed and it runs unchanged. Examples contain only code a user would write for that chart:

• no harness, test or docs code;
• only erasable TypeScript syntax (no enums, namespaces, parameter properties or decorators), with type-only imports marked type;
• CSS imported from TypeScript (chartist/styles.css, relative ./style.css), and no Vite-specific features (import.meta.glob, ?raw, path aliases);
• seeded randomness (an inlined mulberry32) instead of Math.random(), so every render is identical.

src/main.ts uses the functional API (lineChart(), chart(), v2 plugins) and teaches v2: when JavaScript would only style an element, it uses the custom properties (--ct-bar-width, --ct-color, …) or a class and a rule in src/style.css.

Each example has an entry in the manifest, index.ts (title, a one-sentence description for the gallery card and the example's page, viewports, sizing, settle time). pnpm nx check examples keeps the manifest and the folders in sync.

Classic entries Copy Chapter

Every example that came from 1.x also has src/main.classic.ts, its original 1.x code (classic: true in the manifest; compat: true when that code needs the compat plugin). Never edit a classic file, comments included: it's the 1.x original. The docs show it behind the example's v2 / 1.x switch.

The visual tests screenshot both entries against one baseline image, recorded from Chartist 1.5.0 with the classic code, which proves that the functions draw what the classes drew. When the two differ:

1. Suspect the functional code first: an option in the wrong place, a different default, a node replaced at a different position, attributes in a different order.
2. If v2 draws it differently on purpose, give the entry a reason in the manifest and a baseline from the local build: ownBaseline when only the functional entry differs, localBaseline when v2 changes the chart for both APIs (the 1.5.0 run then skips it).
3. If it's a library bug, fix the library (with a GitHub issue labeled v2), not the example.

New examples have no 1.x code (v2: true); their baselines come from the local build, and the 1.5.0 run skips them. Baselines are recorded only on the reference platform (see "Visual regression" in docs/decisions.md).

Commands Copy Chapter

• pnpm nx typecheck examples: type-checks every example in strict mode against the built chartist declarations (builds chartist first).
• pnpm nx check examples: validates the manifest against the folders.
• pnpm nx run visual:test:visual: screenshots every example (see packages/visual).

Coverage of the 1.x examples Copy Chapter

The 32 1.x CodeSandbox examples (sandboxes/ at the v1.5.0 tag) moved here in the Vite format. Their history follows the files: git log --follow <type>/<name>/src/main.ts for the functional code, which was rewritten in place, and git log --follow -C on src/main.classic.ts, a copy of the 1.x code.

Every 1.x Storybook story (src/charts/*/*.stories.ts) maps to an example. A story was merged into a sandbox example only if its data, options and event handlers are identical (same values and same behavior). All other stories became test-only examples (docs: false), with these changes:

• the detached root element became the #chart container;
• faker (story LineChart/Scatter) became an inlined seeded mulberry32, still drawing whole numbers from 0 to 100;
• new Date() (story PieChart/OverlappingLabels) became a fixed date;
• PieChart/GaugeDonut and PieChart/RelativeDonutWidth draw a fixed 500×500 chart, so their container has no fixed height and the tests keep its size (size: 'viewport').

LineChart/PathAnimation skipped its animation in storyshots; line/path-animation animates and the tests screenshot its end state. The viewports column lists the story's storyshots viewports (iPad → tablet, iPhone X → mobile, iPhone X landscape → mobile-landscape); pnpm nx check examples asserts that this table matches the manifest.

Overview (`packages/playground/README.md`) Copy Section

@chartist/playground

In-browser playground for Chartist example projects: an editor with file tabs and a live preview of a Vite-style example (index.html, src/main.ts, src/style.css), without a server. Private, not published. Spec: openspec/specs/example-playground/spec.md.

How it works:

1. Strip TypeScript in the browser (sucrase by default, ts-blank-space optional).
2. Turn CSS imports from TypeScript into <link>/<style> tags.
3. Resolve relative imports to data-URL modules through an import map, which also maps chartist to a configurable URL.
4. Render the result into an `` via srcdoc. Errors and console output come back through postMessage.

import { createPlayground } from '@chartist/playground';

await createPlayground(document.querySelector('#playground')!, {
  files: { 'index.html': '…', 'src/main.ts': '…' },
  chartistUrl: '/lib/chartist/index.js', // must send Access-Control-Allow-Origin
  stylesUrl: '/lib/chartist/index.css',
  types: { url: '/lib/chartist/' }, // index.d.ts and compat.d.ts, optional
  chartistVersion: '^1.5.0' // for "Open in StackBlitz"
});

compile(files, options) is the DOM-free core, usable on its own.

With types, TypeScript files get type errors (underlined; Ctrl/Cmd+Shift+M lists them), completions (on ., while typing, Ctrl+Space) and the type and doc comment of a name on hover. The TypeScript language service runs in a worker (src/types/), one per page, which loads when a TypeScript editor first gets focus: about 1.3 MB compressed with the lib declarations, from the page's own origin. Type errors never stop the preview. The playground element gets data-types="ready" once types answer. CSS files complete the stylesheet's --ct-* properties.

Tasks Copy Chapter

The preview uses the docs dev server's port; while that runs, serve the demo on another one with node test/e2e/serve.mjs (from packages/playground). The e2e tests use port 4331.

Browsers for the e2e test: pnpm --filter @chartist/playground exec playwright install chromium firefox webkit.

The demo URL takes ?example=&transformer=sucrase|ts-blank-space, and &types=off for plain editing.

"Open in StackBlitz" can only be checked by hand: it opens stackblitz.com in a new tab.

Overview (`packages/terminal/README.md`) Copy Section

@chartist-js/terminal

Chartist charts in the terminal. Line, bar and pie charts with Chartist's own layout, labels and series colors, drawn in braille dots and block characters:

It renders the scene Chartist builds for any chart (toScene()), the same one the SVG renderers get. So a terminal chart takes the options you know from lineChart(), barChart() and pieChart(), and the same chart can also come out as text-art HTML.

There are two ways to use it: the ct-cli command, and an API for your own CLI tools.

Install Copy Chapter

npm install @chartist-js/terminal

It depends on chartist, which npm installs with it. The command needs Node.js 22 or later; the API runs in any JavaScript runtime, browsers included.

The command Copy Chapter

npx @chartist-js/terminal demo

Installed globally (npm install @chartist-js/terminal), the command is ct-cli. Give it a chart type and the series, each a comma-separated list of numbers:

ct-cli line 12,9,7,8,5 2,1,3.5,7,3 --labels Mon,Tue,Wed,Thu,Fri --names Visitors,Sign-ups --smooth --area
ct-cli bar 5,4,3,7 3,2,9,5 --labels Q1,Q2,Q3,Q4 --stack
ct-cli bar 5,3,8 --labels Bananas,Apples,Kiwis --horizontal
ct-cli pie 20,10,30 --labels Bananas,Apples,Kiwis --donut

An empty value is a hole: 1,,3.

Data from files and pipes Copy Section

Without series arguments, the data comes from --data <file> or from stdin. JSON works as { "labels": [...], "series": [...] } or as a plain array:

echo '{"labels":["Bananas","Apples","Kiwis"],"series":[20,10,30]}' | ct-cli pie --donut

Anything else is read as rows of values, one series per row, separated by commas, semicolons, tabs or spaces. A first row that isn't numbers is the labels, and a first column that isn't numbers is the series names:

printf ',Mon,Tue,Wed\nVisitors,3,5,4\nSign-ups,1,2,3\n' | ct-cli bar --stack

Options Copy Section

-h is the height. Help is --help.

Colors follow your terminal: 24-bit when COLORTERM says so, 256 colors otherwise, none when the output goes to a file or a pipe, when NO_COLOR is set or TERM is dumb. FORCE_COLOR (0 to 3) overrides that, and --color overrides everything.

In your CLI tool Copy Chapter

lineChart(), barChart() and pieChart() take the data and options of Chartist's presets, plus a size in columns and rows, and return the chart as a string:

import { detectColorMode, legend, lineChart } from '@chartist-js/terminal';

const data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    { name: 'Visitors', data: [12, 9, 7, 8, 5] },
    { name: 'Sign-ups', data: [2, 1, 3.5, 7, 3] }
  ]
};
const color = detectColorMode(process.stdout, process.env);

console.log(
  lineChart(data, {
    columns: 60,
    rows: 14,
    showArea: true,
    lineSmooth: true,
    color
  })
);
console.log(legend(data, { columns: 60, color }));

The Chartist options work as they do in the browser: stackBars, horizontalBars, low and high, axisY.labelTransform, donut and the others. The terminal options are:

• columns and rows: the size in cells, 80 × 20 by default;
• color: truecolor (default), 256, 16 or none for plain text;
• palette: series colors as hex, first series first, Chartist's colors by default;
• format: text (default), html for a string of HTML, or element for the same markup as a pre element.

detectColorMode(stream, env) picks the color mode the way the command does; pass it process.stdout and process.env.

Any chart, any scene Copy Section

The chart functions are shortcuts. For a composed chart, or a scene a plugin changed, lay it out with terminalSize() and render it yourself:

import { barChartConfig, toScene } from 'chartist';
import { renderToTerminal, terminalSize } from '@chartist-js/terminal';

const scene = toScene(
  barChartConfig({ labels: ['Q1', 'Q2', 'Q3'], series: [[5, 4, 3]] }),
  terminalSize(40, 10)
);
console.log(renderToTerminal(scene, { color: 'none' }));

A cell stands for 8 × 16 px, so a braille dot is 4 × 4 px and circles stay round; terminalSize() measures text one cell per character, so labels land on the character grid. Nodes a plugin adds are drawn by their element: line and path as lines, circle as a filled disc of its radius (a point when it's tiny), text as a label.

HTML output Copy Chapter

renderToHtml(scene), or format: 'html', gives the same chart as HTML: a pre element with classes instead of colors, ct-series-a, ct-grid, ct-label and so on. In a browser, renderToElement(scene), or format: 'element', builds that pre element with DOM methods, so the page needs no innerHTML, also where a Content Security Policy requires Trusted Types. Load the stylesheet to color it:

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

document
  .querySelector('#chart')
  ?.replaceChildren(lineChart({ series: [[1, 3, 2]] }, { format: 'element' }));

Every character sits in a cell 0.6 × 1 em, and the stylesheet brings a small font of its own (embedded, under 5 kB) for the braille dots, the grid and the bar blocks, drawn to fill a cell edge to edge. Fonts on the reader's system rarely have all of those, so the text art looks the same in every browser. Letters and digits use a monospace font: JetBrains Mono when the page loads it, else the system's. The stylesheet reads Chartist's custom properties (--ct-series-a to --ct-series-o, --ct-grid-color, --ct-label-color), so your Chartist theme colors the text art too. ct-cli --html --standalone writes a complete page.

Fonts Copy Chapter

In a terminal, braille and box-drawing characters need a font that has them. Most terminal fonts do; on Windows, Cascadia Mono works. If the dots look scattered or the grid has gaps, your font is missing them. HTML output brings its own font for them, so it doesn't depend on the reader's fonts. The stylesheet embeds it as a data: URL, so a page with a Content Security Policy needs font-src data:; without it, the browser falls back to the reader's fonts.

Limits Copy Chapter

• Line, bar and pie charts, and the nodes listed above. Other layers draw what their nodes are made of, or nothing.
• Each character of a label is one cell, so wide characters (CJK, emoji) shift the columns after them.
• No animation, no interaction: it prints a chart and is done.

License Copy Chapter

MIT or WTFPL, like Chartist. See chartist.dev for the guide.

Overview (`packages/tooltips/README.md`) Copy Section

@chartist-js/tooltips

Tooltips for Chartist charts: hover a point, tap a bar or tab to a slice, and a tooltip shows its label, series and value. It works with the mouse, touch and the keyboard, stays on its value while the chart updates, and takes its looks from CSS.

Install Copy Chapter

npm install @chartist-js/tooltips

It brings chartist along. Load its stylesheet after Chartist's, and add the plugin to a chart:

import 'chartist/styles.css';
import '@chartist-js/tooltips/styles.css';
import { lineChart } from 'chartist';
import { tooltips } from '@chartist-js/tooltips';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [{ name: 'Visitors', data: [1200, 1500, 1350, 1600, 1100] }]
  },
  { plugins: [tooltips()] }
);

Without a bundler Copy Section

The browser build imports nothing, so it works next to any copy of Chartist 2:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2/dist/index.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@chartist-js/tooltips@2/dist/styles.css"
/>
<div id="chart"></div>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.js';
  import { tooltips } from 'https://cdn.jsdelivr.net/npm/@chartist-js/tooltips@2/dist/index.min.js';

  lineChart('#chart', { series: [[5, 9, 7, 8, 5]] }, { plugins: [tooltips()] });
</script>

Your own text Copy Chapter

numberFormat sets how the default text writes values, as Intl.NumberFormat options, and format replaces the text. Return null for no tooltip:

import { barChart } from 'chartist';
import { tooltips } from '@chartist-js/tooltips';

barChart(
  '#chart',
  { labels: ['Q1', 'Q2', 'Q3'], series: [[1250, 1830, 1470]] },
  {
    plugins: [
      tooltips({ numberFormat: { style: 'currency', currency: 'CHF' } })
    ]
  }
);

barChart(
  '#other',
  { labels: ['Q1', 'Q2', 'Q3'], series: [[12, 18, 0]] },
  {
    plugins: [
      tooltips({
        format: item =>
          item.value === 0
            ? null
            : `${item.label}\n${String(item.value)} orders`
      })
    ]
  }
);

Content is text, never HTML, so data can't put markup into the page. For markup or a framework's template, render fills the tooltip yourself:

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

lineChart(
  '#chart',
  { series: [[5, 9, 7]] },
  {
    plugins: [
      tooltips({
        render(content, item) {
          const value = document.createElement('strong');
          value.textContent = String(item.valueIndex);
          content.append('Value ', value);
          // Return a function to undo it, e.g. to unmount a component.
        }
      })
    ]
  }
);

Options Copy Chapter

Styling Copy Chapter

The tooltip is .ct-tooltip, with .ct-tooltip-title, .ct-tooltip-series and .ct-tooltip-value. Change its look with custom properties, on the page or a chart's container:

.my-chart {
  --ct-tooltip-background: navy;
  --ct-tooltip-color: white;
  --ct-tooltip-hide-delay: 500ms;
}

It shows in the top layer, so overflow: hidden and z-index don't cut it off, and it's placed with the CSSOM, so it works under a strict Content Security Policy.

License Copy Chapter

MIT or WTFPL, like Chartist. See chartist.dev for the guides.

Overview (`apps/docs/public/v0/README.md`) Copy Section

The 0.x docs

These files are the Chartist 0.11 documentation, formerly at
https://gionkunz.github.io/chartist-js/. Astro copies them to /v0/ of the
site as they are. The old URLs redirect to chartist.dev: pages without a
#hash to their v2 counterpart, sections without one to the same place
here.

They are not edited by hand beyond the changes listed below. The 0.x
toolchain (Grunt, Assemble, Bower) isn't kept.

Where they come from Copy Chapter

The gh-pages branch of gionkunz/chartist-js at c1e49e1 (August 2022),
the last build of the 0.x site. Copied: the six pages (index.html,
getting-started.html, examples.html, api-documentation.html,
plugins.html, apidoc/index.html) and the files they load
(scripts/all.js, styles/, images/, favicon.ico, apidoc/scripts/,
apidoc/styles/).

Not copied, because no page loads them: bower_components/ (most of the
build's 19 MB), test-chart.html, doc-clean-pull.sh, 404.html and
robots.txt.

What changed Copy Chapter

• Removed the "Get awesome Dashboard Templates by Creative Tim" section
  of the home page, its .affiliate-project* CSS and its three images on
  S3; the Google Analytics snippet on every page; the version notice pop-up
  added in 2022 (its markup, CSS and script); and the html5shiv script for
  IE 8 in apidoc/index.html, whose host is gone.
• Fonts are served from fonts/ instead of Google Fonts and cdnjs: the
  WebFont loader snippet on each page is replaced by a link to
  fonts/fonts.css, which loads Oxygen 300/400/700 and Source Code Pro
  400/700 (SIL OFL 1.1, latin subset from fontsource) and Font Awesome
  4.1.0. Their licenses are next to them. With this, no page makes a request
  to another host.
• Added a note at the top of each page: "This is the archived
  documentation of Chartist 0.11. The current docs are at chartist.dev." Its
  <style> sits next to it.
• apidoc/index.html shows images/chartist-icon.svg instead of a
  Chartist Guy GIF on raw.github.com that no longer exists.

Overview (`apps/docs/public/v1/README.md`) Copy Section

The 1.x docs

These files are the Chartist 1.5.x documentation (formerly at
https://chartist.dev/), the static output of its Docusaurus website. Astro
copies them to /v1/ of the site as they are.

They are not edited by hand. The 1.x docs won't be updated again, so the
Docusaurus stack isn't kept; if they ever need to change, rebuild them as
below and replace this folder.

How they were built Copy Chapter

Built once on 2026-10-14, from the v1.5.0 sources (website/ of
chartist-js/chartist at the v1.5.0 tag, plus the commit after it that
removed the analytics):

1. Copy the 1.x repository to a scratch folder outside this repository.
2. In website/docusaurus.config.js: baseUrl: '/v1/', noIndex: false, and
   no editUrl (there is nothing to edit any more). url stays
   https://chartist.dev; trailingSlash stays false, because the
   generated API pages link each other relatively (../#series).
3. pnpm@7 install --frozen-lockfile --ignore-scripts (the 1.x lockfile is
   pnpm 7's), then BRANCH=v1.5.0 docusaurus build in website/ with Node 22.
   BRANCH sets the tree of the CodeSandbox example embeds, so they show the
   1.5.0 sandboxes.
4. Copy website/build/ here (there are no source maps).

Pages are .html files linked without the extension (/v1/api/basics), as
Docusaurus writes them with trailingSlash: false; the host serves
page.html for /page, as GitHub Pages does.

Overview (`apps/docs/src/assets/README.md`) Copy Section

Assets

• paper.png, paper-dark.png: the page ground texture, from the design (docs/visual-design/project/). Based on "Cream Paper" from Subtle Patterns (Toptal), licensed under CC BY-SA 3.0, recolored as an overlay for the Chartist v2 design. These two files stay under CC BY-SA 3.0 and need visible attribution on the site.
• sponsors/cube-logo-light.svg, sponsors/cube-logo-dark.svg: Cube's logo for light and dark grounds, unchanged from Cube's brand kit (https://cube.dev/brand, downloaded 2026-10-14). Its rules: use the files as provided (no recoloring or effects), the matching file for each ground instead of inverting, clear space of at least the cube mark's width around the logo, and no implied partnership beyond the real one (Cube sponsors Chartist).

Apps Docs Src Content Docs Getting Started (`apps/docs/src/content/docs/getting-started.mdx`) Copy Section

title: Getting started group: Start here order: 1 Copy Chapter

import Step from '../../components/docs/Step.astro';
import Callout from '../../components/docs/Callout.astro';
import LiveExample from '../../components/LiveExample.astro';

export const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3]
]
};

**Works without a bundler.** Chartist ships as a native ES module, so a ` Table of Contents 473

Table of Contents

473 sections

Technical Documentation: chartist-js/chartist Overview (`README.md`) Chartist Install Why Chartist Coming from 1.x Community wrappers Supported by Overview (`docs/visual-design/README.md`) Visual design Contents The design's key choices Where the site differs from the snapshot Overview (`packages/chartist/README.md`) Chartist Install Why Chartist Coming from 1.x Community wrappers Supported by Overview (`packages/essentials/README.md`) @chartist-js/essentials Install Without a bundler Axis titles Styling Target and trend lines Value labels Log axis On the server Overview (`packages/examples/README.md`) @chartist/examples Example format Classic entries Commands Coverage of the 1.x examples Overview (`packages/playground/README.md`) @chartist/playground Tasks Overview (`packages/terminal/README.md`) @chartist-js/terminal Install The command Data from files and pipes Options In your CLI tool Any chart, any scene HTML output Fonts Limits Overview (`packages/tooltips/README.md`) @chartist-js/tooltips Install Without a bundler Your own text Options Styling Overview (`apps/docs/public/v0/README.md`) The 0.x docs Where they come from What changed Overview (`apps/docs/public/v1/README.md`) The 1.x docs How they were built Overview (`apps/docs/src/assets/README.md`) Assets Apps Docs Src Content Docs Getting Started (`apps/docs/src/content/docs/getting-started.mdx`) title: Getting started description: Your first chart in about two minutes. No build step, no bundler, no framework. An HTML file and a browser. group: Start here order: 1 Add the stylesheet and a container Import Chartist and draw a chart Open it in a browser Import Chartist by name Using npm Make it yours with CSS Where to next Apps Docs Src Content Packages Essentials Index (`apps/docs/src/content/packages/essentials/index.mdx`) title: '@chartist-js/essentials' description: The additions people ask for most, as layers you add to a chart, kept out of the core so charts without them stay small. order: 0 label: Overview Install Without a bundler Quick start Next Apps Docs Src Content Packages Terminal Index (`apps/docs/src/content/packages/terminal/index.mdx`) title: '@chartist-js/terminal' description: Chartist charts in the terminal and as text art in HTML, from the ct-cli command or from your own CLI tool. order: 0 label: Overview Install Quick start Next Apps Docs Src Content Packages Tooltips Index (`apps/docs/src/content/packages/tooltips/index.mdx`) title: '@chartist-js/tooltips' description: Tooltips for mouse, touch and keyboard that show a value's label, series and number, stay on their value while the chart updates, and take their looks from CSS. order: 0 label: Overview Install Without a bundler Quick start Next Decisions (`docs/decisions.md`) Decisions History Principles 1.x compatibility Layers Repository Distribution Maintained packages Security Road to 2.0 final Live updates Hydration Server rendering Releases Docs hosting Test strategy Visual regression Standards to monitor Typescript (`docs/typescript.md`) TypeScript Coding Guidelines Table of Contents Core Principles Functional Programming First Type Safety & Immutability Always Use `readonly` in Interfaces Never Use Enums - Use String Literal Union Types Prefer `unknown` Over `any` Use Discriminated Unions for Type Safety Naming Conventions Variables and Functions Classes, Interfaces, and Types Constants Private Fields Boolean Variables Type Definitions Interfaces vs Type Aliases Type Guards Generic Types Utility Types Functions & Methods Function Declarations Parameter Types Default Parameters Rest Parameters Classes & Services Class Property Initialization Method Visibility DTOs (Data Transfer Objects) Async Operations Always Use `async/await` Error Handling with Try-Catch Promisify Callback-Based APIs Error Handling Error Type Narrowing Never Silently Swallow Errors Modern JavaScript Features Destructuring Spread Operators Optional Chaining and Nullish Coalescing Template Literals Arrow Functions Imports & Exports Named Exports Only Import Organization Barrel Files Import Aliases Comments & Documentation JSDoc for Public APIs Code Comments TODO and FIXME Comments Summary Checklist Apps Docs STYLING (`apps/docs/STYLING.md`) Styling the docs site The cascade Tokens and the theme Shared classes (`src/styles/ui.css`) What stays CSS Changing a component Screenshot comparison Apps Docs WRITING (`apps/docs/WRITING.md`) Writing the Chartist docs Voice Page shape The pages Package pages Components Diagrams Code Checks Apps Docs Package.Json (`apps/docs/package.json`) Apps Docs Project.Json (`apps/docs/project.json`) Apps Docs Tsconfig.Json (`apps/docs/tsconfig.json`) Apps Docs Api Tsconfig.Essentials.Json (`apps/docs/api/tsconfig.essentials.json`) Apps Docs Api Tsconfig.Json (`apps/docs/api/tsconfig.json`) Apps Docs Api Tsconfig.Terminal.Json (`apps/docs/api/tsconfig.terminal.json`) Apps Docs Api Tsconfig.Tooltips.Json (`apps/docs/api/tsconfig.tooltips.json`) Apps Docs Api Typedoc.Essentials.Json (`apps/docs/api/typedoc.essentials.json`) Apps Docs Api Typedoc.Json (`apps/docs/api/typedoc.json`) Apps Docs Api Typedoc.Terminal.Json (`apps/docs/api/typedoc.terminal.json`) Apps Docs Api Typedoc.Tooltips.Json (`apps/docs/api/typedoc.tooltips.json`) Visual Design Project Canvas.Json (`docs/visual-design/project/canvas.json`) Apps Docs Src Data Facts.Json (`apps/docs/src/data/facts.json`) Apps Docs Src Data Plugin Files.Json (`apps/docs/src/data/plugin-files.json`) Apps Docs Src Data Used By Candidates.Json (`apps/docs/src/data/used-by-candidates.json`) Apps Docs Public V0 Fonts Oxygen LICENSE (`apps/docs/public/v0/fonts/oxygen-LICENSE.txt`) SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 Apps Docs Public V0 Fonts Source Code Pro LICENSE (`apps/docs/public/v0/fonts/source-code-pro-LICENSE.txt`) SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 Apps Docs Src Content Docs Animations (`apps/docs/src/content/docs/animations.mdx`) title: Animations description: Draw lines in, grow bars and reveal charts on scroll with CSS, reach for SMIL where CSS can't go, animate updates, and respect people who prefer less motion. group: Basics order: 6 Draw lines in Stagger Reveal on scroll SMIL, for what CSS can't animate Update animations Less motion Apps Docs Src Content Docs Axes And Scales (`apps/docs/src/content/docs/axes-and-scales.mdx`) title: Axes and scales description: Step axes, auto-scaled and fixed axes, XY plots with two-dimensional data, label formatting, and how the presets pick their axes. group: Basics order: 2 Three kinds of axes How the presets choose Tuning the auto scale Label text Aligning labels A line chart is only 1-dimensional?! Fixed stuff can be sweet too! Axes in composed charts Apps Docs Src Content Docs Bands (`apps/docs/src/content/docs/bands.mdx`) title: Bands description: Shade ranges on line and bar charts with the band() layer, between two series, around a group or at fixed values, and mark the values in or out of them. group: Basics order: 7 Band charts On a preset In or out of the band Styling Apps Docs Src Content Docs Bar Charts (`apps/docs/src/content/docs/bar-charts.mdx`) title: Bar charts description: Grouped, stacked, horizontal and distributed bars with barChart(), and how to space them. group: Chart types order: 2 Grouped bars Bar spacing Stacked bars Stack modes Horizontal bars Distributed series Low and high Goals and ranges Apps Docs Src Content Docs Coming From 1x (`apps/docs/src/content/docs/coming-from-1x.mdx`) title: Coming from 1.x description: Your Chartist 1.x charts keep running on v2. Here's what stays the same, what's new, and how to move to the functions one chart at a time. group: Start here order: 3 What keeps working Events need the compat plugin Your 1.x plugins Deprecated in 2.x, removed in 3.0 Moving to the functions 1. Swap the constructor 2. Know what's different about the handle 3. Rewrite draw handlers as plugins 4. Bring 1.x plugins along with `fromLegacyPlugin` Community plugins With modules, without a bundler With the UMD build With a bundler Plugins that are ES modules One copy of Chartist What's new Classic script tags What changed Apps Docs Src Content Docs Composed Charts (`apps/docs/src/content/docs/composed-charts.mdx`) title: Composed charts description: Build charts from axes and layers with chart(), for bars and a line on two Y axes, axes on any side and anything the presets don't cover. group: Chart types order: 4 Preset or compose? Bars and a line on two axes Axes Layers Lining up with bars Grouped stacks The rest of the config Apps Docs Src Content Docs Custom Layers (`apps/docs/src/content/docs/custom-layers.mdx`) title: Custom layers description: 'Write your own layers for chart() and the presets, from drawing to binding axes and series, widening axes and refining what other layers drew.' group: Advanced order: 3 A first layer What a layer is made of compose: drawing Axes and series refine: changing what others drew annotate: drawing from what others drew inset: room outside the chart Sharing a layer Apps Docs Src Content Docs Data And Options (`apps/docs/src/content/docs/data-and-options.mdx`) title: Data and options description: What a chart's data looks like, from plain arrays to named series with metadata, and how options set defaults for every series or just one. group: Basics order: 1 Labels and series Series objects Value objects Gaps in the data Two-dimensional values The options argument Options per series Where the full lists live Apps Docs Src Content Docs Events And Plugins (`apps/docs/src/content/docs/events-and-plugins.mdx`) title: Events and plugins description: Every chart is built in phases, and each phase is an event you can listen to and change. Plugins package those listeners so you can share them. group: Advanced order: 2 The pipeline The layout box Listening Scene nodes Dynamic coloring Change, replace or drop Decorate Writing a plugin Cleaning up Custom events Plugins for live updates New elements, kept elements Keys for your own nodes Keyframes Animate in step Sharing a plugin Publishing a plugin Apps Docs Src Content Docs Frameworks (`apps/docs/src/content/docs/frameworks.mdx`) title: Charts in frameworks description: Use Chartist in React, Vue, Angular and Svelte, with the chart rendered on the server and taken over in the browser. group: Advanced order: 6 The rule React Vue Angular Svelte What goes into updates Community wrappers Apps Docs Src Content Docs Line Charts (`apps/docs/src/content/docs/line-charts.mdx`) title: Line charts description: Lines, areas and points with lineChart(), from smoothing and gaps in your data to scatter plots and edge-to-edge lines. group: Chart types order: 1 Lines, points and areas Smooth or straight Pick your curve Gaps in your data Scatter plots From edge to edge Low and high Goals and ranges Apps Docs Src Content Docs Live Updates (`apps/docs/src/content/docs/live-updates.mdx`) title: Live updates description: Give a chart new data through its handle, and let it keep its SVG with liveDomRenderer(), so elements stay, plugins keep what they added and updates can animate. group: Advanced order: 1 New data New options Keep the SVG Importing chartist/live Which value is which What changed Cleaning up Animate updates Streaming Data and options at once What it costs Redrawing on resize Detach and destroy Apps Docs Src Content Docs Pie And Donut Charts (`apps/docs/src/content/docs/pie-and-donut-charts.mdx`) title: Pie and donut charts description: Pies, donuts and gauges with pieChart(), from the data shape to label placement, slice colors and half-circle gauges. group: Chart types order: 3 Your first pie Donuts Gauges Labels Label text Slices with names and colors Apps Docs Src Content Docs Responsive (`apps/docs/src/content/docs/responsive.mdx`) title: Responsive sugar topping description: Change what a chart draws, not only its size, with media queries per chart, and experimentally with container queries. group: Basics order: 5 Media queries Order and merging Responsive `chart()` Container queries Apps Docs Src Content Docs Security And Csp (`apps/docs/src/content/docs/security-and-csp.mdx`) title: Security and CSP description: Run Chartist on pages with a strict Content Security Policy or Trusted Types, and keep the data in your charts from injecting markup. group: Advanced order: 7 The policy Chartist needs Server-rendered markup Your data stays data Without innerHTML What's up to you Apps Docs Src Content Docs Server Rendering (`apps/docs/src/content/docs/server-rendering.mdx`) title: Server rendering description: Build a chart's scene without a browser and turn it into SVG markup, for server-rendered pages, PDFs, email and images. group: Advanced order: 4 Two outputs Two functions Size Measuring text SVG or HTML labels Where the markup goes Styles in the SVG How Chartist reads your CSS Another CSS engine Apps Docs Src Content Docs Sizing Charts (`apps/docs/src/content/docs/sizing-charts.mdx`) title: Sizing charts description: Give a chart a responsive aspect ratio with a class, a fixed size with options, or any size CSS can describe. Chartist fills the box and redraws when it changes. group: Basics order: 3 Aspect ratios Fixed sizes Your own CSS More than one chart on a page What happens on resize Apps Docs Src Content Docs Ssr Hydration (`apps/docs/src/content/docs/ssr-hydration.mdx`) title: SSR with hydration description: Render a chart into the server's HTML and let the browser take it over, keeping its elements, with live updates, plugins and animations from there on. group: Advanced order: 5 On the server and in the browser The hydrate render What causes repairs Choosing the server's size The server can't know the width Give the container a size Styles and text Render the markup once Apps Docs Src Content Docs Styling With Css (`apps/docs/src/content/docs/styling-with-css.mdx`) title: Styling with CSS description: Chartist draws plain SVG with predictable classes, so you style charts with the CSS you already write, from one custom property to a full theme. group: Basics order: 4 Custom properties Dark pages One color per series Plain selectors for the rest Colors for everyone Sass Apps Docs Src Content Docs Why Chartist (`apps/docs/src/content/docs/why-chartist.mdx`) title: Why Chartist? description: Chartist draws simple, responsive charts as SVG and leaves styling, interaction and the rest to the web platform. Here's what that means for you. group: Start here order: 2 SVG in the DOM Your stylesheet decides the look Tooltips, as a package Small, and only what you use No build step required Extend it through the pipeline Apps Docs Public V0 Fonts Font Awesome LICENSE (`apps/docs/public/v0/fonts/font-awesome/LICENSE.txt`) Apps Docs Public V1 Assets Js Main.45fc875e.Js.LICENSE (`apps/docs/public/v1/assets/js/main.45fc875e.js.LICENSE.txt`) Apps Docs Src Content Packages Essentials Axis Titles (`apps/docs/src/content/packages/essentials/axis-titles.mdx`) title: Axis titles description: Name an axis on any side of the chart. The title reserves its own room, so it never overlaps the labels. order: 1 One title per axis Several axes Placement Styling On the server and in the terminal Coming from chartist-plugin-axistitle Apps Docs Src Content Packages Essentials Log Axis (`apps/docs/src/content/packages/essentials/log-axis.mdx`) title: Log axis description: A logarithmic scale for values that span several orders of magnitude, with ticks at the powers of ten, minor grid lines and straight trend lines for exponential growth. order: 5 Linear or log Range and ticks Minor grid lines Labels Zero and negative values Bars Trend lines Next to a linear axis Coming from chartist-logaxis Apps Docs Src Content Packages Essentials Target Lines (`apps/docs/src/content/packages/essentials/target-lines.mdx`) title: Target lines description: Draw goals, limits and averages across a chart with targetLine(), on a preset or in a composed chart, horizontal or vertical. order: 2 A target line Several lines Vertical lines Styling Apps Docs Src Content Packages Essentials Trend Lines (`apps/docs/src/content/packages/essentials/trend-lines.mdx`) title: Trend lines description: Fit a straight line through each series with trendLine(), read how well it fits, and draw exponential trends on a log axis. order: 3 A trend through bars Points on a scale How well it fits Exponential growth Styling Apps Docs Src Content Packages Essentials Value Labels (`apps/docs/src/content/packages/essentials/value-labels.mdx`) title: Value labels description: Write each value next to its point or bar with valueLabels(), format the text like a tooltip's, and let labels that don't fit move to where they do. order: 4 Labels on bars Text Where they go When they don't fit Styling SVG, HTML, server and terminal Coming from the label plugins Apps Docs Src Content Packages Terminal Customizing Charts (`apps/docs/src/content/packages/terminal/customizing-charts.mdx`) title: Customizing charts description: Interpolation, axes, options per series, stacked bars and gauges. Chartist's options change the text art the way they change the SVG. order: 2 Line interpolation Options per series Axes and scales Bars and pies What stays in the browser Apps Docs Src Content Packages Terminal Plugins (`apps/docs/src/content/packages/terminal/plugins.mdx`) title: Plugins description: Plugins and layers change the scene, and the terminal draws the scene. A plugin that adds lines, circles and text works in the terminal as it does in SVG. order: 3 Marking values What the terminal draws Plugins that need a page Apps Docs Src Content Packages Terminal Terminal Rendering (`apps/docs/src/content/packages/terminal/terminal-rendering.mdx`) title: Terminal rendering description: Draw charts from the ct-cli command or from your own CLI tool, and as text art in HTML, with the data and options of Chartist's presets. order: 1 From the command line In your CLI tool Any scene Text art in HTML Fonts and limits Apps Docs Src Content Packages Tooltips Content And Styling (`apps/docs/src/content/packages/tooltips/content-and-styling.mdx`) title: Content and styling description: Your own text with format, your own markup or a framework's template with render, numbers, roles, positions, live charts and the custom properties of the tooltip. order: 1 Your own text Your own markup Which values, and where Roles from your own layers Live charts Styling Apps Docs Public V0 Apidoc Scripts Prettify Apache License 2.0 (`apps/docs/public/v0/apidoc/scripts/prettify/Apache-License-2.0.txt`)

Navigation & Discovery

Topic hubs, agent specifications, and quick tools

All Topic Hubs & Frameworks

🧠 Agent Skills ⚡ MCP Servers 🐳 Docker & Self-Host 💻 Apps & Installers 🔌 API Specs ⚖️ Benchmark & Compare 🖥️ CLI & Terminal ⚛️ React ▲ Next.js 🔥 Hono 🎨 Tailwind 🗄️ Database ⚡ ORM 🔒 Auth 🤖 AI Tools 📚 RAG & Vector 🔷 TypeScript 🐍 Python 🦀 Rust 🐹 Go

Agent Protocol & RFC Specifications

Agent Skills Index (RFC) /.well-known/agent-skills/index.json Copy

MCP Server Card (SEP-1649) /.well-known/mcp/server-card.json Copy

API Catalog (RFC 9727) /.well-known/api-catalog Copy

OpenAPI 3.1 Specification /openapi.json Copy

LLM Compact Context /llms.txt Copy

Agent Registration Spec /auth.md Copy

Quick Actions

Search Hub Compare Solutions Copy AI Prompt Back to Top

YakaAI • Zero-Auth Public Edge Hub by geekworkers.ch