Skip to main content

​
Overview

The content property controls the title, subtitle, caption and data source attribution for your chart. 
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

​
content.title
string | JSONContent
Graph title. Can be plain text or TipTap JSON content for rich text formatting.
// 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

​
content.subtitle
string | JSONContent
Subtitle displayed under the title. Can be plain text or TipTap JSON content for rich text formatting.
content: {
  subtitle: 'Across all regions'
}

​
Caption

​
content.caption
string | JSONContent
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.
// 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

​
content.source
object
Data source attribution shown under the caption.
​
source.label
string
Text label describing the data source (e.g., “Office for National Statistics”, “Internal sales data”).
​
source.url
string
URL link to the original data source. Must be a valid URL. If provided, the label will be clickable.
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: 
// 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'
  }
}
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.