Class ChartStripline

Provides options to customize the striplines of the axis.

Inheritance

System.Object

ChartSubComponent

ChartStripline

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartStripline : ChartSubComponent, ISubcomponentTracker, IChartElement

Remarks

This class provides various properties to define the appearance and behavior of striplines in a chart axis, such as color, size, and text alignment.

Constructors

ChartStripline()

Declaration

public ChartStripline()

Properties

Border

Gets or sets an instance of ChartStriplineBorder that defines the border of the strip line.

Declaration

public ChartStriplineBorder Border { get; set; }

Property Value

Type	Description
ChartStriplineBorder	The default value is a instance of ChartStriplineBorder.

Remarks

This property can be used to customize the color and width of the stripline border.

Examples

// This example demonstrates how to apply a custom border style to a stripline on the Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
                <ChartStriplineBorder Width="2" Color="blue"></ChartStriplineBorder>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Color

Gets or sets the color of the strip line.

Declaration

public string Color { get; set; }

Property Value

Type	Description
System.String	A string representing the color of the strip line. The default value is "#808080".

Remarks

Use valid hex or rgba CSS color strings for the color value.

Examples

// This example demonstrates how to set a color for a stripline on the Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Color="red">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

DashArray

Gets or sets the dash array of the strip line.

Declaration

public string DashArray { get; set; }

Property Value

Type	Description
System.String	A string representing the dash array of the strip line. The default value is null.

Remarks

The default value is null, indicating no specific dash array is set by default.

Examples

// This example demonstrates how to apply a dashed pattern to a stripline using the DashArray property.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" DashArray="10,1">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

End

Gets or sets the end value of the strip line.

Declaration

public object End { get; set; }

Property Value

Type	Description
System.Object	An object representing the end value of the strip line. The default value is null.

Remarks

This property type is an object; based on the axis type, the value will be assigned.

Examples

// This example demonstrates how to set the end position of a stripline using the End property.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

HorizontalAlignment

Defines the position of the strip line text horizontally.

Declaration

public Anchor HorizontalAlignment { get; set; }

Property Value

Type	Description
Anchor	One of the Anchor enumerations that specifies the strip line text position. The options include: Start: Places the text at the start of the strip line. Middle: Places the text at the middle of the strip line. End: Places the text at the end of the strip line. The default value is Anchor.Middle.

Remarks

This property determines where the strip line text will be horizontally positioned relative to the strip line.

Examples

// This example demonstrates how to align the stripline text at the start of the Y-axis using the HorizontalAlignment property.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" HorizontalAlignment="Anchor.Start" Text="Yaxis">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

IsRepeat

Gets or sets a value that specifies whether the strip line should be repeated.

Declaration

public bool IsRepeat { get; set; }

Property Value

Type	Description
System.Boolean	true if the strip line should be repeated; otherwise, false. The default value is false.

Remarks

When set to true, the strip line will be drawn repeatedly across the axis. If set to false, only a single strip line will be displayed.

Examples

// This example shows how to repeat the stripline along the Y-axis using the IsRepeat property.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" IsRepeat="true" >
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

IsSegmented

Gets or sets a value indicating whether the strip line is segmented.

Declaration

public bool IsSegmented { get; set; }

Property Value

Type	Description
System.Boolean	true if the strip line is segmented; otherwise, false. The default value is false.

Remarks

If set to true, stripline can be created in a specific region as a segment.

Examples

// This example demonstrates how to create a segmented stripline along the X-axis.
<SfChart>
    <ChartPrimaryXAxis IntervalType="IntervalType.Minutes" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)" End="new DateTime(2016, 06, 13, 08, 05, 00)" Color="#E0E0E0" IsSegmented="true" SegmentStart="1.8" SegmentAxisName="PrimaryYAxis" SegmentEnd="2.2" StartFromAxis="false" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StepLineData" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Opacity

Gets or sets the opacity of the strip line.

Declaration

public double Opacity { get; set; }

