Charts - Title & Caption
Add a title and caption to any chart with control over position, alignment, font, and floating overlay mode.
#Usage
import { ChartCaption, ChartSvg, ChartTitle } from '@primeui/vue-chart';<ChartSvg>
<ChartTitle text="Title" />
<ChartCaption text="Caption" />
<!-- series and axes -->
</ChartSvg>Titles and captions add text labels to the chart. Both reduce the chart area to make room for themselves by default. Set floating to overlay them without consuming layout space, and use position and alignment to control placement.
#Basic
Add ChartTitle to display a title above the chart. Set text to the label to show. The title reduces the chart area height to make room for itself.
#Caption
Add ChartCaption alongside ChartTitle to display a descriptive line. By default it stacks directly adjacent to the title and inherits its alignment. Set position on ChartCaption to place it independently. For example, position="bottom" with a top title puts the title above the chart and the caption below it.
#Alignment
Set alignment to start, center, or end to control horizontal placement within the title area. Both ChartTitle and ChartCaption accept alignment independently.
#Position
Set position="bottom" to place the title below the chart area. When positioned at the bottom, ChartCaption sits between the chart and the title.
#Styling
Customize font size, weight, family, style, and color using the font props. Set color to any CSS color value to override the default theme text color. Use lineHeight to adjust the line height multiplier applied to the font size. Use padding to control the space above and below the title or caption. Pass a number for uniform spacing or { top, bottom } for independent control.
#Floating
Set floating to render the title as an overlay without reducing the chart area height. Use offsetX and offsetY combined with alignment to position it within the chart bounds. This works for compact charts and dashboard tiles.
#Offsets
Use offsetX and offsetY to fine-tune the title position after alignment is applied. Accepts positive or negative pixel values.
#Responsive Scaling
When fontSize is omitted, title and caption font sizes adapt to the container width across four tiers. Resize the chart to see the text scale down on smaller containers.
#API
#ChartTitle
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Title text |
position | 'top' | 'bottom' | 'top' | Placement relative to the chart |
alignment | 'start' | 'center' | 'end' | 'center' | Horizontal alignment within the title area |
fontSize | number | auto-adaptive | Font size in pixels. Omit to use responsive auto-scaling |
fontWeight | 'normal' | 'bold' | number | 600 | Font weight |
fontFamily | string | 'system-ui, sans-serif' | Font family |
fontStyle | 'normal' | 'italic' | 'normal' | Font style |
lineHeight | number | 1.2 | Line height multiplier applied to font size |
color | string | theme text color | Text color. Any CSS color value |
padding | number | { top?: number; bottom?: number } | theme default | Space above and below the title |
floating | boolean | false | Overlay the title on the chart without reducing the plot area height |
offsetX | number | - | Horizontal offset in pixels applied after alignment |
offsetY | number | - | Vertical offset in pixels |
#ChartCaption
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | Caption text |
position | 'top' | 'bottom' | stacks with title | Placement relative to the chart. Omit to stack adjacent to ChartTitle. Set independently to place the caption on the opposite side, e.g. title on top, caption on bottom |
alignment | 'start' | 'center' | 'end' | inherits title alignment | Horizontal alignment |
fontSize | number | auto-adaptive | Font size in pixels. Omit to use responsive auto-scaling |
fontWeight | 'normal' | 'bold' | number | 'normal' | Font weight |
fontFamily | string | 'system-ui, sans-serif' | Font family |
fontStyle | 'normal' | 'italic' | 'normal' | Font style |
lineHeight | number | 1.2 | Line height multiplier |
color | string | theme text color | Text color |
padding | number | { top?: number; bottom?: number } | theme default | Space above and below the caption |
offsetX | number | - | Horizontal offset in pixels applied after alignment |
offsetY | number | - | Vertical offset in pixels |
#Auto-Adaptive Font Scaling
When fontSize is omitted, font sizes scale based on container width.
| Container Width | Title Font | Caption Font |
|---|---|---|
| XS (< 300px) | 12px | 10px |
| SM (300–499px) | 13px | 11px |
| MD (500–699px) | 14px | 12px |
| LG (≥ 700px) | 17px | 13px |
Set fontSize explicitly to opt out of auto-scaling and use a fixed size at all container widths.