Class SfChart3D
Represents the 3D Chart component that provides a graphical representation of data.
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Chart3D
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfChart3D : SfDataBoundComponent, IChart3DSubcomponentTracker, 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: <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>
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 SfChart3D.
Declaration
public string AccessibilityDescription { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value that specifies the accessibility description for the SfChart3D. The default value is empty string. |
Remarks
AllowMultiSelection
Gets or sets a value indicating whether multiple selection is enabled in the SfChart3D.
Declaration
public bool AllowMultiSelection { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | 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 SfChart3D.
Declaration
public Action<Chart3DAxisLabelRenderEventArgs> AxisLabelRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DAxisLabelRenderEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DAxisRangeRenderedEventArgs> AxisRangeRendered { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DAxisRangeRenderedEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public string BackgroundColor { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string value specifying the background color of the SfChart3D. The default background color is determined by the SfChart3D'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 SfChart3D .
Declaration
public string BackgroundImage { get; set; }
Property Value
Type | Description |
---|---|
System.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 SfChart3D. Specify the URL or path to the image file to be used as the background.
ChildContent
Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.RenderFragment |
Created
An event that is raised when the SfChart3D is created.
Declaration
public Action<Chart3DCreatedEventArgs> Created { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DCreatedEventArgs> | Accepts an System.Action with Chart3DCreatedEventArgs as the type parameter. |
Remarks
You can access information about the created SfChart3D through the Chart3DCreatedEventArgs event argument.
CssClass
Gets and sets the custom CSS class name for the SfChart3D .
Declaration
public string CssClass { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is empty. |
Remarks
The CssClass property allows you to apply custom styles to the SfChart3D component. Use this property to specify CSS classes that will be applied to the container of the SfChart3D.
DataLabelRendering
An event that is raised before each data label is rendered for the series on the SfChart3D.
Declaration
public Action<Chart3DTextRenderEventArgs> DataLabelRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DTextRenderEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public IEnumerable<object> DataSource { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IEnumerable<System.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 SfChart3D. 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 SfChart3D from front view of the series to the background wall.
Declaration
public double Depth { get; set; }
Property Value
Type | Description |
---|---|
System.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 SfChart3D. Increasing the Depth value moves the series further away from the viewer.
EnableRotation
Gets or sets the options to enable rotation for the SfChart3D.
Declaration
public bool EnableRotation { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the rotation can be enabled; otherwise, false. The default value is false. |
Remarks
When set to true, the SfChart3D 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
public bool EnableSideBySidePlacement { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | 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 SfChart3D export operation is completed.
Declaration
public Action<Chart3DExportedEventArgs> ExportCompleted { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DExportedEventArgs> | Accepts an System.Action with Chart3DExportedEventArgs as the type parameter. |
Remarks
You can access information about the SfChart3D exported dataUrl, base64 string, and more through the Chart3DExportedEventArgs event argument.
Height
Gets or sets the height of the SfChart3D as a string.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String | The height of the SfChart3D as a string value. The default value is 100%. |
Remarks
Accepts input as either pixel or percentage. If specified as '100%', the SfChart3D renders to the full height of its parent element.
HighlightColor
Gets or sets the highlight color for the SfChart3D.
Declaration
public string HighlightColor { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the highlight color. Accepts valid CSS color string values. |
Remarks
Applicable only when HighlightMode is applied. SfChart3D points, series or a cluster of points (based on the HighlightMode applied and SfChart3D 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
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: |
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 SfChart3D 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
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 SfChart3D.
ID
Gets or sets the ID for the SfChart3D component.
Declaration
public string ID { get; set; }
Property Value
Type | Description |
---|---|
System.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 SfChart3D component. If not explicitly set, the ID is generated automatically with the specified prefix.
IsTransposed
Gets or sets whether the SfChart3D should be rendered in a transposed manner.
Declaration
public bool IsTransposed { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if transposing can be enabled; otherwise, false. The default value is false. |
Remarks
If set to true
, the SfChart3D 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 SfChart3D.
Declaration
public Action<Chart3DLegendClickEventArgs> LegendClick { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DLegendClickEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DLegendRenderEventArgs> LegendItemRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DLegendRenderEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DMouseEventArgs> MouseClick { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DMouseEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DMouseEventArgs> MouseDown { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DMouseEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DMouseEventArgs> MouseMove { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DMouseEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DMouseEventArgs> MouseUp { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DMouseEventArgs> | Accepts an System.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 SfChart3D series.
Declaration
public string[] Palettes { get; set; }
Property Value
Type | Description |
---|---|
System.String[] | Accepts a string array that specifies the palette for SfChart3D 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 SfChart3D.
Declaration
public double PerspectiveAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Accepts the double value. The default value is |
Remarks
The PerspectiveAngle property controls the perspective angle of the SfChart3D. 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 SfChart3D.
Declaration
public Action<Chart3DPointClickEventArgs> PointClick { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DPointClickEventArgs> | Accepts an System.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 SfChart3D.
Declaration
public Action<Chart3DPointRenderEventArgs> PointRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DPointRenderEventArgs> | Accepts an System.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 SfChart3D print operation is completed.
Declaration
public Action PrintCompleted { get; set; }
Property Value
Type |
---|
System.Action |
Remarks
You can get notified when the print operation is completed through the PrintCompleted event.
Query
Gets or sets the query for the SfChart3D series to filter the data source.
Declaration
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 SfChart3D.
Declaration
public double RotationAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Accepts the rotation angle value in degrees. The default value is 0. |
Remarks
Use the RotationAngle property to rotate the SfChart3D to the specified angle at initial rendering.
SelectionChanged
An event that is raised when selection process is completed on the SfChart3D.
Declaration
public Action<Chart3DSelectionChangedEventArgs> SelectionChanged { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DSelectionChangedEventArgs> | Accepts an System.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
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: |
Remarks
SelectionPattern
Gets or sets the option to customize the pattern style for the selected series or points in the SfChart3D based on the SelectionMode.
Declaration
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 SfChart3D.
SeriesRendering
An event that is raised before each series is rendered on the SfChart3D.
Declaration
public Action<Chart3DSeriesRenderEventArgs> SeriesRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DSeriesRenderEventArgs> | Accepts an System.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 SfChart3D series.
SizeChanged
An event that is raised when browser window is resized on the SfChart3D.
Declaration
public Action<Chart3DResizedEventArgs> SizeChanged { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DResizedEventArgs> | Accepts an System.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 SfChart3D component.
Declaration
public string SubTitle { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the subtitle of the SfChart3D. The default value is an empty string. |
Remarks
This SubTitle property allows you to provide additional information or context to the SfChart3D title. This is only applicable when the Title property is set.
TabIndex
Gets and sets the tabIndex for SfChart3D element.
Declaration
public double TabIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Accepts the integer value that specifies the tabIndex for the SfChart3D element. The default value is 0. |
Remarks
When the TabIndex property is set, the SfChart3D element can be focused and navigated using the keyboard at the specified tabIndex.
Theme
Gets or sets the theme for the SfChart3D.
Declaration
public Theme Theme { get; set; }
Property Value
Type | Description |
---|---|
Theme | One of the Theme enumerations that specifies the theme of the SfChart3D component. The default value is Theme.Material. |
Remarks
SfChart3D element's color and text get modified, such as fill, font size, font family, and font style, which enhances the overall SfChart3D appearance based on the predefined theme applied.
TiltAngle
Gets or sets the options to enable tilt angle for the SfChart3D.
Declaration
public double TiltAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Accepts the tilt angle value in degrees. The default value is 0. |
Remarks
Use this property to tilt the SfChart3D to the specified angle at initial rendering. Additionally, this property can be used to dynamically tilt the SfChart3D.
Title
Gets or sets the title of the SfChart3D component.
Declaration
public string Title { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the title of the SfChart3D. The default value is an empty string. |
Remarks
The Title property allows you to provide a descriptive title for the SfChart3D, 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 SfChart3D.
Declaration
public Action<Chart3DTooltipRenderEventArgs> TooltipRendering { get; set; }
Property Value
Type | Description |
---|---|
System.Action<Chart3DTooltipRenderEventArgs> | Accepts an System.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
public bool UseGroupingSeparator { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | 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 SfChart3D.
Declaration
public string WallColor { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value that specifies the 3D wall color of the SfChart3D. The default value is “”. |
Remarks
The WallColor property allows you to set the color of the wall in the SfChart3D. 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 SfChart3D.
Declaration
public double WallSize { get; set; }
Property Value
Type | Description |
---|---|
System.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 SfChart3D. A larger value for WallSize results in thicker walls, affecting the visual appearance of the chart.
Width
Gets or sets the width of the SfChart3D as a string.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | The width of SfChart3D as string value. The default value is "100%" . |
Remarks
Accepts input as either pixel or percentage. If specified as '100%', the SfChart3D renders to the full width of its parent element.
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
ExportAsync(ExportType, String, Nullable<PdfPageOrientation>, Boolean, Boolean)
The method is used to perform the export functionality for the rendered SfChart3D.
Declaration
public Task ExportAsync(ExportType type, string fileName, Nullable<PdfPageOrientation> orientation = null, bool allowDownload = true, bool isBase64 = false)
Parameters
Type | Name | Description |
---|---|---|
ExportType | type | Specifies the export type for the rendered SfChart3D. |
System.String | fileName | Specifies the filename. |
System.Nullable<Syncfusion.PdfExport.PdfPageOrientation> | orientation | Specifies the portrait or landscape orientation of the page. |
System.Boolean | allowDownload | Specifies whether to download or not. |
System.Boolean | isBase64 | Specify whether to obtain the SfChart3D image as a base64 string or not. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | Export the SfChart3D 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" },
};
}
OnAfterRenderAsync(Boolean)
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | firstRender |
Returns
Type |
---|
System.Threading.Tasks.Task |
Overrides
OnInitialized()
Declaration
protected override void OnInitialized()
OnParametersSet()
Declaration
protected override void 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 = null)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.ElementReference | elementRef | Optional reference to the element to be printed. If not provided, the chart is printed. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.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(Boolean)
The method is used to rerender the 3D chart.
Declaration
public Task RefreshAsync(bool shouldAnimate = true)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | shouldAnimate |
Returns
Type |
---|
System.Threading.Tasks.Task |