Title and Subtitle

Updated on Mar 24, 2026

The Chart provides built-in support for a title and a subtitle. Use these components to label the Chart and provide context such as time period, units, or data source.

Change Theme

Theme

Loading ...

Configuring the Title and Subtitle

To add a title, include the kendo-chart-title component inside the kendo-chart tag. Set its text property to define the displayed value.

html

<kendo-chart>
    <kendo-chart-title text="Quarterly Revenue"></kendo-chart-title>
</kendo-chart>

To add a subtitle, include the kendo-chart-subtitle component. The subtitle renders below the title by default and provides secondary context such as units or a date range. Set its text property to define the displayed value.

html

<kendo-chart>
    <kendo-chart-title text="Quarterly Revenue"></kendo-chart-title>
    <kendo-chart-subtitle text="In millions of dollars"></kendo-chart-subtitle>
</kendo-chart>

The following example demonstrates a Chart with both a title and a subtitle.

Change Theme

Theme

Loading ...

Positioning the Title and Subtitle

Both the title and subtitle support properties that control their placement within the Chart:

• position—Renders the element at the top or bottom of the Chart. The default value is top.
• align—Sets the horizontal alignment to left, center, or right.
• padding—Defines the inner spacing around the text in pixels.
• margin—Defines the outer spacing around the element in pixels.

The following example demonstrates how to adjust the placement of the title and subtitle.

Change Theme

Theme

Loading ...

Customizing the Title and Subtitle Appearance

Both the title and subtitle support properties that control their visual style:

• color—Sets the text color.
• background—Sets the background color.
• font—Specifies the CSS font string, for example bold 18px Arial.
• border—Defines the border color and width.
• visible—Controls whether the element renders.

The following example demonstrates how to customize the title and subtitle appearance.

Change Theme

Theme

Loading ...

Support and Learning Resources

• Getting Started with the Kendo UI for Angular Chart
• API Reference of the Chart
• TitleComponent API
• SubtitleComponent API
• Axes
• Chart Area
• Crosshairs
• Error Bars
• Labels
• Legend
• Notes
• Panes
• Plot Area
• Plot Bands
• Selection
• Series
• Tooltip
• Getting Started with Kendo UI for Angular (Online Guide)
• Getting Started with Kendo UI for Angular (Video Tutorial)
• Video Courses
• Chart Forum
• Before You Start: All Things Angular (Telerik Blog Post)
• Knowledge Base

Additional Resources

• Angular Blogs
• Angular Videos
• Kendo UI for Angular Roadmap