# Header and Footer

## Content



You can add a title to the FlexPie control by setting its `[Header](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.Header.html)` property. Besides a title, you may also set a footer for the chart by setting the `[Footer](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.Footer.html)` property. You can also style the header and footer text with the help of `[HeaderStyle](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.HeaderStyle.html)` and `[FooterStyle](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.FooterStyle.html)` properties.

The image below shows how the FlexPie appears, after these properties have been set.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/pieheaderfooter.png)

The following code example demonstrates how to set these properties. This example uses the sample created in the [Quick Start](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexChart/QuickStart) section.

```html
<c1-flex-pie binding-name="Country" binding="Sales" header="Sales Data" footer="*Random data by ComponentOne">
    <c1-flex-chart-title-style c1-property="FooterStyle" halign="right"></c1-flex-chart-title-style>
    <c1-flex-chart-title-style c1-property="HeaderStyle" halign="left"></c1-flex-chart-title-style>
    <c1-items-source source-collection="Model"></c1-items-source>
</c1-flex-pie>
```