Class Chart3DDataLabel

Gets or sets the options for customizing the data labels in the 3D Chart series.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
Chart3DSubComponent
Chart3DDataLabel
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Chart3D
Assembly: Syncfusion.Blazor.dll
Syntax
public class Chart3DDataLabel : Chart3DSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

Use the Chart3DDataLabel class to customize the appearance and behavior of data labels in the 3D Chart 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 3D Chart.

Declaration
[Parameter]
public RenderFragment<Chart3DDataPointInfo> Chart3DDataLabelTemplate { get; set; }
Property Value
Type Description
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
[Parameter]
public double DataLabelAngle { get; set; }
Property Value
Type Description
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 3D Chart series.

Declaration
[Parameter]
public bool EnableRotation { get; set; }
Property Value
Type Description
bool

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
[Parameter]
public string Fill { get; set; }
Property Value
Type Description
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
[Parameter]
public string Format { get; set; }
Property Value
Type Description
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 3D Chart 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 3D Chart series.

Declaration
[Parameter]
public string NameField { get; set; }
Property Value
Type Description
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
[Parameter]
public double Opacity { get; set; }
Property Value
Type Description
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 3D Chart 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 3D Chart series. The available options are:

  • Top
  • Middle
  • Bottom
Declaration
[Parameter]
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 3D Chart series.

Visible

Gets or sets the visibility of the data label.

Declaration
[Parameter]
public bool Visible { get; set; }
Property Value
Type Description
bool

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 3D Chart series. When set to true, data labels will be displayed for data points in the chart.

Implements