# Title and Subtitle

The Chart provides built-in support for a [title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent) and a [subtitle](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/subtitlecomponent). Use these components to label the Chart and provide context such as time period, units, or data source.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/title/overview/source.txt)

## Configuring the Title and Subtitle

To add a title, include the `kendo-chart-title` component inside the `kendo-chart` tag. Set its [`text`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/subtitlecomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/title/title-subtitle-setup/source.txt)

## Positioning the Title and Subtitle

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

* [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#position)—Renders the element at the `top` or `bottom` of the Chart. The default value is `top`.
* [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#align)—Sets the horizontal alignment to `left`, `center`, or `right`.
* [`padding`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#padding)—Defines the inner spacing around the text in pixels.
* [`margin`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#margin)—Defines the outer spacing around the element in pixels.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/title/placement/source.txt)

## Customizing the Title and Subtitle Appearance

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

* [`color`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#color)—Sets the text color.
* [`background`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#background)—Sets the background color.
* [`font`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#font)—Specifies the CSS font string, for example `bold 18px Arial`.
* [`border`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#border)—Defines the border color and width.
* [`visible`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent#visible)—Controls whether the element renders.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/title/customization/source.txt)

## Support and Learning Resources

* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [TitleComponent API](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/titlecomponent)
* [SubtitleComponent API](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/subtitlecomponent)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/error-bars)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)