Class ChartColumn

Provides options to customize the appearance of the chart column.

Inheritance

System.Object

ChartSubComponent

ChartColumn

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartColumn : ChartSubComponent, ISubcomponentTracker, IChartElement

Constructors

ChartColumn()

Declaration

public ChartColumn()

Properties

BorderColor

Gets or sets the color of the chart column 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 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

public double BorderWidth { get; set; }

Property Value

Type	Description
System.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

public string Width { get; set; }

Property Value

Type	Description
System.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>