ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / FlexChart Elements / FlexChart Data Labels / Adding and Positioning Data Labels
In This Topic
    Adding and Positioning Data Labels
    In This Topic

    When added to data points in the chart, data labels make it easier to understand the chart data because they display details about individual data points. These labels quickly highlight data that is both relevant and important.

    There is a simple method to add data labels to data points while working with FlexChart. You just need to configure the Content property as per the type of entry you want to display in data labels. And you need to set the position of data labels using the Position property to display the data labels in the chart.

    The table below lists the pre-defined 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.
    P Shows the percentage share with respect to the parent slice in Sunburst.
    p Shows the percentage share with respect to the whole chart in Sunburst.

    See the following code snippet for reference.

    <Chart:C1FlexChart.DataLabel>
    <Chart:DataLabel Content="{}{y}" Position="Top"></Chart:DataLabel>
</Chart:C1FlexChart.DataLabel>
    C#
    Copy Code 
    flexChart.DataLabel.Content = "{y}";
flexChart.DataLabel.Position = C1.Chart.LabelPosition.Top;

     

    Depending upon the chart type, you can select from different positioning options to position data labels perfectly in the chart. The Position property accepts the following values from the LabelPosition enumeration:

    Property Description
    Top Sets the labels above the data points.
    Bottom Sets the labels below the data points.
    Left Sets the labels to the left of the data points.
    Right Sets the labels to the right of the data points.
    Center Sets the labels centered on the data points.
    None Hides the labels.

    Using the Content property, you can customize the content of the data labels to further include series names, index values, or names of data points.

    The following code shows how to set the Content property to include series names and data point values in data labels.

    <Chart:C1FlexChart.DataLabel>
    <Chart:DataLabel Content="{}{seriesName}&#x0a;{y}"></Chart:DataLabel>
</Chart:C1FlexChart.DataLabel>
    C#
    Copy Code 
    // set the Content property
flexChart.DataLabel.Content = "{seriesName}\n{value}";