Class Chart3DDataLabel

Gets or sets the options for customizing the data labels in the SfChart3D series.

Inheritance
System.Object
Chart3DSubComponent
Chart3DDataLabel
Namespace: Syncfusion.Blazor.Chart3D
Assembly: Syncfusion.Blazor.dll
Syntax
public class Chart3DDataLabel : Chart3DSubComponent, IChart3DElement, IChart3DSubcomponentTracker
Remarks

Use the Chart3DDataLabel class to customize the appearance and behavior of data labels in the SfChart3D series. This class allows you to configure settings such as font, color, position, and visibility of data labels.

Examples
<SfChart3D>
    <Chart3DSeriesCollection>
        <Chart3DSeries XName="Browser" YName="Users" DataSource="@StatisticsDetails">
            <Chart3DDataLabel Visible="true" NameField="Browser" Fill="blue" Format="N2" Opacity="0.9" DataLabelAngle="30" EnableRotation="true" Position="Chart3DDataLabelPosition.Top">
                  <Chart3DDataLabelBorder Color="red" Width="2"></Chart3DDataLabelBorder>
                  <Chart3DDataLabelMargin Bottom="5" Left="5" Right="5" Top="5"></Chart3DDataLabelMargin>
                  <Chart3DDataLabelFont FontFamily="Arial" Color="Gray" FontStyle="Bold" FontWeight="600" FontSize="14px" Opacity="0.9" TextOverflow="TextOverflow.Wrap"></Chart3DDataLabelFont>
            </Chart3DDataLabel>
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>
@code {
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
        public string Color { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 65.3, Color = "red" },
        new Statistics { Browser = "Safari", Users = 18.3, Color = "blue" },
        new Statistics { Browser = "Edge", Users = 5, Color = "green" },
        new Statistics { Browser = “Firefox”, Users = 3, Color = "orange"  },
        new Statistics { Browser = “Samsung Internet”, Users = 2.6, Color = "yellow" },
        new Statistics { Browser = “Opera”, Users = 2.4, Color = "pink" },
    };
}

Constructors

Chart3DDataLabel()

Declaration
public Chart3DDataLabel()

Properties

Chart3DDataLabelTemplate

Gets or sets a template used to render datalabels of the SfChart3D.

Declaration
public RenderFragment<Chart3DDataPointInfo> Chart3DDataLabelTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<Chart3DDataPointInfo>

The template content.
Remarks

The Chart3DDataLabelTemplate used to define custom template for datalabels. Use the template’s context parameter to access a Chart3DDataPointInfo and its fields.

Examples
@using Syncfusion.Blazor.Chart3D
<SfChart3D>
   <Chart3DSeriesCollection>
       <Chart3DSeries DataSource = "@ChartData" XName="X" YName="Y" ZName="Z" Type="Chart3DSeriesType.Column">
           <Chart3DDataLabel Visible = "true">
               <Chart3DDataLabelTemplate>
                   @{
                       var data = context as Chart3DDataPointInfo;
                       <div>@data. Y</div>
                    }
               </Chart3DDataLabelTemplate>
           </Chart3DDataLabel>
       </Chart3DSeries>
   </Chart3DSeriesCollection>
</SfChart3D>

DataLabelAngle

Gets or sets the angle of the data labels to be rotated.

Declaration
public double DataLabelAngle { get; set; }
Property Value
Type Description
System.Double

Accepts the double value from -360 to 360. The default value is 0.
Remarks

If negative value is set, the data label will be rotated in the anti-clockwise direction. This property is applicable only when EnableRotation is enabled.

EnableRotation

Gets or sets the data label rotation option for the SfChart3D series.

Declaration
public bool EnableRotation { get; set; }
Property Value
Type Description
System.Boolean

Accepts a boolean value. The default value is false.
Remarks

When EnableRotation is set to true, the data label will be rotated based on the DataLabelAngle property.

Fill

Gets or sets the background fill color of the data labels.

Declaration
public string Fill { get; set; }
Property Value
Type Description
System.String

Accepts valid CSS color string values such as hexadecimal, rgba, and color names. The default value is transparent.
Remarks

This property is applicable only when Syncfusion.Blazor.Chart3D.Chart3DDataLabel.Border is enabled.

Format

Gets and sets the data label format that accepts any global string format like ‘C’, ‘P’, ‘N1’, etc. It also accepts placeholder like ‘{value}°C’ in which value represent the data label, for example, 20°C.

Declaration
public string Format { get; set; }
Property Value
Type Description
System.String

Specifies the format for the data label. The default value is null.
Remarks

Use the Format property to define the format for the data labels in the SfChart3D series. You can use standard string format specifiers like 'C' for currency, 'P' for percentage, 'N1' for numeric format with one decimal place, etc. Additionally, you can use placeholders like '{value}' in the format string to dynamically represent the data label value.

NameField

Gets or sets the datalabel mapping field name for the SfChart3D series.

Declaration
public string NameField { get; set; }
Property Value
Type Description
System.String

Accepts the string value of the field name in the data source. The default value is null.
Remarks

Use the NameField property to specify the field name in the data source that should be used for data label mapping in the 3D chart series. When this property is set, the chart will use the specified field values as data labels for the corresponding data points.

Opacity

Gets or sets the opacity of the data labels.

Declaration
public double Opacity { get; set; }
Property Value
Type Description
System.Double

Accepts the double value from 0 to 1. The default value is 1.
Remarks

The Opacity property defines the opacity level of the data labels in the SfChart3D series. The opacity value should be between 0 (completely transparent) and 1 (completely opaque).

Position

Gets or sets the position of the data labels for the SfChart3D series. The available options are:

  • Top
  • Middle
  • Bottom
Declaration
public Chart3DDataLabelPosition Position { get; set; }
Property Value
Type Description
Chart3DDataLabelPosition

Accepts the value from the Chart3DDataLabelPosition enum. The default value is Middle.
Remarks

The position of the data labels determines where they are displayed relative to the data points in the SfChart3D series.

Visible

Gets or sets the visibility of the data label.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean

Accepts a boolean value. Set true to enable the data label; otherwise, false. The default value is false.
Remarks

Use the Visible property to control the visibility of data labels in the SfChart3D series. When set to true, data labels will be displayed for data points in the chart.