# Custom Data Labels ## Content **FlexChart** ssupports custom data labels through the [Content](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.ChartTitle.Content.html) property. Assign a template string to this property to define the content displayed for each data point. Template strings can contain the following predefined parameters: | **Parameter** | **Description** | | --------- | ----------- | | **x** | Represents the X value of the data point. | | **y** | Represents the Y value of the data point. | | **value** | Represents the Y value of the data point. | | **name** | Represents the name or X value of the data point. | | **seriesName** | Represents the name of the series. | | **pointIndex** | Represents the index of the data point. | | **P** | Represents the percentage of the parent slice in a Sunburst chart. | | **p** | Represents the percentage of the entire Sunburst chart. | **FlexChart** also supports value formatting within data-label templates. Numeric values can include currency symbols, group separators, or decimal precision. Date and time values can use standard short or long date formats. The following chart shows custom labels that display the series name and temperature value for each data point: **![C1WinForms FlexChart custom data labels demo](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.f3631f.png)** ```csharp //Set template string to create custom content for data labels this.flexChart1.DataLabel.Content = "Country: {seriesName} \n Temp: {y}°F"; ``` ```vbnet 'Set template string to create custom content for data labels Me.flexChart1.DataLabel.Content = "Country: {seriesName} " & vbLf & " Temp: {y}°F" ``` *** ## **Customize Pie Chart Data Label Positioning** **FlexPie** supports the `Sides` option of the `PieLabelPosition` enumeration. This option places labels around the sides of the chart at an equal distance from the chart center and connects them to the corresponding slices. The following image shows labels positioned around the sides of a FlexPie chart: ![C1WinForms FlexChart after using side option of pielabelposition](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.8f3933.png) **Packages Required** * C1.Chart - 8.0.20252.34 * C1.Win.FlexChart - 8.0.20252.715 To create customized data label, use the following code: ```csharp flexPie1.DataLabel.Position = PieLabelPosition.Sides;  ``` **Sample Usage** ```csharp using C1.Chart; using C1.Win.Chart; namespace FlexPie_LabelPositionSides { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { FlexPie flexPie1 = new FlexPie(); //Binding FlexPie's AxisX to 'Value' so values appear in Horizontal axis flexPie1.Binding = "Value"; flexPie1.BindingName = "Name"; //Specify what and how to show data values flexPie1.DataLabel.Content = "{name} : {p:0}%"; //Dock the FlexPie to fill the application window flexPie1.Dock = DockStyle.Fill; //Setting FlexPie's Header flexPie1.Header.Content = "Market Share of Automobile Companies"; //Specify where to position the data labels relative to pie slices //!!! This is the new option for data label positioning flexPie1.DataLabel.Position = PieLabelPosition.Sides; //Passing data in FlexPie flexPie1.DataSource = GetCarSales(); //Adding FlexPie to the Form this.Controls.Add(flexPie1); } //Method to create data for FlexPie public static List GetCarSales() { var data = new List() { new CategoricalPoint{Name="Maruti", Value=1643467}, new CategoricalPoint{Name="Hyundai", Value=536241}, new CategoricalPoint{Name="Mahindra", Value=248859}, new CategoricalPoint{Name="Tata", Value=210200}, new CategoricalPoint{Name="Honda", Value=170026}, new CategoricalPoint{Name="Toyota", Value=140645}, new CategoricalPoint{Name="Renault", Value=102222}, new CategoricalPoint{Name="Ford", Value=90061}, }; return data; } //Data model class to hold data for FlexPie public class CategoricalPoint { public string Name { get; set; } public int Value { get; set; } } } } ``` *** ## Position Data Labels Use the [Position](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.Axis.Position.html) property to place data labels relative to their data points. For **FlexChart**, the property accepts values from the `C1.Chart.LabelPosition` enumeration. Labels can appear above, below, at the center, or to the left or right of a data point. For pie and sunburst charts, use `PieDataLabel.Position`, which accepts values from the `PieLabelPosition` enumeration. Labels can appear inside, outside, or at the center of the chart and can use circular, radial, or side positioning. The default value, `Auto`, positions labels according to the available chart space. Set the position to `None` to hide the labels. ```csharp //Set chart's DataLabels position this.flexChart1.DataLabel.Position = LabelPosition.Top; ``` ```vbnet 'Set chart's DataLabels position Me.flexChart1.DataLabel.Position = LabelPosition.Top ``` *** ## Rotate Data Labels Use the [Angle](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabel.Angle.html) property of the `DataLabel` class to rotate data labels and reduce overlap. The property accepts values from `0` through `90` degrees. ![C1WinForms FlexChart after using side option of angle property](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.968f1e.png) ```csharp //Rotate the data labels by 90 degrees this.flexChart1.DataLabel.Angle= 90; ``` ```vbnet ' Rotate the data labels by 90 degrees Me.flexChart1.DataLabel.Angle= 90 ``` *** ## Trim Or Wrap Data Labels Text **FlexChart** supports trimming and wrapping data-label text to prevent overlap. Set the [ContentOptions](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabel.ContentOptions.html) property to specify whether the label text is trimmed or wrapped. Use the following properties to control the available label space: * [MaxWidth](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabel.MaxWidth.html) specifies the maximum label width before trimming or wrapping occurs. * [MaxLines](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabel.MaxLines.html) specifies the maximum number of lines when wrapping is enabled. When the text exceeds the configured limits, **FlexChart** displays an ellipsis at the end of the label. The following images compare trimmed and wrapped data labels: | **ContentOptions.None** | **ContentOptions.Trim** | | ------------------- | ------------------- | | ![C1WinForms FlexChart after using contentoptions.none](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.641280.png) | ![C1WinForms FlexChart after using contentoptions.trim](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.09f32b.png) | ```csharp // Trim the data labels if they exceed the maximum width this.flexChart1.DataLabel.ContentOptions = ContentOptions.Trim; this.flexChart1.DataLabel.MaxWidth = 40; ``` ```vbnet ' Trim the data labels if they exceed the maximum width Me.flexChart1.DataLabel.ContentOptions = ContentOptions.Trim Me.flexChart1.DataLabel.MaxWidth = 40 ``` *** ## Style Data Labels FlexChart provides properties for configuring data-label appearance and placement: * Set [ConnectingLine](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabelBase.ConnectingLine.html) to `true` to display a line between a label and its data point. * Use [Offset](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.FlexPie.Offset.html) to specify the distance between a label and its data point. * Set [Border](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.ChartTitle.Border.html) to `true` to display a border around a label. * Use [BorderStyle](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabelBase.BorderStyle.html) to configure the border and background appearance. * Use [Angle](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabel.Angle.html) to rotate the labels and reduce overlap. * Use [Style](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.10/C1.Win.Chart.DataLabelBase.Style.html) to configure the font and text appearance. The following image shows styled data labels with borders, connecting lines, and rotated text: ![C1WinForms FlexChart styled using data labels](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/image-20260701.3adb0d.png) ```csharp //Set how far data labels appears to data point this.flexChart1.DataLabel.Offset = 10; //Connect data labels with data point with a connecting line flexChart1.DataLabel.ConnectingLine = true; //Set to show data labels borders flexChart1.DataLabel.Border = true; //Style data labels flexChart1.DataLabel.Style.Font = new Font(this.flexChart1.Font.FontFamily, 8, FontStyle.Italic); flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed; flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue; //Set the data label angle flexChart1.DataLabel.Angle = 45; ``` ```vbnet 'Sett how far data labels appears to data point Me.flexChart1.DataLabel.Offset = 10 'Connect data labels with data point with a connecting line flexChart1.DataLabel.ConnectingLine = True 'Set to show data labels borders flexChart1.DataLabel.Border = True 'Style data labels flexChart1.DataLabel.Style.Font = New Font(Me.flexChart1.Font.FontFamily, 8, FontStyle.Italic) flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue 'Set the data label angle flexChart1.DataLabel.Angle = 45 ```