Blazor Charts
Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.
Blazor Charts Example#
<BarChart @ref="barChart" Class="mb-4" />
<LineChart @ref="lineChart" />
@code {
private BarChart barChart = default!;
private LineChart lineChart = default!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await RenderManhattanAsync();
await RenderWormAsync();
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task RenderManhattanAsync()
{
var data = new ChartData
{
Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
Datasets = new List<IChartDataset>()
{
new BarChartDataset()
{
Label = "India",
Data = new List<double?>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
CategoryPercentage = 0.8,
BarPercentage = 1,
},
new BarChartDataset()
{
Label = "England",
Data = new List<double?>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
CategoryPercentage = 0.8,
BarPercentage = 1,
}
}
};
var options = new BarChartOptions();
options.Interaction.Mode = InteractionMode.Index;
options.Plugins.Title!.Text = "MANHATTAN";
options.Plugins.Title.Display = true;
options.Plugins.Title.Font = new ChartFont { Size = 20 };
options.Responsive = true;
options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };
await barChart.InitializeAsync(data, options);
}
private async Task RenderWormAsync()
{
var data = new ChartData
{
Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
Datasets = new List<IChartDataset>()
{
new LineChartDataset()
{
Label = "India",
Data = new List<double?>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
BackgroundColor = "rgb(88, 80, 141)",
BorderColor = "rgb(88, 80, 141)",
BorderWidth = 2,
HoverBorderWidth = 4,
//PointBackgroundColor = "rgb(88, 80, 141)",
//PointBorderColor = "rgb(88, 80, 141)",
//PointRadius = 0, // hide points
//PointHoverRadius = 4,
},
new LineChartDataset()
{
Label = "England",
Data = new List<double?>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
BackgroundColor = "rgb(255, 166, 0)",
BorderColor = "rgb(255, 166, 0)",
BorderWidth = 2,
HoverBorderWidth = 4,
// PointBackgroundColor = "rgb(255, 166, 0)",
// PointBorderColor = "rgb(255, 166, 0)",
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
}
}
};
var options = new LineChartOptions();
options.Interaction.Mode = InteractionMode.Index;
options.Plugins.Title!.Text = "WORM";
options.Plugins.Title.Display = true;
options.Plugins.Title.Font = new ChartFont { Size = 20 };
options.Responsive = true;
options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };
await lineChart.InitializeAsync(data, options);
}
}
Chart Types#
At this moment we are supporting seven blazor chart types.
INFO
We will add Bubble Chart and Mixed Chart support in the subsequent versions.
Charts Setup#
Refer to the getting started guide for setting up charts.
Blazor Bootstrap
- Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
- Code licensed Apache License 2.0.
- Currently v3.0.0.