Header Footer

You can add a title to the FlexChart control by setting its HeaderText property. Besides a title, you may also set a footer for the chart by setting the FooterText property. There are also some additional properties to customize header and footer text in a FlexChart.

HeaderFont: Lets you select the font size and attributes for the header text.
HeaderTextColor: Lets you select the text color for the header text.
FooterFont: Lets you select the font size and attributes for the footer text.
FooterTextColor: Lets you select the text color for the footer text.

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

The following code examples demonstrate how to set these properties in C# and XAML. These examples use the sample created in the Quick Start section.

In Code

C#	Copy Code
chart.HeaderText = "Sales Data of the year 2014"; chart.HeaderFont = Font.SystemFontOfSize(30); chart.HeaderTextColor = Color.FromHex("#3366FF"); chart.FooterText = "*Random data by ComponentOne"; chart.FooterFont= Font.SystemFontOfSize(20); chart.FooterTextColor = Color.FromHex("#FFFFFF");

Copy Code

chart.HeaderText = "Sales Data of the year 2014";
chart.HeaderFont = Font.SystemFontOfSize(30);
chart.HeaderTextColor = Color.FromHex("#3366FF");

chart.FooterText = "*Random data by ComponentOne";
chart.FooterFont= Font.SystemFontOfSize(20);
chart.FooterTextColor = Color.FromHex("#FFFFFF");

In XAML

XAML	Copy Code
<xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name" HeaderText = "Sales Data of the year 2014" HeaderTextColor="#3366FF" HeaderFont="30" FooterText="*Random data by ComponentOne" FooterTextColor="#FFFFFF" FooterFont="20" Grid.Row="1" Grid.ColumnSpan="2"> <xuni:FlexChart.Series> <xuni:ChartSeries x:Name="Sales2014" Name ="2014 Sales" Binding="Sales" ></xuni:ChartSeries> </xuni:FlexChart.Series> </xuni:FlexChart>

XAML

Copy Code

<xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name"
  HeaderText = "Sales Data of the year 2014" HeaderTextColor="#3366FF" HeaderFont="30"
  FooterText="*Random data by ComponentOne" FooterTextColor="#FFFFFF" FooterFont="20"
  Grid.Row="1" Grid.ColumnSpan="2">
  <xuni:FlexChart.Series>
    <xuni:ChartSeries x:Name="Sales2014" Name ="2014 Sales" Binding="Sales" ></xuni:ChartSeries>
  </xuni:FlexChart.Series>
</xuni:FlexChart>