Content

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

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

Slots

string | RichText

The chart’s headline text. Pair with isTitleVisible.

string | RichText

A secondary line under the title. Pair with isSubtitleVisible.

string | RichText

A note shown beneath the chart. Pair with isCaptionVisible.

{ label?: string; url?: string }

Your data-source attribution shown under the caption (for example “Internal data”). Distinct from the Graphy provenance badge. Pair with isSourceVisible.

Each text slot has a matching isXVisible boolean, and the defaults differ by slot: isTitleVisible and isSubtitleVisible are true, so a title or subtitle shows as soon as you set the text; isCaptionVisible and isSourceVisible are false, so a caption or source needs its flag turned on as well.

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

Provenance badge (“Made with Graphy”)

A translucent capsule badge with the Graphy glyph and the text “Made with Graphy”. It does not inherit theme typography. Linked to graphy.app with UTM tags. Size ladder: full pill → circular mini under 200 px wide → hidden under 120 × 80.

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

Structured badge config. Defaults: { enabled: false, placement: 'footer', variant: 'full' }. Prefer this over the legacy isBrandMarkVisible flag.

boolean

Legacy alias for brandMark.enabled. Kept in sync by config resolution.

// Opt in (footer-right, full pill)
config({
  content: {
    brandMark: { enabled: true },
  },
});

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

// With your own source — source stays left; badge anchors right
config({
  content: {
    source: { label: 'Internal data', url: 'https://example.com' },
    isSourceVisible: true,
    brandMark: { enabled: true },
  },
});

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

Rich text

Any text slot accepts either a plain string or a rich-text node (a TipTap-compatible document), which lets you mix colors, weights and headings within a title:

config({
  content: {
    isTitleVisible: 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.' },
          ],
        },
      ],
    },
  },
});

Recognised marks include textStyle (with color, font — a font id — and fontSize), plus standard bold/italic/underline. On nodes, the renderer reads heading.level (1–3) and paragraph.textAlign. Unrecognised keys are ignored.

A numeric fontSize is read as n/10 em, so 12 means 1.2em — relative to the slot’s own type size, not a pixel value. A string is used as-is ('14px').

Rich text requires the TipTap peer packages.

Configuration overview — how config composes
Headline numbers — summary metrics in the header
Slots — replacing the footer / header regions

Get Started

Core concepts

Chart types

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