Comic

Comic draws graphs as a panel of a printed comic: newsprint in a black frame, the flat colors of a four-color press under its dots, a black outline and a hard shadow for every shape, and a title in capitals.

Comic ships as its own package, @graphysdk/theme-comic, still on 0.x. A minor release may change its look, so pin a caret range (^0.1.0) to take only patches. Tell us what works and what doesn’t on Discord.

Install

npm install @graphysdk/theme-comic

Its peer dependencies are @graphysdk/react and React 19. Pass the theme to createGraphyKit and import its fonts once:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { comic } from '@graphysdk/theme-comic';
import '@graphysdk/theme-comic/fonts.css';

const kit = createGraphyKit({ theme: comic });

Every graph drawn through kit.GraphProvider takes the theme. The spec is written as usual and names no theme:

const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;

Without a kit, pass the theme to the provider instead: <GraphProvider theme={comic}>. The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React key.

What the theme decides

Part	What Comic sets
Stylesheet	Newsprint with a patch of screen tone in a square black frame, printed dots over every shape, a black outline and a hard black shadow under each shape, thick round lines, text notes lettered as sound effects
Colors	Vermillion, cyan, yellow, magenta, green and purple for groups, and a ramp from yellow through orange to red
Geoms	Pies and donuts as a burst, each slice cut at its exact angle; points as little bursts; bars, lines, areas and tiles keep the built-in renderer
Color scheme	Light, whatever `colorScheme` the provider is given

Changing the look of one graph

A spec’s own styles(), scales and config() sit above the theme. This graph keeps the panel and prints its bars flat, with no dots and no shadow:

kit.pipe(
  spec,
  kit.styles({
    defaults: [kit.style.geom.bar({ overlay: 'none', shadow: 'none' })],
  })
);

The theme is drawn for a graph about 600 pixels wide. style.graph({ textScale }) scales its type for a larger or smaller one.

With a geom package

Comic repaints only pies, donuts and points. Every other geom, and a geom from a package such as the dumbbell, keeps its own renderer and takes the theme’s colors, outline, shadow and type.

import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: comic, plugins: [dumbbell] });

Fonts

fonts.css loads Bangers for the title and Comic Neue for the rest from Google Fonts. To host the fonts yourself, leave the import out and load families named Bangers and Comic Neue before the first graph is drawn.

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts

​Install

​What the theme decides

​Changing the look of one graph

​With a geom package

​Fonts

Install

What the theme decides

Changing the look of one graph

With a geom package

Fonts