Class ChartColumn

Provides options to customize the appearance of the chart column.

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

Constructors

ChartColumn()

Declaration
public ChartColumn()

Properties

BorderColor

Gets or sets the color of the chart column 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 column. The default value is null.
Remarks

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

Examples
// The following code demonstrates setting a divided chart area with custom column border colors:
<SfChart>
    <ChartColumns>
        <ChartColumn Width="50%" BorderColor="red" />
        <ChartColumn Width="50%" BorderColor="blue" />
    </ChartColumns>
    <ChartAxes>
        <ChartAxis ColumnIndex="1" Name="XAxis" OpposedPosition="true" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
    </ChartSeriesCollection>
</SfChart>

BorderWidth

Gets or sets the width of the chart column 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 column. The default value is 1 pixel.
Remarks

This property allows customization of the border width for the left line of the column, which divides the chart area horizontally.

Examples
// The following code demonstrates setting a divided chart area with custom column border width:
<SfChart>
    <ChartColumns>
        <ChartColumn Width="50%" BorderColor="red" BorderWidth="2" />
        <ChartColumn Width="50%" BorderColor="blue" BorderWidth="2" />
    </ChartColumns>
    <ChartAxes>
        <ChartAxis ColumnIndex="1" Name="XAxis" OpposedPosition="true" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
    </ChartSeriesCollection>
</SfChart>

Width

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

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

A string representing the width of the column. The default value is "100%".
Remarks

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

Examples
// The following code demonstrates setting a divided chart area with custom column:
<SfChart>
    <ChartColumns>
        <ChartColumn Width="50%" />
        <ChartColumn Width="50%" />
    </ChartColumns>
    <ChartAxes>
        <ChartAxis ColumnIndex="1" Name="XAxis" />
    </ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" />
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" XAxisName="XAxis" />
    </ChartSeriesCollection>
</SfChart>

Implements