# Header and Footer

## Content



You can provide a heading or title to the Sunburst chart with the help of [Header](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.Header.html) property. Moreover, you may also set a footer for your Sunburst chart with the help of [Footer](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexChartBase-1.Footer.html) property. These properties also allows you to style your 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 Sunburst chart appears, after you set the Header and Footer properties.

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

The following code example demonstrates how to set Header and Footer properties. This example uses the sample created in the [Quick Start](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/SunburstChart/SunBurstQuickStart) topic.

```razor
<c1-sunburst header="Sales Data" footer="*Random data by ComponentOne"
binding-name="Year, Quarter, Month" binding="Value">
<c1-flex-chart-title-style c1-property="FooterStyle"></c1-flex-chart-title-style>
<c1-flex-chart-title-style c1-property="HeaderStyle"></c1-flex-chart-title-style>
<c1-items-source source-collection="Model"></c1-items-source>
</c1-sunburst>
```