Class SfChart3D

Represents the 3D Chart component that provides a graphical representation of data.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfDataBoundComponent

SfChart3D

Implements

IComponent

IHandleAfterRender

IDisposable

IHandleEvent

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.OnAfterRenderAsync(bool)

SfDataBoundComponent.OnInitializedAsync()

SfDataBoundComponent.OnParametersSetAsync()

SfDataBoundComponent.SetDataManager<T>(object)

Namespace: Syncfusion.Blazor.Chart3D

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfChart3D : SfDataBoundComponent, IComponent, IHandleAfterRender, IDisposable, IHandleEvent

Remarks

The 3D Chart provides a flexible way to visualize data in a graphical format, enabling users to explore and understand data patterns.

Examples

This example demonstrates how to use the <see cref="SfChart3D"/> component within a Blazor component: <code> @using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Product Sales Report"> <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"> </Chart3DPrimaryXAxis> <Chart3DSeriesCollection> <Chart3DSeries DataSource="@chartData" XName="X" YName="Y" Name="Persons"> </Chart3DSeries> </Chart3DSeriesCollection> </SfChart3D>

@code { class ChartData { public string X {get; set;} public double Y {get; set;} } List<ChartData> chartData = new List<ChartData> { new ChartData {X = "John", Y = 100}, new ChartData {X = "Peter", Y = 200}, new ChartData {X = "Smith", Y = 300}, new ChartData {X = "Tom", Y = 400}, new ChartData {X = "Jerry", Y = 500}, }; } </code>

// This example demonstrates how to use the <see cref="SfChart3D"/> component within a Blazor component:
@using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Product Sales Report">
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
    </Chart3DPrimaryXAxis>
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@chartData" XName="X" YName="Y" Name="Persons">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    class ChartData
    {
        public string X {get; set;}
        public double Y {get; set;}
    }
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData {X = "John", Y = 100},
        new ChartData {X = "Peter", Y = 200},
        new ChartData {X = "Smith", Y = 300},
        new ChartData {X = "Tom", Y = 400},
        new ChartData {X = "Jerry", Y = 500},
    };
}

This example demonstrates how to use the <see cref="SfChart3D"/> component within a Blazor component:
<code>
@using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Product Sales Report">
<Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
</Chart3DPrimaryXAxis>
<Chart3DSeriesCollection>
    <Chart3DSeries DataSource="@chartData" XName="X" YName="Y" Name="Persons">
    </Chart3DSeries>
</Chart3DSeriesCollection>
</SfChart3D>

@code {
    class ChartData
    {
        public string X {get; set;}
        public double Y {get; set;}
    }
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData {X = "John", Y = 100},
        new ChartData {X = "Peter", Y = 200},
        new ChartData {X = "Smith", Y = 300},
        new ChartData {X = "Tom", Y = 400},
        new ChartData {X = "Jerry", Y = 500},
    };
}

This example demonstrates how to use the <see cref="SfChart3D"/> component within a Blazor component: <code> @using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Product Sales Report"> <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"> </Chart3DPrimaryXAxis> <Chart3DSeriesCollection> <Chart3DSeries DataSource="@chartData" XName="X" YName="Y" Name="Persons"> </Chart3DSeries> </Chart3DSeriesCollection> </SfChart3D>

@code { class ChartData { public string X {get; set;} public double Y {get; set;} } List<ChartData> chartData = new List<ChartData> { new ChartData {X = "John", Y = 100}, new ChartData {X = "Peter", Y = 200}, new ChartData {X = "Smith", Y = 300}, new ChartData {X = "Tom", Y = 400}, new ChartData {X = "Jerry", Y = 500}, }; } </code>

This example demonstrates how to use the <see cref="SfChart3D"/> component within a Blazor component: <code> @using Syncfusion.Blazor.Chart3D

<SfChart3D Title="Product Sales Report"> <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"> </Chart3DPrimaryXAxis> <Chart3DSeriesCollection> <Chart3DSeries DataSource="@chartData" XName="X" YName="Y" Name="Persons"> </Chart3DSeries> </Chart3DSeriesCollection> </SfChart3D>

