- Getting Started
- Configuring your MVC Application
- Adding NuGet Packages to your App
- Adding Controls
- Client-Side Support
-
Working with Controls
- Accordion
- Barcode
- CollectionView
- DashboardLayout
- File Manager
- Financial Charts
- FlexChart
- FlexGrid
- Transposed Grid
- FlexMap
- Flex Pie
- Flex Radar
- Flex Report
- Flex Sheet
- Flex Viewer
- Gauge
- Input Controls
- Multi Row
- TransposedMultiRow
- OLAP
- Sunburst Chart
- Tab Panel
- Tree Map
- TreeView
- Globalization
- Styling
- ASP.NET MVC Samples
- ReleaseHistory
Header and Footer
You can add a title to the FlexChart 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 FlexChart appears, after these properties have been set.
The following code examples demonstrate how to set these. This example uses the sample created in the Quick Start section.
<c1-flex-chart binding-x="Name" chart-type="ChartType.Column" 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-chart-series binding="SalesInUSA" name="Sales in USA">
</c1-flex-chart-series>
</c1-flex-chart>