@graphysdk/theme-halloween
v0.1.1-beta.1792157616330
Published
Halloween theme for the Graphy charting SDK (beta)
Readme
@graphysdk/theme-halloween
Beta. This theme is on a
0.xversion line: a minor release may change its look. Use a caret range (^0.1.0) to take only patches.
A Halloween theme for the Graphy charting SDK: graphs in a churchyard on a moonlit night. Columns are headstones, candles or railing posts, chosen for the whole graph from the room its bars have, each ending exactly at its value. A pie or donut is a rose window lit by the moon, a line is a glowing trail with a little ghost riding its head, a scatter's readings are jack-o'-lanterns, and an area is a drift of mist.
Learn more at graphy.dev.
Install
npm install @graphysdk/theme-halloween @graphysdk/reactRequires 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 { halloween } from '@graphysdk/theme-halloween';
import '@graphysdk/theme-halloween/fonts.css';
const kit = createGraphyKit({ theme: halloween });
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.
When a graph plays its intro, columns rise into place, lines draw in with a ghost at their head, and lanterns light up in turn. A graph drawn with animation={false}, or for a viewer who prefers reduced motion, is drawn in its final state at once.
fonts.css loads Creepster, Cinzel and Nunito from Google Fonts. To host the fonts yourself, leave the import out and load families named Creepster, Cinzel and Nunito before the first graph is drawn.
Docs
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.