@code { class ChartData { public string X {get; set;} public double Y {get; set;} } List<ChartData> chartData = new List<ChartData> { new ChartData {X = "John", Y = 100}, new ChartData {X = "Peter", Y = 200}, new ChartData {X = "Smith", Y = 300}, new ChartData {X = "Tom", Y = 400}, new ChartData {X = "Jerry", Y = 500}, }; } </code>

Constructors

SfChart3D()

Declaration

public SfChart3D()

Properties

AccessibilityDescription

Gets and sets the accessibility description for 3D Chart.

Declaration

[Parameter]
public string AccessibilityDescription { get; set; }

Property Value

Type	Description
string	Accepts the string value that specifies the accessibility description for the 3D Chart. The default value is empty string.

Remarks

If not set, the Title can be used as the accessibility description for the 3D Chart.

AllowMultiSelection

Gets or sets a value indicating whether multiple selection is enabled in the 3D Chart.

Declaration

[Parameter]
public bool AllowMultiSelection { get; set; }

Property Value

Type	Description
bool	true if multiple selection can be enabled; otherwise, false. The default value is false.

Remarks

This property is applicable only when SelectionMode is applied. Enabling this property allows the selection of multiple points or series (based on the SelectionMode applied).

AxisLabelRendering

An event that is raised before each axis label is rendered on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DAxisLabelRenderEventArgs> AxisLabelRendering { get; set; }

Property Value

Type	Description
Action<Chart3DAxisLabelRenderEventArgs>	Accepts an Action with Chart3DAxisLabelRenderEventArgs as the type parameter.

Remarks

You can access information about the axis label being rendered through the Chart3DAxisLabelRenderEventArgs event argument and customize the appearance of axis labels.

AxisRangeRendered

The event that is raised after the each axis range is calculated for the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DAxisRangeRenderedEventArgs> AxisRangeRendered { get; set; }

Property Value

Type	Description
Action<Chart3DAxisRangeRenderedEventArgs>	Accepts an Action with Chart3DAxisRangeRenderedEventArgs as the type parameter.

Remarks

You can access information about the axis and its calculated range through the Chart3DAxisRangeRenderedEventArgs event argu-ment.

BackgroundColor

Gets or sets the background color of the 3D Chart.

Declaration

[Parameter]
public string BackgroundColor { get; set; }

Property Value

Type	Description
string	A string value specifying the background color of the 3D Chart. The default background color is determined by the 3D Chart's theme. By default, the theme is set to Bootstrap5 with a background color of rgba(255,255,255).

Remarks

The value can be specified in hex or rgba format, following valid CSS color string conventions.

BackgroundImage

Gets and sets the background image for 3D Chart .

Declaration

[Parameter]
public string BackgroundImage { get; set; }

Property Value

Type	Description
string	A string representing the URL or path to the background image. The default value is empty.

Remarks

The BackgroundImage property allows you to set a custom background image for the 3D Chart. Specify the URL or path to the image file to be used as the background.

ChildContent

Declaration

[Parameter]
[JsonIgnore]
public RenderFragment ChildContent { get; set; }

Property Value

Type
RenderFragment

Created

An event that is raised when the 3D Chart is created.

Declaration

[Parameter]
public Action<Chart3DCreatedEventArgs> Created { get; set; }

Property Value

Type	Description
Action<Chart3DCreatedEventArgs>	Accepts an Action with Chart3DCreatedEventArgs as the type parameter.

Remarks

You can access information about the created 3D Chart through the Chart3DCreatedEventArgs event argument.

CssClass

Gets and sets the custom CSS class name for the 3D Chart .

Declaration

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
string	Accepts the string value. The default value is empty.

Remarks

The CssClass property allows you to apply custom styles to the 3D Chart component. Use this property to specify CSS classes that will be applied to the container of the 3D Chart.

DataLabelRendering

An event that is raised before each data label is rendered for the series on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DTextRenderEventArgs> DataLabelRendering { get; set; }

Property Value

