Bar Chart
Categorical data comparison with horizontal/vertical orientation.
Monthly admissions
Basic vertical bars
razor
<BarChart Categories="months"
Series="series"
Height="350px" />
@code {
private List<string> months = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
private List<ChartSeries> series = new()
{
new() { Name = "Admissions", Data = new() { 186, 215, 178, 243, 198, 231 } }
};
}Horizontal bars
Horizontal="true" rotates the axis
razor
<BarChart Categories="departments"
Series="series"
Horizontal="true"
Height="300px" />Multi-series
Grouped bars from two series
razor
<BarChart Categories="months" Series="series" Height="350px" />
@code {
private List<ChartSeries> series = new()
{
new() { Name = "Inpatient", Data = new() { 186, 215, 178, 243, 198, 231 } },
new() { Name = "Outpatient", Data = new() { 342, 378, 295, 410, 365, 398 } }
};
}With zoom
EnableZoom="true" adds range slider
razor
<BarChart Categories="months"
Series="series"
EnableZoom="true"
Height="400px" />Click events
OnDataClick handler for drill-down
razor
<BarChart Categories="months"
Series="series"
OnDataClick="HandleClick"
Height="350px" />
@code {
private void HandleClick(ChartClickEventArgs args)
{
Console.WriteLine($"Clicked: {args.Name} = {args.Value}");
}
}