> ## 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 and data source attribution 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',
    },
  },
};
```

## 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>
  Data source attribution shown under the caption.
</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'
  }
}
```

## Content visibility

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

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

<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.
</Note>