> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

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

## Slots

<ParamField path="title" type="string | RichText">
  The chart's headline text. Pair with `isTitleVisible`.
</ParamField>

<ParamField path="subtitle" type="string | RichText">
  A secondary line under the title. Pair with `isSubtitleVisible`.
</ParamField>

<ParamField path="caption" type="string | RichText">
  A note shown beneath the chart. Pair with `isCaptionVisible`.
</ParamField>

<ParamField path="source" type="{ 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`.
</ParamField>

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.

```tsx theme={null}
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.

<ParamField path="brandMark" type="{ 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.
</ParamField>

<ParamField path="isBrandMarkVisible" type="boolean">
  Legacy alias for `brandMark.enabled`. Kept in sync by config resolution.
</ParamField>

```tsx theme={null}
// 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 },
  },
});
```

<Note>
  `source` is **your** data attribution. `brandMark` controls Graphy's own provenance badge.
  They can appear together, either alone, or neither.
</Note>

## 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:

```tsx theme={null}
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.

<Note>
  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'`).
</Note>

Rich text requires the [TipTap peer packages](/sdk-next/quickstart#1-install-the-packages).

## Related

* [Configuration overview](/sdk-next/config/index) — how `config` composes
* [Headline numbers](/sdk-next/config/headline-numbers) — summary metrics in the header
* [Slots](/sdk-next/extending/slots) — replacing the footer / header regions
* [Layout](/sdk-next/config/layout) — `style.header` and `style.footer` margin around those rows


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.