Content

The content section sets the text around the chart: title, subtitle, caption, your data-source attribution, and the “Made with Graphy” mark. Each text slot has a visibility flag, so a value can be kept while hidden. In @graphysdk/react the mark is on by default.

config({
  content: {
    title: 'Monthly revenue',
    showTitle: true,
    subtitle: 'By product, 2026',
    showSubtitle: true,
    source: { label: 'Internal data', url: 'https://example.com' },
    showSource: true,
  },
});

Slots

string | RichTextContent

The chart’s headline text. Pair with showTitle.

string | RichTextContent

A secondary line under the title. Pair with showSubtitle.

string | RichTextContent

A note shown beneath the chart. Pair with showCaption.

{ label?: string; url?: string }

Your data-source attribution, shown under the caption (for example “Internal data”). Not the Graphy provenance badge. Pair with showSource.

The visibility defaults differ by slot. showTitle and showSubtitle are true, so a title or subtitle shows as soon as you set the text. showCaption and showSource are false, so a caption or source also needs its flag turned on.

config({
  content: {
    caption: 'Figures exclude refunds.',
    showCaption: true,
  },
});

Provenance badge (“Made with Graphy”)

A translucent capsule with the Graphy glyph and the text “Made with Graphy”. It does not inherit the stylesheet’s typography. It links to graphy.app with UTM tags. The full pill becomes a circular mini badge when the chart is narrower than 200 px, and disappears below 120 × 80.

{ enabled?: boolean; placement?: 'footer' | 'header'; variant?: 'full' | 'mini' }

Badge settings. Defaults: { placement: 'footer', variant: 'full' }. enabled defaults to true in @graphysdk/react and to false in @graphysdk/react-renderer. variant: 'mini' draws the circular badge at every size.

boolean

Alias for brandMark.enabled. Config resolution keeps the two in sync; when both are set, brandMark.enabled decides.

// Turn the badge off
config({
  content: {
    brandMark: { enabled: false },
  },
});

// Header top-right, circular mini
config({
  content: {
    brandMark: { placement: 'header', variant: 'mini' },
  },
});

// With your own source: source on the left, badge on the right
config({
  content: {
    source: { label: 'Internal data', url: 'https://example.com' },
    showSource: true,
  },
});

source is your data attribution. brandMark is Graphy’s own provenance badge. They can appear together, either alone, or neither.

Rich text

Any text slot accepts a plain string or a rich-text document in TipTap’s JSON shape, which mixes colors, weights and headings within one title:

config({
  content: {
    showTitle: true,
    title: {
      type: 'doc',
      content: [
        {
          type: 'paragraph',
          content: [
            { type: 'text', text: 'Revenue climbed ' },
            {
              type: 'text',
              text: '24%',
              marks: [{ type: 'textStyle', attrs: { color: '#D4594C' } }],
            },
            { type: 'text', text: ' this quarter.' },
          ],
        },
      ],
    },
  },
});

Recognized marks: textStyle (with color, font as a font id, and fontSize), bold, italic, underline, strike, code and link. On nodes, the renderer reads heading.level (1–3) and paragraph.textAlign. Unrecognised keys are ignored.

fontSize is a number of pixels and follows style.graph({textScale}) like every other fontSize. A string such as '14px' is ignored.

Rendering rich text needs no extra packages. Editing it in place needs the TipTap peer packages.

Configuration overview — how config composes
Headline numbers — summary metrics in the header
Slots — replacing the header and footer regions
Layout — style.header and style.footer margin around those rows

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Slots

Provenance badge (“Made with Graphy”)

Rich text

​Slots

​Provenance badge (“Made with Graphy”)

​Rich text

​Related

Slots

Provenance badge (“Made with Graphy”)

Rich text

Related