Type	Description
Action<Chart3DTextRenderEventArgs>	Accepts an Action with Chart3DTextRenderEventArgs as the type parameter.

Remarks

You can access information about the data label being rendered through the Chart3DTextRenderEventArgs event argument and customize the appearance of data labels.

DataSource

Gets or sets the data source for the 3D Chart.

Declaration

[Parameter]
public IEnumerable<object> DataSource { get; set; }

Property Value

Type	Description
IEnumerable<object>	Accepts the IEnumerable object as a data source. Also, it can be an expando object, dynamic object, or list of objects. The default value is null.

Remarks

The DataSource property allows you to bind data to the 3D Chart. You can use an IEnumerable object, an expando object, a dynamic object, or a list of objects as the data source. To consume data from a remote service or custom adaptor, use the SfDataManager.

Examples

<SfChart3D DataSource="@StatisticsDetails" >
    <Chart3DSeriesCollection>
        <Chart3DSeries XName="Browser" YName="Users" Name="Users" Type="Chart3DSeriesType.Column">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category"></Chart3DPrimaryXAxis>
</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" },
    };
}

Depth

Depth of the 3D Chart from front view of the series to the background wall.

Declaration

[Parameter]
public double Depth { get; set; }

Property Value

Type	Description
double	Accepts the value in pixels. The default value is 50.

Remarks

The Depth property determines the distance between the front view of the series and the background wall in the 3D Chart. Increasing the Depth value moves the series further away from the viewer.

EnableRotation

Gets or sets the options to enable rotation for the 3D Chart.

Declaration

[Parameter]
public bool EnableRotation { get; set; }

Property Value

Type	Description
bool	true if the rotation can be enabled; otherwise, false. The default value is false.

Remarks

When set to true, the 3D Chart can be rotated using mouse or touch gestures.

EnableSideBySidePlacement

Gets or sets a value indicating whether to enable side-by-side placement of series.

Declaration

[Parameter]
public bool EnableSideBySidePlacement { get; set; }

Property Value

Type	Description
bool	true if side-by-side placement can be enabled; otherwise, false. The default value is true.

Remarks

Set the EnableSideBySidePlacement property to control whether series are placed side by side in the chart. When enabled, series are positioned next to each other horizontally or vertically, depending on the chart type. Disabling side-by-side placement may result in series overlapping.

ExportCompleted

An event that is raised when the 3D Chart export operation is completed.

Declaration

[Parameter]
public Action<Chart3DExportedEventArgs> ExportCompleted { get; set; }

Property Value

Type	Description
Action<Chart3DExportedEventArgs>	Accepts an Action with Chart3DExportedEventArgs as the type parameter.

Remarks

You can access information about the 3D Chart exported dataUrl, base64 string, and more through the Chart3DExportedEventArgs event argument.

Height

Gets or sets the height of the 3D Chart as a string.

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
string	The height of the 3D Chart as a string value. The default value is 100%.

Remarks

Accepts input as either pixel or percentage. If specified as '100%', the 3D Chart renders to the full height of its parent element.

HighlightColor

Gets or sets the highlight color for the 3D Chart.

Declaration

[Parameter]
public string HighlightColor { get; set; }

Property Value

Type	Description
string	A string representing the highlight color. Accepts valid CSS color string values.

Remarks

Applicable only when HighlightMode is applied. 3D Chart points, series or a cluster of points (based on the HighlightMode applied and 3D Chart series type) will be displayed in the provided HighlightColor when the user hovers over them.

HighlightMode

Gets or sets the highlight mode of the SfChart3D component.

Declaration

[Parameter]
public HighlightMode HighlightMode { get; set; }

Property Value

Type

Description

HighlightMode

One of the HighlightMode enumerations that specifies how the SfChart3D component should highlight elements. Available options include: None: No highlighting will occur. Series: Series will be highlighted when hovered. Point: Individual points will be highlighted when hovered. Cluster: A cluster of points across all series with the same index will be highlighted when hovered. The default value is None.

Remarks

Set the HighlightMode property to specify how the SfChart3D component should highlight elements when hovered.

HighlightPattern