Property Value

Type	Description
System.Double	The double representing the opacity of the strip line. The default value is 1.

Remarks

It accepts values from 0 to 1.

Examples

// This example demonstrates how to set the opacity of the stripline along the Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Opacity="0.6">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

RepeatEvery

Gets or sets a value that specifies the interval based on the axis value for repeating stripline.

Declaration

public object RepeatEvery { get; set; }

Property Value

Type	Description
System.Object	An object representing the interval for repeating the stripline based on the axis value. The default value is null.

Remarks

Only applicable when IsRepeat is true and SizeType is not set to SizeType.Pixel.

Examples

// This example demonstrates how to render a chart with a primary X-axis that includes a stripline with a specified size type and repeat interval.
<SfChart>
    <ChartPrimaryXAxis IntervalType="IntervalType.Minutes" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)" End="new DateTime(2016, 06, 13, 08, 05, 00)" Color="#E0E0E0" IsSegmented="true" SegmentStart="1.8" SegmentAxisName="PrimaryYAxis" SegmentEnd="2.2" StartFromAxis="false" SizeType="SizeType.Minutes" RepeatEvery="10" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StepLineData" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

RepeatUntil

Gets or sets a value that specifies the limit based on the axis value for repeating stripline.

Declaration

public object RepeatUntil { get; set; }

Property Value

Type	Description
System.Object	An object representing the limit for repeating the stripline based on the axis value. The default value is null.

Remarks

Only applicable when IsRepeat is true, SizeType is not set to SizeType.Pixel, and RepeatEvery is not null.

Examples

// This example demonstrates how to render a chart with a primary X-axis that includes a stripline with repeat settings and a repeat until limit.
<SfChart>
    <ChartPrimaryXAxis IntervalType="IntervalType.Minutes" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)" End="new DateTime(2016, 06, 13, 08, 05, 00)" Color="#E0E0E0" IsSegmented="true" SegmentStart="1.8" SegmentAxisName="PrimaryYAxis" SegmentEnd="2.2" StartFromAxis="false" SizeType="SizeType.Minutes" RepeatEvery="10" IsRepeat="true" RepeatUntil="100" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StepLineData" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Rotation

Gets or sets the angle to which the strip line text gets rotated.

Declaration

public double Rotation { get; set; }

Property Value

Type	Description
System.Double	The rotation angle for the strip line text. The default value is double.NaN.

Remarks

This property allows customization of the text orientation on a strip line by specifying the rotation angle in degrees.

Examples

// This example demonstrates how to set a stripline on the Y-axis with a rotation of 45 degrees and a custom text "StripLine".
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Text="StripLine" Rotation="45">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

SegmentAxisName

Gets or sets the name of the axis associated with the segment of the strip line.

Declaration

public string SegmentAxisName { get; set; }

Property Value

Type	Description
System.String	A string representing the name of the axis which the strip line segment is associated. The default value is null.

Remarks

This property ensures proper alignment and positioning of the strip line with respect to the specified axis in the chart.

Examples

// Demonstrates the use of the SegmentAxisName property to render a stripline within a specified axis segment.
<SfChart>
    <ChartPrimaryXAxis LabelFormat="yyyy-MM-dd HH:mm:ss tt"
                       Interval="5"
                       IntervalType="IntervalType.Minutes"
                       ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)"
                            End="new DateTime(2016, 06, 13, 08, 05, 00)"
                            SegmentAxisName="PrimaryYAxis"
                            SegmentStart="1.8"
                            SegmentEnd="2.2" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Interval="0.5" Minimum="0" Maximum="3.5" />
    <ChartSeriesCollection>
        <ChartSeries Fill="blue"
                     DataSource="@StepLineData"
                     Width="2"
                     XName="X"
                     YName="Y"
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.StepLine" />
    </ChartSeriesCollection>
</SfChart>

SegmentEnd

Gets or sets the end value of the strip line segment.

Declaration

