Install
@graphysdk/react and React 19. Pass the theme to createGraphyKit and import its fonts once:
kit.GraphProvider takes the theme. The spec is written as usual and names no theme:
<GraphProvider theme={halloween}>.
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
Headstones, candles and railings
Every column in a graph is the same object, chosen once from the room the columns have: a headstone where they are broad, a wax candle where they are slender, and a wrought-iron railing post where they are packed close. One graph never mixes them, so a change of object never reads as a change of meaning. Each object ends exactly at its value: the crown of a headstone’s arch, the top of a candle’s wax (only its wick and flame stand above), and the tip of a railing’s spear. A stacked bar is a pile of carved courses and a horizontal bar a ledger slab, however close the columns are packed. A pie, donut, rose or radial bar is a rose window. Each slice keeps its sector as a pane of stained glass in its group’s color, and the stone tracery is centerd on the edges between panes. A lantern is centerd on its reading, not on its stem. A heatmap keeps the built-in tile, which reads by its colors and labels.Motion
In the intro, each column rises from below its foot, a line draws in from its first reading with a ghost riding its head, lanterns light up in turn, and a rose window’s panes light one after another. A candle’s flame keeps flickering while the graph is shown. A graph drawn withanimation={false}, or for a viewer who prefers reduced motion, is drawn in its final state at once, with no flicker.
Changing the look of one graph
A spec’s ownstyles(), scales and config() sit above the theme. This graph keeps the churchyard, draws its groups in pumpkin and plum, and scales its type up:
textScale scales its type for a larger or smaller one.
With a geom package
Halloween repaints the built-in geoms only. A geom from a package, such as the dumbbell, keeps its own shapes and is drawn in the theme’s colors and type.Fonts
fonts.css loads three families from Google Fonts: Creepster for titles, Cinzel in weights 600 and 700 for the figures carved into headstones, and Nunito in weights 400, 600, 700 and 800 for everything else. To host the fonts yourself, leave the import out and load families named Creepster, Cinzel and Nunito before the first graph is drawn.