Skip to main content
The Title component displays the main title and optional subtitle for your chart. It supports flexible positioning, linking, and comprehensive text styling options.

​
Purpose

The Title component serves as the primary heading for your chart, providing context and description for the data visualization. Based on the source code at ~/workspace/source/src/component/title/install.ts, it renders text elements with configurable layout, styling, and interactive features.

​
Basic Usage

option = {
  title: {
    text: 'Sales Report',
    subtext: 'Q1 2024',
    left: 'center'
  },
  // ... other chart configuration
}

​
Configuration Options

​
show
boolean
default:"true"
Whether to display the title component.
​
text
string
default:"''"
The main title text to display.
title: {
  text: 'Monthly Revenue Analysis'
}
​
link
string
URL to navigate to when the title is clicked.
title: {
  text: 'View Full Report',
  link: 'https://example.com/report'
}
​
target
'self' | 'blank'
default:"'blank'"
Specifies where to open the linked URL:
  • 'self' - Opens in the same window
  • 'blank' - Opens in a new window/tab
​
subtext
string
default:"''"
Subtitle text displayed below the main title.
title: {
  text: 'Sales Dashboard',
  subtext: 'Real-time Data'
}
​
sublink
string
URL to navigate to when the subtitle is clicked.
​
subtarget
'self' | 'blank'
default:"'blank'"
Specifies where to open the subtitle link.
​
textAlign
'left' | 'center' | 'right'
Horizontal alignment of the title text. If not specified, it aligns based on the left or right positioning.
​
textVerticalAlign
'top' | 'middle' | 'bottom'
Vertical alignment of the title text. If not specified, it aligns based on the top or bottom positioning.
​
padding
number | number[]
default:"5"
Padding between text and border. Can be:
  • A single number: 5 (applies to all sides)
  • An array: [5, 10] (vertical, horizontal) or [5, 10, 5, 10] (top, right, bottom, left)
​
itemGap
number
default:"10"
Gap between the main title and subtitle, in pixels.
​
backgroundColor
string
Background color of the title component. Supports color strings, hex values, and rgba.
title: {
  text: 'Chart Title',
  backgroundColor: '#f0f0f0'
}
​
borderColor
string
Border color of the title component.
​
borderWidth
number
default:"0"
Width of the title border in pixels.
​
borderRadius
number | number[]
Radius of the background border corners. Can be a single number or an array for different corners.
​
triggerEvent
boolean
Whether to trigger mouse or touch events on the title component.

​
Position

​
left
number | string
default:"'center'"
Horizontal position. Can be:
  • 'left', 'center', 'right'
  • Absolute pixel value: 20
  • Percentage: '20%'
​
top
number | string
Vertical position. Can be:
  • 'top', 'middle', 'bottom'
  • Absolute pixel value: 20
  • Percentage: '20%'
​
right
number | string
Distance from the right side of the container.
​
bottom
number | string
Distance from the bottom of the container.

​
Text Style

​
textStyle
object
Style configuration for the main title text.
​
subtextStyle
object
Style configuration for the subtitle text.

​
Examples

​
Centered Title with Subtitle

option = {
  title: {
    text: 'Monthly Sales Analysis',
    subtext: 'Data from January to December 2024',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 24,
      fontWeight: 'bold'
    },
    subtextStyle: {
      fontSize: 14,
      color: '#666'
    }
  },
  // ... rest of chart configuration
}

option = {
  title: {
    text: 'Click to View Full Report',
    link: 'https://example.com/detailed-report',
    target: 'blank',
    left: 'left',
    top: 10,
    textStyle: {
      color: '#0066cc',
      fontSize: 18
    }
  }
}

​
Styled Title with Background

option = {
  title: {
    text: 'Revenue Dashboard',
    subtext: 'Q1 2024',
    left: 'center',
    backgroundColor: '#f5f5f5',
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 4,
    padding: [10, 20],
    textStyle: {
      fontSize: 20,
      fontWeight: 'bold',
      color: '#333'
    },
    subtextStyle: {
      fontSize: 12,
      color: '#999'
    },
    itemGap: 8
  }
}

​
Multiple Titles

option = {
  title: [
    {
      text: 'Main Chart Title',
      left: 'center',
      top: '0%'
    },
    {
      text: 'Secondary Title',
      left: 'center',
      top: '50%'
    }
  ]
}

​
Implementation Details

From ~/workspace/source/src/component/title/install.ts:100-139, the Title component includes:
  • Layout Mode: Box layout with size ignored
  • Z-index: Defaults to 6, ensuring title appears above most chart elements
  • Text Rendering: Uses ZRender Text elements with full styling support
  • Click Events: Supports link navigation with configurable target windows
  • Auto-alignment: Automatically determines text alignment based on position if not explicitly set
  • Background: Optional background rectangle with border and border radius support

Build docs developers (and LLMs) love

Get started for freeTalk to us