Gets or sets the option to customize the pattern style for the highlighted series or points in the 3D Chart based on the HighlightMode. The available options are:

• None: No pattern will be applied.
• Chessboard: Chessboard pattern will be applied.
• Dots: Dots pattern will be applied.
• DiagonalForward: DiagonalForward pattern will be applied.
• Crosshatch: Crosshatch pattern will be applied.
• Pacman: Pacman pattern will be applied.
• DiagonalBackward: DiagonalBackward pattern will be applied.
• Grid: Grid pattern will be applied.
• Turquoise: Turquoise pattern will be applied.
• Star: Star pattern will be applied.
• Triangle: Triangle pattern will be applied.
• Circle: Circle pattern will be applied.
• Tile: Tile pattern will be applied.
• HorizontalDash: HorizontalDash pattern will be applied.
• VerticalDash: VerticalDash pattern will be applied.
• Rectangle: Rectangle pattern will be applied.
• Box: Box pattern will be applied.
• VerticalStripe: VerticalStripe pattern will be applied.
• HorizontalStripe: HorizontalStripe pattern will be applied.
• Bubble: Bubble pattern will be applied.

Declaration

[Parameter]
public SelectionPattern HighlightPattern { get; set; }

Property Value

Type	Description
SelectionPattern	Accepts the SelectionPattern enumeration. The default value is SelectionPattern.None.

Remarks

Use this property to customize the pattern style for highlighted series or points in the 3D Chart.

ID

Gets or sets the ID for the 3D Chart component.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	Accepts the string value. The default value is auto generated randomly with prefix of "chart3D".

Remarks

The ID property allows you to specify a unique identifier for the 3D Chart component. If not explicitly set, the ID is generated automatically with the specified prefix.

IsTransposed

Gets or sets whether the 3D Chart should be rendered in a transposed manner.

Declaration

[Parameter]
public bool IsTransposed { get; set; }

Property Value

Type	Description
bool	true if transposing can be enabled; otherwise, false. The default value is false.

Remarks

If set to true, the 3D Chart will be rendered in a transposed manner with the horizontal axis placed as the vertical axis and vice versa.

LegendClick

An event that is raised when a legend item is clicked on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DLegendClickEventArgs> LegendClick { get; set; }

Property Value

Type	Description
Action<Chart3DLegendClickEventArgs>	Accepts an Action with Chart3DLegendClickEventArgs as the type parameter.

Remarks

You can access information about the clicked legend item's text, shape, and respective series through the Chart3DLegendClickEventArgs event argument.

LegendItemRendering

An event that is raised before each legend item is rendered on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DLegendRenderEventArgs> LegendItemRendering { get; set; }

Property Value

Type	Description
Action<Chart3DLegendRenderEventArgs>	Accepts an Action with Chart3DLegendRenderEventArgs as the type parameter.

Remarks

You can access information about the legend item being rendered through the Chart3DLegendRenderEventArgs event argument also able to customize legend text, shape, and fill color.

MouseClick

An event that is raised when a mouse click event occurs on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DMouseEventArgs> MouseClick { get; set; }

Property Value

Type	Description
Action<Chart3DMouseEventArgs>	Accepts an Action with Chart3DMouseEventArgs as the type parameter.

Remarks

You can access information about the mouse click event like mouse x and y position, chart id through the Chart3DMouseEventArgs event argument.

MouseDown

An event that is raised when a mouse down event occurs on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DMouseEventArgs> MouseDown { get; set; }

Property Value

Type	Description
Action<Chart3DMouseEventArgs>	Accepts an Action with Chart3DMouseEventArgs as the type parameter.

Remarks

You can access information about the mouse down event like mouse x and y position, chart id through the Chart3DMouseEventArgs event argument.

MouseMove

An event that is raised when a mouse move event occurs on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DMouseEventArgs> MouseMove { get; set; }

Property Value

Type	Description
Action<Chart3DMouseEventArgs>	Accepts an Action with Chart3DMouseEventArgs as the type parameter.

Remarks

You can access information about the mouse move event like mouse x and y position, chart id through the Chart3DMouseEventArgs event argument.

