MAUI | ComponentOne
Controls / FlexChart / Elements / Data Labels
In This Topic
    Data Labels
    In This Topic

    Data labels are the labels associated with the data points, generally, displaying the value of those data points. They are especially useful in the charts where it is difficult to know the exact value of data points by simply looking at them.

    Data Labels in Chart

    In FlexChart, you can display the data labels by setting the DataLabel property which is of type DataLabel class. You can also set the ContentOptions property of the DataLabel class to specify what to display in the data labels. Additionally, you can specify where to display the data labels with respect to the data point using the Position property. This property accepts the values from C1.Chart.LabelPosition enumeration which allows you to position the data labels towards the top, bottom, center, left or right of the data point. The default value of the Position property is Auto, which, automatically positions the data labels according to the available space on the chart. However, you also have an option to set this value to None. Moreover, you can set the offset of data label from corresponding data point as showcased in the following code.

    XAML
    Copy Code
    <c1:FlexChart x:Name="flexChart" Header="Monthly Mean Temperature" HeaderAlignment="Left"
              ChartType="LineSymbols" BindingX="month" ItemsSource="{Binding Data}" >
        <c1:FlexChart.AxisY>
            <c1:Axis Labels="False" AxisLine="False" MajorGrid="True" MajorTickMarks="None" Min="-5" Max="30" />
        </c1:FlexChart.AxisY>
        <c1:FlexChart.DataLabel>
            <c1:DataLabel Content="{}{value}" Position="Top" Offset="10"/>
        </c1:FlexChart.DataLabel>
        <c1:Series SeriesName="New York" Binding="NewYork"/>
        <c1:Series SeriesName="Los Angeles" Binding="LosAngeles"/>
    </c1:FlexChart>
    

    Following code defines the data to be used in the above chart:

    C#
    Copy Code
    public object[] Data => ClimateData.GetData();
    class ClimateData
    {
        public static object[] GetData()
        {
            return new object[]
            {
                new { month = "Jan", NewYork =  0.9, LosAngeles = 14.7, Seattle =  6.0},
                new { month = "Feb", NewYork =  2.2, LosAngeles = 15.0, Seattle =  6.7},
                new { month = "Mar", NewYork =  6.0, LosAngeles = 16.2, Seattle =  8.4},
                new { month = "Apr", NewYork = 12.1, LosAngeles = 17.6, Seattle = 10.7},
                new { month = "May", NewYork = 17.3, LosAngeles = 18.8, Seattle = 14.2},
                new { month = "Jun", NewYork = 22.2, LosAngeles = 20.7, Seattle = 16.7},
            };
        }
    }