public object SegmentEnd { get; set; }

Property Value

Type	Description
System.Object	The end value of the strip line segment. The default value is null.

Remarks

This property determines where the segment concludes, providing control over the length and extent of the strip line.

Examples

// This example demonstrates how to define a stripline with specific segment boundaries using SegmentStart and SegmentEnd.
<SfChart>
    <ChartPrimaryXAxis LabelFormat="yyyy-MM-dd HH:mm:ss tt"
                       Interval="5"
                       IntervalType="IntervalType.Minutes"
                       ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)"
                            End="new DateTime(2016, 06, 13, 08, 05, 00)"
                            Color="#E0E0E0"
                            SegmentStart="1.8"
                            SegmentEnd="2.2" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Interval="0.5" Minimum="0" Maximum="3.5"></ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries Fill="blue"
                     DataSource="@StepLineData"
                     Width="2"
                     XName="X"
                     YName="Y"
                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.StepLine" />
    </ChartSeriesCollection>
</SfChart>

SegmentStart

Gets or sets the start value of the strip line segment.

Declaration

public object SegmentStart { get; set; }

Property Value

Type	Description
System.Object	The start value of the strip line segment. The default value is null.

Remarks

This property determines where the segment begins, providing control over the length and extent of the strip line.

Examples

// This example demonstrates how to define a stripline with specific segment boundaries using SegmentStart and SegmentEnd.
// The stripline spans from 08:00 to 08:05 on the X-axis and between 1.8 and 2.2 on the Y-axis, creating a rectangular band.
<SfChart>
    <ChartPrimaryXAxis LabelFormat="yyyy-MM-dd HH:mm:ss tt" Interval="5" IntervalType="IntervalType.Minutes" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)" End="new DateTime(2016, 06, 13, 08, 05, 00)" SegmentStart="1.8" SegmentEnd="2.2" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Interval="0.5" Minimum="0" Maximum="3.5"></ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries Fill="blue" DataSource="@StepLineData" Width="2" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StepLine">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Size

Gets or sets the size of the strip line based on the Start value and the axis value type.

Declaration

public double Size { get; set; }

Property Value

Type	Description
System.Double	The size of the strip line. This property determines the extent or length of the strip line on the chart. The default value is 0.

Remarks

For example, if StartFromAxis is set to true, and the Size is 4 on a Category axis, the strip line will be rendered over 4 category values from the origin.

Examples

// This example demonstrates how to use the StartFromAxis and Size properties of a stripline to span a fixed size from the axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline StartFromAxis="true" Size="30">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

SizeType

Gets or sets the size type of the strip line.

Declaration

public SizeType SizeType { get; set; }

Property Value

Type

Description

SizeType

One of the SizeType enumerations that specifies the unit of strip line size. The options include: Auto - Automatically determines the appropriate unit based on the data. Pixel - Measures the size in pixels. Years - Measures the size in years for date-time axis. Months - Measures the size in months for date-time axis. Days - Measures the size in days for date-time axis. Hours - Measures the size in hours for date-time axis. Minutes - Measures the size in minutes for date-time axis. Seconds - Measures the size in seconds for date-time axis. The default value is SizeType.Auto.

Remarks

This property allows for flexible sizing of strip lines in both time-based and pixel-based units.

Examples

// This example demonstrates how to render a chart with a primary X-axis that includes a stripline with a specified size type.
<SfChart>
    <ChartPrimaryXAxis IntervalType="IntervalType.Minutes" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
        <ChartStriplines>
            <ChartStripline Start="new DateTime(2016, 06, 13, 08, 00, 00)" End="new DateTime(2016, 06, 13, 08, 05, 00)" Color="#E0E0E0" IsSegmented="true" SegmentStart="1.8" SegmentAxisName="PrimaryYAxis" SegmentEnd="2.2" StartFromAxis="false" SizeType="SizeType.Minutes" />
        </ChartStriplines>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@StepLineData" XName="X" YName="Y" />
    </ChartSeriesCollection>