MouseUp

An event that is raised when a mouse up event occurs on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DMouseEventArgs> MouseUp { get; set; }

Property Value

Type	Description
Action<Chart3DMouseEventArgs>	Accepts an Action with Chart3DMouseEventArgs as the type parameter.

Remarks

You can access information about the mouse up event like mouse x and y position, chart id through the Chart3DMouseEventArgs event argument.

Palettes

Gets or sets the palette for the 3D Chart series.

Declaration

[Parameter]
public string[] Palettes { get; set; }

Property Value

Type	Description
string[]	Accepts a string array that specifies the palette for 3D Chart series. The default value is an empty string array.

Remarks

Multiple series will be applied with fill color based on the order of values in the palette array.

Examples

<SfChart3D Palettes="@palettes">
    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" Title="Browser"/>
    <Chart3DSeriesCollection>
        <Chart3DSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Type="Chart3DSeriesType.Column">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>

@code {
    string[] palettes = new string[] { "#FFD700", "#C0C0C0", "#CD7F32", "#FFA07A", "#808080", "#008000" };
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
    }

    public List<Statistics> StatisticsDetails = new List<Statistics>
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

PerspectiveAngle

Gets or sets the perspective angle of the 3D Chart.

Declaration

[Parameter]
public double PerspectiveAngle { get; set; }

Property Value

Type	Description
double	Accepts the double value. The default value is 90.

Remarks

The PerspectiveAngle property controls the perspective angle of the 3D Chart. A higher angle value results in a wider field of view, while a lower value creates a more compressed perspective. Adjusting this property can change the appearance of the chart to suit different viewing preferences.

PointClick

An event that is raised when a series point is clicked on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DPointClickEventArgs> PointClick { get; set; }

Property Value

Type	Description
Action<Chart3DPointClickEventArgs>	Accepts an Action with Chart3DPointClickEventArgs as the type parameter.

Remarks

You can access information about the clicked series point's x and y values, series index, and more through the Chart3DPointClickEventArgs event argument.

PointRendering

An event that is raised before each data point for the series is rendered on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DPointRenderEventArgs> PointRendering { get; set; }

Property Value

Type	Description
Action<Chart3DPointRenderEventArgs>	Accepts an Action with Chart3DPointRenderEventArgs as the type parameter.

Remarks

You can access information about the data point being rendered through the Chart3DPointRenderEventArgs event argument and customize the appearance of data points.

PrintCompleted

An event that is raised when the 3D Chart print operation is completed.

Declaration

[Parameter]
public Action PrintCompleted { get; set; }

Property Value

Type
Action

Remarks

You can get notified when the print operation is completed through the PrintCompleted event.

Query

Gets or sets the query for the 3D Chart series to filter the data source.

Declaration

[Parameter]
public Query Query { get; set; }

Property Value

Type	Description
Query	Accepts the Query object to filter the data source. The default value is instance of a Query.

Remarks

This property is applicable only when the DataSource is SfDataManager.

RotationAngle

Gets or sets the options to customize the rotation angle of the 3D Chart.

Declaration

[Parameter]
public double RotationAngle { get; set; }

Property Value

Type	Description
double	Accepts the rotation angle value in degrees. The default value is 0.

Remarks

Use the RotationAngle property to rotate the 3D Chart to the specified angle at initial rendering.

SelectionChanged

An event that is raised when selection process is completed on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DSelectionChangedEventArgs> SelectionChanged { get; set; }

Property Value

Type	Description
Action<Chart3DSelectionChangedEventArgs>	Accepts an Action with Chart3DSelectionChangedEventArgs as the type parameter.

Remarks

You can access information about the selected data points, series, and more through the Chart3DSelectionChangedEventArgs event argument.

SelectionMode

Gets or sets the selection mode of the SfChart3D component.

Declaration

[Parameter]
public SelectionMode SelectionMode { get; set; }

Property Value

Type	Description
SelectionMode	One of the SelectionMode enumerations that specifies the selection mode of the SfChart3D component. The options include: None: No selection will occur. Series: Selects a series. Point: Selects a single point. Cluster: Selects the points in all series that correspond to the same index. The default value is None.

