# Chart Title

## Content



Titles are the text fields that appear on a chart and are used to give description about the chart data.

![rendermode](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/flexchart-charttitles.png)

### Set Chart Titles and Styles

There are two types of chart titles that can be added to a FlexChart: a Header and a Footer. Headers are generally used for summarizing the chart and tell what a particular chart is all about. On the other hand, Footers are generally used for mentioning the copyright information or source of data used in the chart. You can set the header and footer of a chart by using the Header and Footer property which are of the type **IChartBase** interface.

To style the header and footer of a chart so that they match with chart and rest of the UI of your application, FlexChart provides various styling properties through the **ChartTitles** class. You can style the titles such as setting the font, fill or stroke colors using the [HeaderStyle](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChartBase.HeaderStyle.html) and [FooterStyle](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChartBase.FooterStyle.html) property. You can also change its HorizontalAlignment, as well as set and customize the [Border](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.DataLabelBase.Border.html) and [BorderStyle](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.DataLabelBase.BorderStyle.html) using the following code. This example uses the column chart with Sales data series and is bound to the same datasource which is used in the [Quick Start](/componentone/docs/winui/online-winui/winui-controls/datafilter-overview/datafilter-quickstart) topic.

Following C# code required to set the header and footer properties of the chart:

```csharp
flexChart.Header = "Datewise Revenue";
flexChart.Footer = "Sales for the year 2023";
flexChart.AxisX.Title = "Months";
flexChart.AxisY.Title = "Revenue";
flexChart.HeaderStyle = new ChartStyle()
{
    FontFamily = new FontFamily("Arial"),
    FontSize = 24,
    Stroke = new SolidColorBrush() { Color = Windows.UI.Color.FromArgb(255, 0, 0, 255) },
};
flexChart.HeaderAlignment = HorizontalAlignment.Center;
flexChart.FooterStyle = new ChartStyle()
{
    FontFamily = new FontFamily("Arial"),
    FontSize = 14,
    Stroke = new SolidColorBrush() { Color = Windows.UI.Color.FromArgb(255, 255, 0, 0) }
};
flexChart.FooterAlignment = HorizontalAlignment.Right;             
```