Make a themed chart

Charts are drawn on a plane and coloured from the theme, so you rarely choose a colour.

import { Scene } from 'cseen';
import { bars } from 'cseen/charts';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(bars({
  data: { Web: [12, 19, 7, 15], App: [8, 11, 14, 9] },
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  title: 'Signups',
}));

Each series takes the next series colour, which is the accent turned around the colour wheel. Change the theme and the chart follows.

Grouped bars

FigureCode

IsoFrontSideTopPerspective

Drag to turn, scroll or pinch to zoom, double click to reset.

CopyOpen in playground

import { Scene } from 'cseen';
import { bars } from 'cseen/charts';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(bars({
  data: { Web: [12, 19, 7, 15, 22, 9], App: [8, 11, 14, 9, 17, 13] },
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  title: 'Grouped',
}));

title

stack

normalize

legenddefaulttopbottomleftright

Reset options

Choosing colours

A palette is a name or a list of roles and colours:

import { Scene } from 'cseen';
import { donut, bars } from 'cseen/charts';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(donut({
  data: [['Done', 70], ['Open', 20], ['Blocked', 10]],
  palette: ['accent', 's2', 'faint'],        // roles, so they still follow the theme
  labelValues: true,
}));

• palette: 'sequential' runs one hue from light to strong, for values.
• palette: 'diverging' runs two hues around zero.
• highlight: 2 picks one bar out in the accent and greys the rest.

Say something with it

import { Scene } from 'cseen';
import { bars } from 'cseen/charts';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(bars({
  data: [['Rust', 82], ['Go', 64], ['TypeScript', 91], ['Python', 77]],
  horizontal: true,
  labelValues: true,
  highlight: 2,
}));

Horizontal bars

FigureCode

IsoFrontSideTopPerspective

Drag to turn, scroll or pinch to zoom, double click to reset.

CopyOpen in playground

import { Scene } from 'cseen';
import { bars } from 'cseen/charts';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(bars({
  data: [['Rust', 82], ['Go', 64], ['TypeScript', 91], ['Python', 77]],
  horizontal: true,
  labelValues: true,
  highlight: 2,
}));

horizontal

labelValues

highlight

2

Reset options

Animate it in

A chart has a grow property from 0 to 1 and a data property that tweens between datasets. Put it in a scene and it stands up:

A chart in a scene

FigureCode

IsoFrontSideTopPerspective

Drag to turn, scroll or pinch to zoom, double click to reset.

CopyOpen in playground

import { Scene, Timeline, ground, tween, wait } from 'cseen';
import { bars } from 'cseen/charts';

const s = new Scene({ view: 'iso' });
s.add(ground());
// a chart is a plane in the scene: here it stands up on the floor
const c = s.add(bars({
  data: { 2023: [12, 19, 7, 15], 2024: [14, 22, 11, 19] }, labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  title: 'Revenue', size: [4.4, 2.8], at: [-2.2, 0, 0], legend: 'top',
}));
c.set('grow', 0);

const tl = new Timeline();
tl.play(tween(c, { grow: 1 }, { duration: 1.6 }));
// morph to new numbers: tween the flattened data
tl.play(tween(c, { data: c.flatten({ 2023: [20, 8, 17, 6], 2024: [9, 25, 13, 22] }) }, { duration: 1.4 }));
tl.play(wait(1));

On a screen

A chart is a plane, so it can sit on a device:

A dashboard on a screen

FigureCode

IsoFrontSideTopPerspective

Drag to turn, scroll or pinch to zoom, double click to reset.

CopyOpen in playground

import { Scene } from 'cseen';
import { monitor } from 'cseen/devices';
import { bars, donut, lines, radar } from 'cseen/charts';

const s = new Scene({ view: 'front' });
const mon = s.add(monitor({ width: 6 }));
// charts sit on a screen like any other element
mon.put(lines({ data: [3, 5, 4, 8, 6, 9, 7, 11], curve: 'smooth', fill: true, title: 'Traffic', size: [3, 1.6] }), { at: [0.04, 0.5], width: 0.55 });
mon.put(donut({ data: [['Web', 60], ['App', 30], ['API', 10]], size: [2, 1.6], legend: 'bottom' }), { at: [0.62, 0.5], width: 0.34 });
mon.put(bars({ data: [4, 7, 5, 9, 6], axes: false, size: [3, 1.2], highlight: 3 }), { at: [0.04, 0.06], width: 0.55 });
mon.put(radar({ data: [6, 8, 5, 7, 9], labels: ['A', 'B', 'C', 'D', 'E'], size: [2, 1.2] }), { at: [0.62, 0.06], width: 0.34 });