Remarks

The None option disables selection in the SfChart3D component.

SelectionPattern

Gets or sets the option to customize the pattern style for the selected series or points in the 3D Chart based on the SelectionMode.

Declaration

[Parameter]
public SelectionPattern SelectionPattern { get; set; }

Property Value

Type	Description
SelectionPattern	Accepts the SelectionPattern enumeration. The default value is SelectionPattern.None.

Remarks

The SelectionPattern property allows you to customize the pattern style for selected series or points in the 3D Chart.

SeriesRendering

An event that is raised before each series is rendered on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DSeriesRenderEventArgs> SeriesRendering { get; set; }

Property Value

Type	Description
Action<Chart3DSeriesRenderEventArgs>	Accepts an Action with Chart3DSeriesRenderEventArgs as the type parameter.

Remarks

You can access information about the series data, fill color and more series properties through the Chart3DSeriesRenderEventArgs event argument and use the event argument to customize the 3D Chart series.

SizeChanged

An event that is raised when browser window is resized on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DResizedEventArgs> SizeChanged { get; set; }

Property Value

Type	Description
Action<Chart3DResizedEventArgs>	Accepts an Action with Chart3DResizedEventArgs as the type parameter.

Remarks

you can access information about the resized chart width and height through the Chart3DResizedEventArgs event argument.

SubTitle

Gets or sets the subtitle of the 3D Chart component.

Declaration

[Parameter]
public string SubTitle { get; set; }

Property Value

Type	Description
string	A string representing the subtitle of the 3D Chart. The default value is an empty string.

Remarks

This SubTitle property allows you to provide additional information or context to the 3D Chart title. This is only applicable when the Title property is set.

TabIndex

Gets and sets the tabIndex for 3D Chart element.

Declaration

[Parameter]
public double TabIndex { get; set; }

Property Value

Type	Description
double	Accepts the integer value that specifies the tabIndex for the 3D Chart element. The default value is 0.

Remarks

When the TabIndex property is set, the 3D Chart element can be focused and navigated using the keyboard at the specified tabIndex.

Theme

Gets or sets the theme for the 3D Chart.

Declaration

[Parameter]
public Theme Theme { get; set; }

Property Value

Type	Description
Theme	One of the Theme enumerations that specifies the theme of the 3D Chart component. The default value is Theme.Material.

Remarks

3D Chart element's color and text get modified, such as fill, font size, font family, and font style, which enhances the overall 3D Chart appearance based on the predefined theme applied.

TiltAngle

Gets or sets the options to enable tilt angle for the 3D Chart.

Declaration

[Parameter]
public double TiltAngle { get; set; }

Property Value

Type	Description
double	Accepts the tilt angle value in degrees. The default value is 0.

Remarks

Use this property to tilt the 3D Chart to the specified angle at initial rendering. Additionally, this property can be used to dynamically tilt the 3D Chart.

Title

Gets or sets the title of the 3D Chart component.

Declaration

[Parameter]
public string Title { get; set; }

Property Value

Type	Description
string	A string representing the title of the 3D Chart. The default value is an empty string.

Remarks

The Title property allows you to provide a descriptive title for the 3D Chart, offering users a quick insight into the data it represents. It's recommended to use clear and concise titles that summarize the main purpose or focus of the chart. Adding a title can significantly enhance the overall readability and understanding of the chart, especially in scenarios with complex or diverse data sets.

TooltipRendering

An event that is raised before tooltip is rendered on the 3D Chart.

Declaration

[Parameter]
public Action<Chart3DTooltipRenderEventArgs> TooltipRendering { get; set; }

Property Value

Type	Description
Action<Chart3DTooltipRenderEventArgs>	Accepts an Action with Chart3DTooltipRenderEventArgs as the type parameter.

Remarks

You can access information about the tooltip text, point index, and more through the Chart3DTooltipRenderEventArgs event argument and customize the tooltip text and appearance.

UseGroupingSeparator

Gets or sets the option to enable the grouping separator for the numeric axis labels.

