Styling

import {
  createSpec,
  pipe,
  geom,
  scale,
  styles,
  style,
  token,
} from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'month', y: 'sales' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  styles({
    tokens: { brand: { light: '#0B5FFF', dark: '#6AA1FF' } },
    defaults: [style.geom({ color: token('brand') })],
    overrides: [
      style.geom({ color: '#E5484D' }, { where: { variable: 'sales', lt: 0 } }),
    ],
  })
);

​

The four keys

​

How a value is resolved

​

Targets

• A bar’s borderRadius is a token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full', defaulting to 'sm'. On dataLabel, panelBorder, style.graph and style.geom.tile it is a plain pixel number.
• style.graph({ fontFamily }) is the chart’s base family: every text region without a family of its own follows it, in paint and in measurement.
• style.graph({ textScale }) multiplies every text size at resolve time. 1 is the built-in; a preset can set a house scale through extends. gap, offset, padding and stroke widths do not scale.
• style.graph({ padding }) is the outer frame, in pixels, and does not follow textScale. A number applies to every side; an object sets sides, and omitted edges keep the builtin 24.
• Hide a panel-border edge with strokeWidth: 0.
• A shape annotation’s border wears its color unless borderColor is declared; borderWidth: 0 draws none, and color: 'transparent' leaves a stroke-only outline. { annotation: id } addresses one annotation.
• An arrow annotation’s borderWidth and shadow are its sticker look — an outline around the line and a drop shadow; both are off by default.
• A difference arrow is two parts: the line (strokeWidth also sizes the route around the observations) and its label, style.annotation.differenceArrow.label. A colour no entry names falls to the series colour both ends share; the label’s box border takes the arrow’s colour unless borderColor is declared.
• A text annotation’s background is its box; with none declared there is no box. The content’s own marks paint over the base type. An image’s borderRadius clips its corners, in pixels.
• A pinned number and a comment are a marker dot plus the label bubble beside it (.label). A marker whose color no entry names borrows its observation’s colour; the swatch inside a pinned-number bubble always keeps it.
• Stack totals (.aggregate) always sit outside the mark, so they take no .inside / .outside.
• style.headlineItem is not callable — pick a part. .number.center is the donut-hole figure; without it the hole uses .number. gap on style.headline and style.legend is pixels and does not follow textScale. A bare style.legend entry is gap only; the overflow popover box is style.legend.popover (background, borderColor, borderWidth, borderRadius, paddingInline, paddingBlock, shadow).
• Swatch fill opacity and bar corner radius follow the layer geom, including size-legend bubbles; style.legendItem.swatch and style.headlineItem.swatch only size the square box.

​

Colours

style.geom({ color: '#E5484D' }); // literal
style.geom({ color: { light: '#E5484D', dark: '#FF6369' } }); // one per scheme
style.geom({ color: token('alert') }); // token reference

​

Conditions

styles({
  overrides: [
    style.geom(
      { color: token('alert') },
      { where: { variable: 'sales', lt: 0 } }
    ),
    style.geom.line({ strokeWidth: 4 }, { layer: 'total' }),
    style.geom({ alpha: 0.15 }, { state: 'dimmed' }),
  ],
});

​

Re-skinning through tokens

styles({
  tokens: {
    geom: '#1D1D1B',
    gridLine: '#E9E9E9',
    graphBackground: { light: '#FFFFFF', dark: '#141414' },
  },
});

​

Presets with extends

const houseStyle = {
  tokens: { geom: '#1D1D1B', gridLine: '#C9C6BE' },
  defaults: [
    style.gridLine({ lineType: 'solid' }),
    style.panelBorder({ strokeWidth: 0 }),
    style.tickLabel({ fontSize: 12 }),
  ],
};

const spec = pipe(
  createSpec({ x: 'month', y: 'sales' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  styles({
    extends: [houseStyle],
    defaults: [style.geom.bar({ borderRadius: 'full' })],
  })
);

​

Two token namespaces

​

When an entry is invalid

​

Custom geoms

import { createStyleResolver } from '@graphysdk/viz-engine';

const fill = createStyleResolver({ colorScheme })
  .geomReaders(layer)
  .get('color', observation);