Class ChartStriplineTooltip

Represents the tooltip configuration settings for an axis stripline rendered within the SfChart component.

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

Use ChartStriplineTooltip to enable and customize the tooltip shown for a ChartStripline. When enabled, the tooltip is displayed when the user hovers, focuses, or taps the stripline region, providing contextual information about the stripline range or purpose.

The tooltip follows the chart’s active theme and aligns with the standard tooltip behavior used by chart series. You can configure visibility and appearance using the available properties on ChartStriplineTooltip (for example, enabling the tooltip and customizing its visuals as supported).

Examples
@using Syncfusion.Blazor.Charts 

<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Constructors

ChartStriplineTooltip()

Declaration
public ChartStriplineTooltip()

Properties

Content

Gets or sets the format string used to generate the stripline tooltip content in the SfChart component.

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

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

The format supports token placeholders that are replaced with corresponding values at runtime. Supported tokens:

  • ${stripline.text} – The stripline label.
  • ${stripline.start} – The stripline start value.
  • ${stripline.end} – The stripline end value.
  • ${axis.name} – The axis name.
  • ${stripline.segmentStart} – The stripline segment start value. (if applicable)
  • ${stripline.segmentEnd} – The stripline segment end value. (if applicable)
  • ${stripline.segmentAxisName} – The stripline segment axis name. (if applicable)
  • ${stripline.size} – The stripline size. (if applicable)
Examples
@using Syncfusion.Blazor.Charts 

<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red" Text="Campaign"> 
                <ChartStriplineTooltip Enable="true" 
                                       Header="Details" 
                                       Content="${stripline.text}<br/>From: ${stripline.start}<br/>To: ${stripline.end}<br/>Axis: ${axis.name}" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Enable

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

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

A bool indicating whether the stripline tooltip is enabled. The default value is false.
Remarks

When enabled, a tooltip is shown for the associated ChartStripline on hover, focus, or tap within the stripline area. Use this setting on ChartStriplineTooltip to turn stripline tooltips on or off per stripline.

Examples
<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Fill

Gets or sets the fill color of the stripline tooltip background.

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

A string representing the tooltip background color. The default value is string.Empty.
Remarks

Accepts any valid CSS color string (for example, hex, rgba, or named colors). When the value is empty, the tooltip uses the active chart theme’s default background color.

Examples
<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" Fill="rgba(0,0,0,0.85)" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Header

Gets or sets the header text for the stripline tooltip.

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

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

Use to provide a concise title or label for the stripline context shown in the tooltip. If no header is provided, the header section and its separator may be suppressed based on ShowHeaderLine.

Examples
<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" Header="Maintenance Window" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Opacity

Gets or sets the opacity of the stripline tooltip.

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

A double specifying the tooltip opacity in the range from 0 (transparent) to 1 (opaque). The default value is 0.75.
Remarks

Increase opacity to improve contrast over chart elements. Combine with Fill to achieve the desired visual clarity.

Examples
<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" Opacity="0.85" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

ShowHeaderLine

Gets or sets a value indicating whether the header separator line is displayed in the stripline tooltip.

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

A bool value. true to display the header line; otherwise, false. The default value is true.
Remarks

Shows a visual divider between the header and the tooltip content. The separator line is automatically hidden when Header is empty.

Examples
<SfChart> 
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"> 
        <ChartStriplines> 
            <ChartStripline Start="20" End="25" Color="red"> 
                <ChartStriplineTooltip Enable="true" Header="Promo" ShowHeaderLine="false" /> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
</SfChart>

Methods

OnInitialized()

Declaration
protected override void OnInitialized()
Overrides

OnParametersSet()

Declaration
protected override void OnParametersSet()
Overrides
Syncfusion.Blazor.Charts.ChartSubComponent.OnParametersSet()

Implements