ComponentOne Xamarin.Forms Documentation
Controls / FlexChart / Features / Data Labels
In This Topic
    Data Labels
    In This Topic

    You can add data labels in the FlexChart control to show the exact values corresponding to a particular column, bar or point in the plot area. You can display the data labels at the following positions relative to each plot element.

    The following image shows a column chart with data labels positioned on the top.

    A data label can contain any amount of text and other UI elements. To display data labels in a FlexChart control, you must set the ChartDataLabel.Position property and define the content template to display as the label.

    The table below lists the predefined parameters applicable for data label content customization.

    Parameter Description
    x Shows the X value of the data point.
    y Shows the Y value of the data point.
    value Shows the Y value of the data point.
    name Shows the X value of the data point.
    seriesName Shows the name of the series.
    pointIndex Shows the index of the data point.
    Percentage Shows the percentage of a pie slice to the whole pie chart.

    In XAML

    The following code example demonstrates how to use data labels in FlexChart and set their position. This examples uses the sample created in the Quick Start section.

    XAML
    Copy Code
    <c1:FlexChart.DataLabel>
          <c1:ChartDataLabel Position="Top" Border="True" Content="{}{value:F2}"/>
    </c1:FlexChart.DataLabel>
    

    In Code

    To add the content and change the label position in code, use the following code.

    C#
    Copy Code
    //Setting the data labels
    chart.DataLabel.Content = "{}{value:F2}";
    chart.DataLabel.Position = ChartLabelPosition.Top;
    

    To display the X and Y values in a single label you would add two Labels to the data label template as shown below. You can also customize the appearance of the data labels.

    In XAML

    XAML
    Copy Code
    <c1:FlexChart.DataLabel>
           <c1:ChartDataLabel Border="True" Position="Top" Content="{}{x}{value:F2}">
                   <c1:ChartDataLabel.Style>
                         <c1:ChartStyle FontSize="14" Fill="LightGray"></c1:ChartStyle>
                    </c1:ChartDataLabel.Style>
                 </c1:ChartDataLabel>
             </c1:FlexChart.DataLabel>
    

    In Code

    C#
    Copy Code
    chart.DataLabel.Content = "{}{x}{value:F2}";
    chart.DataLabel.Position = ChartLabelPosition.Top;
    chart.DataLabel.Style.Fill = Color.LightGray;
    chart.DataLabel.Style.FontSize = 14;
    

    The image below show how the X and Y values appear in a single label.