Generic Chart Component

The Generic Chart component allows you to create multi-series charts with different chart types (Column, Line, Pie) using any data structure. It supports nested series and flexible data mapping through the BosuiChartSeries and BosuiChartData components.

Mixed Chart Types (Columns + Line)

No data available

Multiple Line Series

No data available

Grouped Column Chart

No data available

Pie Chart

No data available

Multiple Data Sources in Single Series

No data available

Chart with Custom Colors per Data Point

No data available

Interactive Controls

Component Usage


<BosuiChart Width="800" Height="400" XAxisTitle="Month" YAxisTitle="Sales">
    <BosuiChartSeries ChartType="ChartType.Column" Name="Series 1" Color="#0366d6">
        <BosuiChartData Data="myData" TItem="MyDataClass" Key="XField" Value="YField" />
    </BosuiChartSeries>
    <BosuiChartSeries ChartType="ChartType.Line" Name="Series 2" Color="#28a745">
        <BosuiChartData Data="otherData" TItem="OtherDataClass" Key="XField" Value="YField" />
    </BosuiChartSeries>
</BosuiChart>

Component Properties

BosuiChart Properties

Property	Type	Default	Description
Width	int	600	Width of the chart in pixels
Height	int	400	Height of the chart in pixels
ShowGrid	bool	true	Whether to show grid lines
ShowAxes	bool	true	Whether to show X and Y axes
ShowLegend	bool	true	Whether to show the legend
LegendPosition	string	"top"	Legend position: "top", "bottom", "left", "right"
XAxisTitle	string	""	Title for the X-axis
YAxisTitle	string	""	Title for the Y-axis
ValueFormat	string	"N0"	Number format for values

BosuiChartSeries Properties

Property	Type	Default	Description
ChartType	ChartType	Column	Type of chart: Column, Line, Stack, Pie
Name	string	""	Name of the series for legend
Color	string	""	Color for the series (auto-assigned if empty)
ShowPoints	bool	true	Show points on line charts
ShowArea	bool	false	Show area fill under line charts
LineStrokeWidth	double	2.0	Width of line strokes

BosuiChartData Properties

Property	Type	Default	Description
Data	IEnumerable<TItem>	null	The data collection to chart
TItem	Type	-	Generic type of the data items
Key	string	""	Property name for X-axis values
Value	string	""	Property name for Y-axis values
Color	string	null	Property name for custom colors
Label	string	null	Property name for custom labels