Financial

This theme draws graphs the way a newspaper’s business pages print them: salmon paper, solid rules with the values at their right-hand end, a ruled baseline, and flat color.

The theme ships as its own package, @graphysdk/theme-financial, 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-financial

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 { financial } from '@graphysdk/theme-financial';
import '@graphysdk/theme-financial/fonts.css';

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

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: 'week', y: 'level', color: 'index' }),
  kit.geom.line(),
  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={financial}>. 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 the theme sets
Stylesheet	Salmon paper with no frame, a ruled baseline with ticks, square bars with a pale divider in a stack, lines 2.5 pixels wide
Grid	Solid rules for the values, none for the categories
Colors	Ten muted colors for groups, blue, red and aqua first, and a ramp from pale to dark blue
Config	Values on the right of the plot, and the legend above it, aligned to the left
Geoms	None repainted
Color scheme	Light, whatever `colorScheme` the provider is given

Changing one graph

A spec’s own styles(), scales and config() sit above the theme. This graph puts its values back on the left and takes its own colors:

const customizedSpec = kit.pipe(
  spec,
  kit.config({ axes: { y: { position: 'left' } } }),
  kit.scale.color.discrete({ range: ['#14466B', '#DDA63A'] })
);

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

The theme repaints no geom. A geom from a package, such as the dumbbell, is drawn in the theme’s colors and type like a built-in one.

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

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

Fonts

fonts.css loads Source Sans 3 from Google Fonts, in weights 400 and 600. To host the font yourself, leave the import out and load a family named Source Sans 3 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 one graph

With a geom package

Fonts

​Install

​What the theme decides

​Changing one graph

​With a geom package

​Fonts

Install

What the theme decides

Changing one graph

With a geom package

Fonts