---
title: "Tokens, themes and charts"
description: "Give an app values it can change, or turn a table into animated charts and versions."
canonical: "https://terminal.lottiefiles.com/docs/layers/data/"
last_updated: 2026-10-27
---

# Tokens, themes and charts

Give an app values it can change, or turn a table into animated charts and versions.

[All layer types](https://terminal.lottiefiles.com/docs/layers.md) · [Editing on the stage](https://terminal.lottiefiles.com/docs/editing.md)

## Tokens and themes

A token is a value an app sets while the animation plays: a name, a colour, a score. An app sets
it through the dotLottie player (web, iOS, Android), for example `setColorSlot("accent", [1, 0,
0, 1])` or `setTextSlot("title", { t: "Hello" })`. LottieFiles calls them Motion Tokens.

- Click a value's name in the rail (**Fill**, **Position**, the text's **Says**) and it becomes a token,
  named for its layer (`$card-fill`). Type another name, or pick an existing token so one value
  drives several. `esc` takes it back. `#` does the same for the selected track in the score (the timeline).
- With nothing selected, the rail's TOKENS lists every token and its value: click one to type a
  new value. A gradient's value is its stops, a colour and a place each: `#ff0000 0, #0000ff 1`.
  Rest on a token and the layers it drives are outlined; ◇ marks one that animates.
- **Themes** are named sets of token values (light, dark, a brand) an app switches between with
  `setTheme("dark")`. `+` adds one: type its name ("Night Mode") and its id is made from it
  (`night-mode`). Click a theme and the stage shows it; values typed then are the theme's. In a
  theme that animates a token, a value typed is a key at the playhead. Click a theme again to
  rename it (its id stays). A `.lottie` keeps them.
- **The check** (`check`, at the TOKENS heading) tries each token at values an app might set
  (longer text, one long word, accents, nothing, big numbers) and looks at every frame for
  something running off the artboard, text overlapping, or letters the file can't draw. Click a
  finding to see it; **carry Latin** adds the missing letters.

## Data

Drop a table (`.csv`, `.tsv` or JSON rows). What happens depends on its columns.

- **Rows**: columns named for tokens (`name,title,accent`) make a version of the animation per
  row: a card per customer, a recap per user. TOKENS steps through them (`◂ ▸`) and exports them
  all, a file each, named by the `name` column.
- **Charts**: otherwise it's a chart, brought on as it plays. The first column gives the labels,
  each column of numbers a set of values. CHART in the rail picks its kind, and edits its data,
  units, labels and colours in place. `⇧X` draws an empty chart in a box.

| kind | draws |
| --- | --- |
| bars | columns rising, each value counting up above its bar |
| rows | bars across; with several columns of values they race, re-ranking |
| line | a line drawn on through its points, the area under it |
| donut | slices sweeping round, the total counting up in the middle |
| number | each value a big number counting up |

A chart is ordinary layers that every player draws, folded to one row in the score.

From a shell:

```
creator-tui tokens card.lottie                         # what an app can set, and the themes
creator-tui export card.lottie --set name="Ada" --set accent=#ff6b57 --format mp4
creator-tui export card.lottie --theme dark --format mp4
creator-tui export card.lottie --data people.csv --format mp4,dotlottie   # a folder, a file per row
```

A gradient token's value is its stops, as typed in the rail (`--set brand="#ff0000 0, #0000ff
1"`); quote it in a CSV cell, since it has commas (`Ada,"#ff0000 0, #0000ff 1"`).

## CHART controls

| Control | Use |
| --- | --- |
| **Kind** | **bars**, **rows**, **line**, **donut**, **number** |
| Label and value cells | Click, type and press `enter` to rebuild the chart; `esc` cancels |
| Column name | Rename a value column when several are present |
| **+ row**, **− row** | Add a row or remove the last; keep 1–60 rows |
| **+ column**, **− column** | Add a value column or remove the last; keep 1–12 columns |
| **◂**, **▸** by the row count | Step through pages of eight rows |
| **Units** | Text before and after the numbers |
| Decimal arrows | 0–4 decimal places, when the rail has room to show them |
| **values**, **labels** | Show or hide the numbers and names |
| **colours** | Give each row its own colour |
| **light** | Use light text for a dark background |

New columns start with the previous column's values. A chart moves between its columns as
it plays. Only the columns that fit the rail are shown; a message counts the others.

### Token types

You can bind colours, gradients, numeric properties, text and images. A text token changes
what **Says** contains; an image token changes the picture. A theme shown in **TOKENS** receives
the values you edit while it is selected, including a picture pasted for an image token.
These document themes are separate from the editor's interface colours (`⇧K`).

### TOKENS controls

| Control | Use |
| --- | --- |
| Token name | Rename it, or choose an existing token to make values follow it |
| Token value | Type a value; for an image, click it then paste or drop a picture |
| **✕** on a selected layer's token | Unlink it while keeping the layer's current value |
| **Theme**: **default** | Show the document's own values |
| Theme name | Show that theme; click it again to rename it |
| **+** beside themes | Add a named theme |
| **✕** beside a theme | Delete it |
| **check** | Try token values and list problems; click a finding to see it |
| **carry Latin** | Carry the missing Latin letters named by a check finding |
| **Rows**: **◂**, **▸** | Show the previous or next data row |
| **✕** beside rows | Put the loaded rows away |
| Export format | Cycle the format for each data row |
| **export** with the row count | Export all rows into a folder beside the document |
| **stop** | Stop a batch export; files already finished remain |

For typed token values, use a hex colour such as `#ff6b57`, a number such as `72`, a pair
such as `10, 20`, the words for text, or gradient stops such as `#ff0000 0, #0000ff 1`.
Press `enter` to keep a typed value or `esc` to cancel. In a theme, an empty value restores
the document's own value for that token.