Declaration

[Parameter]
public bool UseGroupingSeparator { get; set; }

Property Value

Type	Description
bool	true if the grouping separator can be enabled; otherwise, false. The default value is false.

Remarks

If set to true, numeric axis labels will be rendered with a grouping separator. For example, 2000 will be rendered as 2,000.

WallColor

Gets or sets the color of the 3D wall for 3D Chart.

Declaration

[Parameter]
public string WallColor { get; set; }

Property Value

Type	Description
string	Accepts the string value that specifies the 3D wall color of the 3D Chart. The default value is “”.

Remarks

The WallColor property allows you to set the color of the wall in the 3D Chart. Specify a color using a string value, such as hex codes (#RRGGBB) or color names. If not set, the default color is used for the wall based on the theme.

WallSize

Gets or sets the options to customize wall size for the 3D Chart.

Declaration

[Parameter]
public double WallSize { get; set; }

Property Value

Type	Description
double	Accepts the value in pixels. The default value is 2.

Remarks

The WallSize property allows you to adjust the thickness of the walls in the 3D Chart. A larger value for WallSize results in thicker walls, affecting the visual appearance of the chart.

Width

Gets or sets the width of the 3D Chart as a string.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
string	The width of 3D Chart as string value. The default value is "100%" .

Remarks

Accepts input as either pixel or percentage. If specified as '100%', the 3D Chart renders to the full width of its parent element.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

ExportAsync(ExportType, string, PdfPageOrientation?, bool, bool)

The method is used to perform the export functionality for the rendered 3D Chart.

Declaration

public Task ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true, bool isBase64 = false)

Parameters

Type	Name	Description
ExportType	type	Specifies the export type for the rendered 3D Chart.
string	fileName	Specifies the filename.
PdfPageOrientation?	orientation	Specifies the portrait or landscape orientation of the page.
bool	allowDownload	Specifies whether to download or not.
bool	isBase64	Specify whether to obtain the 3D Chart image as a base64 string or not.

Returns

Type	Description
Task	Export the 3D Chart with sepcifies export type.

Remarks

<SfChart3D @ref="chart3dObj" >
    <Chart3DSeriesCollection>
        <Chart3DSeries XName="Browser" YName="Users" DataSource="@StatisticsDetails">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>
<button @onclick="ExportChart">ExportChart</button>
@code {
   SfChart3D chart3dObj;
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
        public string Color { get; set; }
    }
    public async Task ExportChart()
    {
       await chart3dObj.Export3DAsync(ExportType.PNG, "3DChart");
    }

    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" },
    };
}

OnParametersSet()

Declaration

protected override void OnParametersSet()

Overrides

ComponentBase.OnParametersSet()

PrintAsync(ElementReference)

Asynchronously prints the specified element referenced by the optional parameter. If no element reference is provided, the chart will print.

Declaration

public Task PrintAsync(ElementReference elementRef = default)

Parameters

Type	Name	Description
ElementReference	elementRef	Optional reference to the element to be printed. If not provided, the chart is printed.

Returns

Type	Description
Task	A task representing the asynchronous printing operation.

Remarks

<SfChart3D @ref="chart3dObj" >
    <Chart3DSeriesCollection>
        <Chart3DSeries XName="Browser" YName="Users" DataSource="@StatisticsDetails">
        </Chart3DSeries>
    </Chart3DSeriesCollection>
</SfChart3D>
<button @onclick="PrintChart">PrintChart</button>
@code {
   SfChart3D chart3dObj;
    public class Statistics
    {
        public string Browser { get; set; }
        public double Users { get; set; }
        public string Color { get; set; }
    }
    public async Task PrintChart()
    {
       await chart3dObj.Print3DAsync();
    }

    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" },
    };
}

RefreshAsync(bool)

The method is used to rerender the 3D chart.

Declaration

public Task RefreshAsync(bool shouldAnimate = true)

Parameters

Type	Name	Description
bool	shouldAnimate

Returns

Type
Task

Implements

IComponent

IHandleAfterRender

IDisposable

IHandleEvent