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

## Overview

The `content` property controls the title, subtitle, caption, data-source attribution, and the optional
Made with Graphy provenance badge for your chart.

```tsx theme={null}
const config: GraphConfig = {
  content: {
    title: 'Quarterly revenue',
    subtitle: 'FY 2024',
    caption: 'Excluding one-off adjustments',
    source: {
      label: 'Finance team',
      url: 'https://example.com/data',
    },
    // Opt in to the Graphy provenance mark (hidden by default).
    isBrandMarkHidden: false,
  },
};
```

## Title

<ParamField path="content.title" type="string | JSONContent" optional>
  Graph title. Can be plain text or TipTap JSON content for rich text formatting.
</ParamField>

```tsx theme={null}
// Plain text
content: {
  title: 'Monthly sales performance'
}

// Rich text with formatting
content: {
  title: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [
          { type: 'text', text: 'Sales growth: ' },
          {
            type: 'text',
            text: '+15%',
            marks: [{ type: 'bold' }]
          }
        ]
      }
    ]
  }
}
```

## Subtitle

<ParamField path="content.subtitle" type="string | JSONContent" optional>
  Subtitle displayed under the title. Can be plain text or TipTap JSON content for rich text formatting.
</ParamField>

```tsx theme={null}
content: {
  subtitle: 'Across all regions';
}
```

## Caption

<ParamField path="content.caption" type="string | JSONContent" optional>
  Caption displayed at the bottom of the chart. Can be plain text or TipTap JSON content for rich text formatting. Use
  captions for notes, methodology or context about the data.
</ParamField>

```tsx theme={null}
// Plain text
content: {
  caption: 'Data reflects confirmed transactions only'
}

// Rich text with link
content: {
  caption: {
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        content: [
          { type: 'text', text: 'Methodology: ' },
          {
            type: 'text',
            text: 'See our data guide',
            marks: [
              {
                type: 'link',
                attrs: { href: 'https://example.com/guide' }
              }
            ]
          }
        ]
      }
    ]
  }
}
```

## Data source

<ParamField path="content.source" type="object" optional>
  Your data-source attribution shown under the caption (for example "Office for National Statistics"). This is
  **your** attribution of where the data came from — distinct from the Graphy provenance mark below.
</ParamField>

<ParamField path="source.label" type="string" optional>
  Text label describing the data source (e.g., "Office for National Statistics", "Internal sales data").
</ParamField>

<ParamField path="source.url" type="string" optional>
  URL link to the original data source. Must be a valid URL. If provided, the `label` will be clickable.
</ParamField>

```tsx theme={null}
content: {
  source: {
    label: 'UK Office for National Statistics',
    url: 'https://www.ons.gov.uk'
  }
}
```

## Provenance badge ("Made with Graphy")

A translucent capsule badge with the Graphy glyph and “Made with Graphy” text. Discovery signal (not a
lock). Linked to `graphy.app`. Size ladder: full pill → circular mini under 200 px → hidden under 120 × 80.

<ParamField path="content.brandMark" type="{ enabled?: boolean; placement?: 'footer' | 'header'; variant?: 'full' | 'mini' }" optional>
  Structured badge config. Prefer this over `isBrandMarkHidden`. Defaults to disabled at the low-level
  renderer; `@graphysdk/react` seeds it on.
</ParamField>

<ParamField path="content.isBrandMarkHidden" type="boolean" optional>
  Legacy opt-out (`true` = hide). Ignored when `brandMark.enabled` is set explicitly.
</ParamField>

```tsx theme={null}
// Show the badge (footer-right, full pill)
content: {
  brandMark: { enabled: true },
}

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

// Legacy opt-out
content: {
  isBrandMarkHidden: true,
}
```

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

## Content visibility

Use the visibility flags (`isTitleHidden`, `isSubtitleHidden`, `isCaptionHidden`, `isSourceHidden`,
`isBrandMarkHidden`) to programmatically control which content appears:

```tsx theme={null}
// Show only title and source; keep the Graphy mark hidden (default)
content: {
  title: 'Revenue trends',
  subtitle: 'This will be hidden',
  isSubtitleHidden: true,
  caption: 'This will also be hidden',
  isCaptionHidden: true,
  source: {
    label: 'Finance department'
  },
}

// Opt in to the provenance mark as well
content: {
  title: 'Revenue trends',
  source: { label: 'Finance department' },
  isBrandMarkHidden: false,
}
```

<Note>
  Hiding content with visibility flags is different from omitting it entirely. Hidden content is still part of the
  config but not rendered. This is useful when you want to preserve content but temporarily hide it. The provenance
  mark has no separate text value — only the visibility flag.
</Note>


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