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;
private LineChart lineChart;
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.Size = 20;
options.Responsive = true;
options.Scales.X.Title.Text = "Overs";
options.Scales.X.Title.Display = true;
options.Scales.Y.Title.Text = "Runs";
options.Scales.Y.Title.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 = new List<string>{ "rgb(88, 80, 141)" },
BorderColor = new List<string>{ "rgb(88, 80, 141)" },
BorderWidth = new List<double>{2},
HoverBorderWidth = new List<double>{4},
PointBackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
PointBorderColor = new List<string>{ "rgb(88, 80, 141)" },
PointRadius = new List<int>{0}, // hide points
PointHoverRadius = new List<int>{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 = new List<string>{ "rgb(255, 166, 0)" },
BorderColor = new List<string>{ "rgb(255, 166, 0)" },
BorderWidth = new List<double>{2},
HoverBorderWidth = new List<double>{4},
PointBackgroundColor = new List<string>{ "rgb(255, 166, 0)" },
PointBorderColor = new List<string>{ "rgb(255, 166, 0)" },
PointRadius = new List<int>{0}, // hide points
PointHoverRadius = new List<int>{4},
}
}
};
var options = new LineChartOptions();
options.Interaction.Mode = InteractionMode.Index;
options.Plugins.Title.Text = "WORM";
options.Plugins.Title.Display = true;
options.Plugins.Title.Font.Size = 20;
options.Responsive = true;
options.Scales.X.Title.Text = "Overs";
options.Scales.X.Title.Display = true;
options.Scales.Y.Title.Text = "Runs";
options.Scales.Y.Title.Display = true;
await lineChart.InitializeAsync(data, options);
}
}
Chart Types#
At this moment we are supporting four blazor chart types.
INFO
We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
Charts Setup#
Refer to the getting started guide for setting up charts.