</SfChart>

Start

Gets or sets the start value of the strip line.

Declaration

public object Start { get; set; }

Property Value

Type	Description
System.Object	An object representing the start value of the strip line. The default value is null.

Remarks

This property determines where the strip line begins along the axis. Based on the axis type, the value will be assigned.

Examples

// This example demonstrates how to set a start value for a stripline on the primary Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" />
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

StartFromAxis

Gets or sets a value indicating whether the strip line should be rendered from the axis origin.

Declaration

public bool StartFromAxis { get; set; }

Property Value

Type	Description
System.Boolean	true if the strip line should be rendered from the axis origin; otherwise, false. The default value is false.

Remarks

This property allows you to control whether the strip line starts from the axis origin or from a specified value. If set to true, the stripline will be rendered from the axis origin, ignoring the Start value if provided.

Examples

// This example demonstrates how to render a stripline on the Y-axis starting directly from the axis line.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="18" End="25" StartFromAxis="true">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Text

Gets or sets the text for the strip line.

Declaration

public string Text { get; set; }

Property Value

Type	Description
System.String	A string representing the strip line text. The default value is an empty string.

Remarks

This property is used to assign a label or descriptive text to the strip line, which can enhance the interpretability of charts by providing contextual information directly on the visual elements. If the text is not set, the strip line will appear without a label, maintaining a cleaner visual appearance but potentially lacking descriptive context.

Examples

// This example demonstrates how to display a stripline with a text label on the Y-axis.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="18" End="25" Text="Strip-line">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

TextStyle

Gets or sets an instance of ChartStriplineTextStyle which defines the stripline text style.

Declaration

public ChartStriplineTextStyle TextStyle { get; set; }

Property Value

Type	Description
ChartStriplineTextStyle	The default value is an instance of ChartStriplineTextStyle.

Remarks

Use this property to define specific styling attributes such as color and font-properties for the text displayed within the strip line.

Examples

// This example demonstrates how to customize the text style of a stripline label.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="18" End="25" Text="Strip-Line">
                <ChartStriplineTextStyle Size="16px"></ChartStriplineTextStyle>
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

VerticalAlignment

Gets or sets a value that specifies the position of the strip line text vertically.

Declaration

public Anchor VerticalAlignment { get; set; }

Property Value

Type	Description
Anchor	One of the Anchor enumerations that specifies the position of the strip line text vertically. The options include: Start: Places the text at the start of the strip line. Middle: Places the text at the middle of the strip line. End: Places the text at the end of the strip line. The default value is Anchor.Middle

Remarks

This property determines where the strip line text will be vertically positioned relative to the strip line.

Examples

// This example demonstrates how to align the stripline text at the start of the Y-axis using the VerticalAlignment property.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" VerticalAlignment="Anchor.Start" Text="Yaxis">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Visible

Gets or sets a value indicating whether the strip line for the axis should be visible.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the strip line for the axis should be visible; otherwise, false. The default value is true.

Remarks

Use this property to toggle the strip line's visibility based on the specific design and functionality requirements of your application.

Examples

// This example demonstrates how to hide a stripline on the Y-axis by setting the Visible property to 'false'.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="20" End="25" Visible="false">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

ZIndex

Gets or sets the order of the strip line in relation to series elements.

Declaration

public ZIndex ZIndex { get; set; }

Property Value

Type	Description
ZIndex	One of the ZIndex enumerations that specify the order of the strip line. The options include: Behind: Places the strip line behind the series elements. Over: Places the strip line over the series elements. The default value is ZIndex.Behind.

Remarks

Adjusting the ZIndex is useful when you need to control the visual layering of the strip line relative to other elements in a chart, thereby ensuring the intended elements are visible.

Examples

// This example demonstrates how to render a stripline above the series elements by setting the ZIndex property to 'Over'.
<SfChart>
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="18" End="25" ZIndex="ZIndex.Over">
            </ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>