Class Chart3DTooltipSettings

Gets or sets the options for customizing the tooltip in the 3D Chart.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
Chart3DSubComponent
Chart3DTooltipSettings
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Chart3D
Assembly: Syncfusion.Blazor.dll
Syntax
public class Chart3DTooltipSettings : Chart3DSubComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Examples
<SfChart3D>
    <Chart3DSeriesCollection>
        <Chart3DSeries XName="Browser" YName="Users" DataSource="@StatisticsDetails">
        </Chart3DSeries>
    </Chart3DSeriesCollection>

    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
    </Chart3DPrimaryXAxis>

   <Chart3DTooltipSettings Enable="true" Duration="400" EnableAnimation="true" EnableMarker="false" FadeOutDuration="2000" Fill="gray" Format="${point.x} : ${point.y} : ${series.name}"
   Header="Browser" Opacity="0.8">
       <Chart3DTooltipTemplate>
           @{
               var data = context as Chart3DDataPointInfo;
               <div>@data. Y</div>
            }
       </Chart3DTooltipTemplate>
       <Chart3DTooltipBorder Color="red" Width="1"></Chart3DTooltipBorder>
       <Chart3DTooltipTextStyle FontFamily="Arial" Color="Gray" FontStyle="Bold" FontWeight="600" FontSize="14px" Opacity="0.9" TextOverflow="TextOverflow.Trim"></Chart3DTooltipTextStyle>
   </Chart3DTooltipSettings>
</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 = 37, Color = "red" },
        new Statistics { Browser = "UC Browser", Users = 17, Color = "blue" },
        new Statistics { Browser = "iPhone", Users = 19, Color = "green" },
        new Statistics { Browser = "Others", Users = 4, Color = "orange"  },
        new Statistics { Browser = "Opera", Users = 11, Color = "yellow" },
        new Statistics { Browser = "Android", Users = 12, Color = "pink" },
    };
}

Constructors

Chart3DTooltipSettings()

Declaration
public Chart3DTooltipSettings()

Properties

Chart3DTooltipTemplate

Gets or sets a template used to display tooltip of the 3D Chart.

Declaration
[Parameter]
public RenderFragment<object> Chart3DTooltipTemplate { get; set; }
Property Value
Type Description
RenderFragment<object>

The template content.
Remarks

The Chart3DTooltipTemplate used to define custom template for 3D Chart tooltip. Use the template’s context parameter to access a Chart3DDataPointInfo and its fields.

Examples
 @using Syncfusion.Blazor.Chart3D
 <SfChart3D>
    <Chart3DTooltipSettings>
        <Chart3DTooltipTemplate>
            @{
                var data = context as Chart3DDataPointInfo;
                <div>@data. Y</div>
             }
        </Chart3DTooltipTemplate>
    </Chart3DTooltipSettings>
</SfChart3D>

Duration

Gets or sets the duration for the tooltip animation in milliseconds.

Declaration
[Parameter]
public double Duration { get; set; }
Property Value
Type Description
double

The duration for the tooltip animation in milliseconds. The default value is 0.
Remarks

This property specifies the duration for the tooltip to animate from one point to the next when hovered on the point. It is not applicable when EnableAnimation is set to false.

Enable

Gets or sets a value indicating whether the tooltip is enabled.

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

true if the tooltip is enabled; otherwise, false. The default value is false.
Remarks

Use this property to enable or disable the tooltip in the 3D Chart.

EnableAnimation

Gets or sets a value indicating whether the tooltip animates while moving from one point to another.

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

true if tooltip animation is enabled; otherwise, false. The default value is true.
Remarks

Use this property to enable or disable the animation of the tooltip when moving from one point to another in the 3D Chart.

EnableMarker

Gets or sets a value indicating whether to display a marker in the tooltip.

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

true if the marker should be displayed in the tooltip; otherwise, false. The default value is true.
Remarks

If set to true, the marker shape assigned for the series associated with the hovered point is applied for the tooltip marker. If the marker is not enabled, a circle-shaped marker will be rendered by default.

EnableTextWrap

To wrap the tooltip long text based on available space. This is only application for chart tooltip.

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

FadeOutDuration

Gets or sets the duration for fading out the tooltip.

Declaration
[Parameter]
public double FadeOutDuration { get; set; }
Property Value
Type Description
double

The fade-out duration in milliseconds. The default value is 1000.
Remarks

This property determines the duration for the tooltip to fade out when the focus on the 3D Chart point is removed.

FadeOutMode

Fade out duration for the tooltip hide.

Declaration
[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
public Chart3DFadeOutMode FadeOutMode { get; set; }
Property Value
Type
Chart3DFadeOutMode

Fill

Gets or sets the fill color of the tooltip background.

Declaration
[Parameter]
public string Fill { get; set; }
Property Value
Type Description
string

A string representing the fill color of the tooltip background. The default fill color is determined by the 3D Chart's theme. By default, the theme is set to Bootstrap5 with a fill color of #212529.
Remarks

The fill color accepts values in hex and rgba as a valid CSS color string.

Format

Gets or sets the format for the tooltip content.

Declaration
[Parameter]
public string Format { get; set; }
Property Value
Type Description
string

A string that defines the format for the tooltip content. The default value is an empty string.
Remarks

The Format property allows customization of the tooltip content. By default, the tooltip displays information for the x and y values of a point. Additional information can be included in the tooltip using a format string.
For example, the format "$series.name: $point.x" displays the series name and x-value of the point in the tooltip.

Header

Gets or sets the header text for the tooltip.

Declaration
[Parameter]
public string Header { get; set; }
Property Value
Type Description
string

A string representing the tooltip header text. The default value is an empty string.
Remarks

This property can provide additional context or information related to the data point being displayed.

Opacity

Gets or sets the opacity of the tooltip.

Declaration
[Parameter]
public double Opacity { get; set; }
Property Value
Type Description
double

A double value specifying the opacity of the tooltip. It ranges from 0 to 1. The default value is 0.75.
Remarks

Use this property to control the transparency of the tooltip.

Implements