Column Chart Component

The Column Chart component displays data in vertical bars. It supports customizable colors, labels, legends, tooltips, and axes with grid lines for easy data visualization.

Basic Column Chart

Column Chart with Custom Colors

Column Chart with Negative Values

Minimal Chart without Grid

Re-animate Charts

Component Usage


<BosuiColumnChart Data="chartData" Width="600" Height="400" />

<BosuiColumnChart 
    Data="salesData" 
    Width="600" 
    Height="400"
    XAxisTitle="Quarters"
    YAxisTitle="Sales ($)"
    LegendPosition="bottom"
    OnColumnClick="HandleColumnClick" />

Component Properties

Property	Type	Default	Description
Data	IEnumerable<ColumnChartDataItem>	null	Collection of data items to display in the chart.
Width	int	600	Width of the chart in pixels.
Height	int	400	Height of the chart in pixels.
ShowLabels	bool	true	Whether to show value labels on columns.
ShowGrid	bool	true	Whether to show grid lines.
ShowAxes	bool	true	Whether to show X and Y axes.
XAxisTitle	string	""	Title for the X-axis.
YAxisTitle	string	""	Title for the Y-axis.
ValueFormat	string	"N0"	Number format for values (e.g., "N0", "P1", "C").
AnimationDuration	int	1200	Duration of the animation in milliseconds.
StaggerDelay	int	100	Delay between each column animation in milliseconds.
OnColumnClick	EventCallback<ColumnChartDataItem>	-	Event triggered when a column is clicked.