Class AccumulationChartTooltipSettings

Tooltip shows the information about the data points when users hover over data points on your chart.

Inheritance
System.Object
SfBaseComponent
AccumulationChartTooltipSettings
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class AccumulationChartTooltipSettings : SfBaseComponent

Constructors

AccumulationChartTooltipSettings()

Declaration
public AccumulationChartTooltipSettings()

Properties

Border

Gets or sets the options for customizing the borders of the tooltip in the SfAccumulationChart.

Declaration
public AccumulationChartTooltipBorder Border { get; set; }
Property Value
Type Description
AccumulationChartTooltipBorder

Accepts an instance of the AccumulationChartTooltipBorder class. The default value is a new instance of the AccumulationChartTooltipBorder class.
Remarks

Use this property to customize the tooltip borders in the SfAccumulationChart.

Examples
// This example shows how to set the border of a tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true">
        <AccumulationChartTooltipBorder Width="2" Color="#072086" />
    </AccumulationChartTooltipSettings>
</SfAccumulationChart>

Duration

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

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

The duration for the tooltip animation in milliseconds. The default value is 300.
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.

Examples
// This code snippet demonstrates how to set a custom animation duration for the tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Duration="500"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Enable

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

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

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

Use this property to control the visibility of tooltips within the accumulation chart. Enabling the tooltip provides additional information when hovering over the chart's elements.

Examples
// The following code snippet demonstrates how to enable the tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

EnableAnimation

Gets or sets a value indicating whether the tooltip will animate while moving from one point to another in the SfAccumulationChart.

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

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

Using this property EnableAnimation can be useful to eliminate animations for a simpler tooltip display.

Examples
// The following code snippet demonstrates how to disable tooltip animation in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" EnableAnimation="false"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

EnableHighlight

Gets or sets a value indicating whether to enable highlighting when hovered over the point element.

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

true if highlight options are enabled; otherwise, false. The default value is false.
Remarks

If set to true, when hovered over the point element, the respective series will be highlighted using the property EnableHighlight.

Examples
// The following code snippet demonstrates how to enable highlight in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" EnableHighlight="true"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

EnableMarker

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

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

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.

Examples
// The following code snippet demonstrates how to configure an Accumulation Chart to disable the tooltip marker:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" EnableMarker="false"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

EnableTextWrap

Gets or sets a value indicating whether to wrap the tooltip's long text based on the available space in the SfAccumulationChart.

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

true if the tooltip text should be wrapped; otherwise, false. The default is typically false unless specified.
Remarks

Using this EnableTextWrap property allows you to adjust the tooltip text to wrap automatically.

Examples
// This code snippet demonstrates how to enable text wrapping in the tooltip of an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" EnableTextWrap="true"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

FadeOutDuration

Gets or sets the duration for fading out the tooltip in the SfAccumulationChart.

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

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

This property specifies how long it takes for the tooltip to fade out after the user removes focus from the associated point in the chart.

Examples
// This code snippet demonstrates how to set a custom fade-out duration for the tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" FadeOutDuration="3000"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Fill

Gets or sets the fill color of the tooltip background in the SfAccumulationChart.

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

A string representing the fill color of the tooltip background. The default fill color is determined by the SfAccumulationChart theme. By default, the theme is set to Bootstrap4 with a fill color of #020202.
Remarks

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

Examples
// This example shows how to set a custom fill color for the tooltip of an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Fill="#d22253"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Format

Gets or sets the format for the tooltip content in the SfAccumulationChart.

Declaration
public string Format { get; set; }
Property Value
Type Description
System.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 "${point.x} : ${point.y}%" shows the point x value and a customized point y value in the tooltip.

Examples
// This example shows how to customize the tooltip format in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Format="${point.x} -> <b>${point.y} users</b>"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Header

Gets or sets the header text for the tooltip in the SfAccumulationChart.

Declaration
public string Header { get; set; }
Property Value
Type Description
System.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. It allows you to set a custom header for the Accumulation Chart tooltip.

Examples
// This example shows how to set a custom header for the tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Header="Sales"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Opacity

Gets or sets the opacity of the tooltip in the SfAccumulationChart.

Declaration
public double Opacity { get; set; }
Property Value
Type Description
System.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.

Examples
// This example shows how to set the opacity of a tooltip to 0.5 in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Opacity="0.5"></AccumulationChartTooltipSettings>
</SfAccumulationChart>

Shared

Gets or sets a value indicating whether a single tooltip will be displayed for every index in the SfAccumulationChart.

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

A boolean value indicating whether tooltips are shared. If set to true, one tooltip will be shared across all series for the same index. The default value is false.
Remarks

When shared tooltips are enabled, the header will default to displaying the x-value across series unless a custom header is provided.

Examples
// This example shows how to enable shared tooltips in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"/>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true" Shared="true"/>
</SfAccumulationChart>

Template

Gets or sets a custom template to format the tooltip content in the SfAccumulationChart.

Declaration
public RenderFragment<object> Template { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

A Microsoft.AspNetCore.Components.RenderFragment<> used to define the custom content template for the tooltip. Use ${x} and ${y} as placeholders to display the corresponding data point values.
Remarks

Use this property to customize the appearance and content of the tooltip by defining a custom template. Use the template’s context parameter to access a AccumulationChartDataPointInfo and its fields

Examples
// This example shows how to use a custom template for the tooltip in an Accumulation Chart:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true">
        <Template>
        @{
            var data = context as AccumulationChartDataPointInfo;
            <div>
                <table style="width:100%; border: 1px solid black;">
                    <tr><td bgcolor="#00FFFF">@data.X:</td><td bgcolor="#00FFFF">@data.Y</td></tr>
                </table>
            </div>
        }
        </Template>
    </AccumulationChartTooltipSettings>
</SfAccumulationChart>

TextStyle

Gets or sets an instance of AccumulationChartTooltipTextStyle which controls the customization of the text style of the tooltip in the SfAccumulationChart.

Declaration
public AccumulationChartTooltipTextStyle TextStyle { get; set; }
Property Value
Type Description
AccumulationChartTooltipTextStyle

An instance of AccumulationChartTooltipTextStyle used to customize the text style in the tooltip.
Remarks

Use this property to customize specific styling attributes such as color, font size, font weight, and font family for the text displayed in the tooltip.

Examples
// Example setting a custom font style for the tooltip text:
<SfAccumulationChart>
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
    <AccumulationChartTooltipSettings Enable="true">
        <AccumulationChartTooltipTextStyle Size="16px" FontFamily="Arial" FontWeight="600" FontStyle="bold" Color="blue" Opacity=0.5/>
    </AccumulationChartTooltipSettings>
</SfAccumulationChart>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder