Class ChartRow

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

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

Constructors

ChartRow()

Declaration
public ChartRow()

Properties

BorderColor

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

Declaration
[Parameter]
public string BorderColor { get; set; }
Property Value
Type Description
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
[Parameter]
public double BorderWidth { get; set; }
Property Value
Type Description
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
[Parameter]
public string Height { get; set; }
Property Value
Type Description
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>

Implements