Class ChartRow

Represents a row within a chart, providing customization options for its appearance and layout.

Inheritance

System.Object

ChartSubComponent

ChartRow

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartRow : ChartSubComponent, ISubcomponentTracker, IChartElement

Constructors

ChartRow()

Declaration

public ChartRow()

Properties

BorderColor

Gets or sets the color of the chart row border as a string.

Declaration

public string BorderColor { get; set; }

Property Value

Type	Description
System.String	A string representing the border color of the chart row. The default value is null.

Remarks

This property allows customization of the border color for the bottom line of the row, which divides the chart area vertically. Accepts values in hex or rgba as valid CSS color strings.

Examples

// The following code demonstrates setting a divided chart area with custom row borders color:
<SfChart>
    <ChartRows>
        <ChartRow Height="50%" BorderColor="red"/>
        <ChartRow Height="50%" BorderColor="blue" />
    </ChartRows>
    <ChartAxes>
        <ChartAxis RowIndex="1" Name="YAxis" OpposedPosition="true" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

BorderWidth

Gets or sets the width of the chart row border in pixels.

Declaration

public double BorderWidth { get; set; }

Property Value

Type	Description
System.Double	The double value representing the border width of the chart row. The default value is 1 pixel.

Remarks

This property allows customization of the border width for the bottom line of the row, which divides the chart area vertically.

Examples

// The following code demonstrates setting a divided chart area with custom row borders width:
<SfChart>
    <ChartRows>
        <ChartRow Height="50%" BorderColor="red" BorderWidth="2" />
        <ChartRow Height="50%" BorderColor="blue" BorderWidth="2" />
    </ChartRows>
    <ChartAxes>
        <ChartAxis RowIndex="1" Name="YAxis" OpposedPosition="true"/>
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>

Height

Gets or sets the height of the row as a string, accepting input in the form of '100px' or '100%'.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A string representing the height of the row. The default value is "100%".

Remarks

If specified as '100%', the row will render to the full height of its chart.

Examples

// The following code demonstrates setting a custom row in a chart:
<SfChart>
    <ChartRows>
        <ChartRow Height="50%" />
        <ChartRow Height="50%" />
    </ChartRows>
    <ChartAxes>
        <ChartAxis RowIndex="1" Name="YAxis" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
    </ChartSeriesCollection>
</SfChart>