@graphysdk/theme-comic

Beta. This theme is on a 0.x version line: a minor release may change its look. Use a caret range (^0.1.0) to take only patches.

A comic theme for the Graphy charting SDK: graphs drawn as a panel of a printed comic, with black outlines, flat primary colours under printed dots, and hard shadows.

Learn more at graphy.dev.

Install

npm install @graphysdk/theme-comic @graphysdk/react

Requires React 19. Its only peer is @graphysdk/react.

Usage

Pass the theme to createGraphyKit and import its fonts once. Every graph drawn through the kit's GraphProvider takes the theme; specs are written as usual.

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

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

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

export function Revenue({ data }) {
  return (
    <kit.GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </kit.GraphProvider>
  );
}

A spec's own styles(), scales and config() sit above the theme, so a graph can still change anything. The theme is drawn for a graph about 600 pixels wide; style.graph({ textScale: 1.5 }) scales its type for a larger one.

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.

Docs

• Comic

Feedback

This theme is released early to hear what works. Tell us on Discord.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.