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)
{
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.UpdateAsync(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.UpdateAsync(data, options);
}
}
Chart Types#
At this moment we are supporting four blazor chart types.
- Bar Chart
- Doughnut Chart
- Line Chart
- Pie Chart
INFO
We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
Charts Setup#
Refer starter template for charts setup.Bar Chart#
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color
<BarChart @ref="barChart" Width="700" Class="mb-4" />
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Random Data</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
@code {
private BarChart barChart;
private ChartData chartData;
private BarChartOptions chartOptions;
Random random = new Random();
protected override void OnInitialized()
{
chartData = new ChartData
{
Labels = new List<string> { "January", "February", "March", "April", "May", "June", "July" },
Datasets = new List<IChartDataset>()
};
chartData.Datasets.Add(GetRandomBarChartDataset());
chartData.Datasets.Add(GetRandomBarChartDataset());
chartData.Datasets.Add(GetRandomBarChartDataset());
chartOptions = new BarChartOptions
{
Responsive = true,
Interaction = new Interaction { Mode = InteractionMode.Index }
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await barChart.InitializeAsync(chartData, chartOptions);
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task AddDataAsync()
{
if (chartData is null || chartData.Datasets is null) return;
chartData.Datasets.Add(GetRandomBarChartDataset());
await barChart.UpdateAsync(chartData, chartOptions);
}
private async Task ShowHorizontalBarChartAsync()
{
chartOptions.IndexAxis = "y";
await barChart.UpdateAsync(chartData, chartOptions);
}
private async Task ShowVerticalBarChartAsync()
{
chartOptions.IndexAxis = "x";
await barChart.UpdateAsync(chartData, chartOptions);
}
private BarChartDataset GetRandomBarChartDataset()
{
// random color
var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
Console.WriteLine($"Bar Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}");
return new BarChartDataset()
{
Label = $"Bar chart dataset {chartData.Datasets.Count + 1}",
Data = new List<double> { random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120) },
BackgroundColor = new List<string> { c.ToRgbString() },
BorderColor = new List<string> { c.ToRgbString() },
BorderWidth = new List<double> { 0 },
};
}
}
Doughnut Chart#
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color
<DoughnutChart @ref="doughnutChart" Width="400" Class="mb-4" />
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Random Data</Button>
@code {
private DoughnutChart doughnutChart;
private ChartData chartData;
private DoughnutChartOptions chartOptions;
private List<string> backgroundColors;
Random random = new Random();
protected override void OnInitialized()
{
// prepare background colors
PrepareBackgroundColors();
chartData = new ChartData
{
Labels = new List<string> { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" },
Datasets = new List<IChartDataset>()
};
chartData.Datasets.Add(GetRandomDoughnutChartDataset());
chartOptions = new DoughnutChartOptions
{
Responsive = true,
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await doughnutChart.InitializeAsync(chartData, chartOptions);
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task AddDataAsync()
{
if (chartData is null || chartData.Datasets is null) return;
chartData.Datasets.Add(GetRandomDoughnutChartDataset());
await doughnutChart.UpdateAsync(chartData, chartOptions);
}
private DoughnutChartDataset GetRandomDoughnutChartDataset()
{
return new DoughnutChartDataset()
{
Data = new List<double>
{
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120)
},
BackgroundColor = new List<string>
{
backgroundColors[0],
backgroundColors[1],
backgroundColors[2],
backgroundColors[3],
backgroundColors[4],
backgroundColors[5]
},
};
}
private void PrepareBackgroundColors()
{
if (backgroundColors is null)
{
backgroundColors = new List<string>();
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
}
}
private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
}
Line Chart#
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color
<LineChart @ref="lineChart" Width="600" Class="mb-4" />
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Random Data</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalLineChartAsync()">Horizontal Line Chart</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalLineChartAsync()">Vertical Line Chart</Button>
@code {
private LineChart lineChart;
private ChartData chartData;
private LineChartOptions chartOptions;
Random random = new Random();
protected override void OnInitialized()
{
chartData = new ChartData
{
Labels = new List<string> { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" },
Datasets = new List<IChartDataset>()
};
chartData.Datasets.Add(GetRandomLineChartDataset());
chartData.Datasets.Add(GetRandomLineChartDataset());
chartData.Datasets.Add(GetRandomLineChartDataset());
chartOptions = new LineChartOptions
{
Responsive = true,
Interaction = new Interaction { Mode = InteractionMode.Index }
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await lineChart.UpdateAsync(chartData, chartOptions);
await base.OnAfterRenderAsync(firstRender);
}
private async Task AddDataAsync()
{
if (chartData is null || chartData.Datasets is null) return;
chartData.Datasets.Add(GetRandomLineChartDataset());
await lineChart.UpdateAsync(chartData, chartOptions);
}
private async Task ShowHorizontalLineChartAsync()
{
chartOptions.IndexAxis = "y";
await lineChart.UpdateAsync(chartData, chartOptions);
}
private async Task ShowVerticalLineChartAsync()
{
chartOptions.IndexAxis = "x";
await lineChart.UpdateAsync(chartData, chartOptions);
}
private LineChartDataset GetRandomLineChartDataset()
{
// random color
var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
Console.WriteLine($"Line Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}");
return new LineChartDataset()
{
Label = $"Line chart dataset {chartData.Datasets.Count + 1}",
Data = new List<double> { random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200) },
BackgroundColor = new List<string> { c.ToRgbString() },
BorderColor = new List<string> { c.ToRgbString() },
BorderWidth = new List<double> { 2 },
HoverBorderWidth = new List<double> { 4 },
PointBackgroundColor = new List<string> { c.ToRgbString() },
PointRadius = new List<int> { 0 }, // hide points
PointHoverRadius = new List<int> { 4 },
};
}
}
Pie Chart#
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color
<PieChart @ref="pieChart" Width="400" Class="mb-4" />
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Random Data</Button>
@code {
private PieChart pieChart;
private ChartData chartData;
private PieChartOptions chartOptions;
private List<string> backgroundColors;
Random random = new Random();
protected override void OnInitialized()
{
// prepare background colors
PrepareBackgroundColors();
chartData = new ChartData
{
Labels = new List<string> { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" },
Datasets = new List<IChartDataset>()
};
chartData.Datasets.Add(GetRandomPieChartDataset());
chartOptions = new PieChartOptions
{
Responsive = true,
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await pieChart.InitializeAsync(chartData, chartOptions);
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task AddDataAsync()
{
if (chartData is null || chartData.Datasets is null) return;
chartData.Datasets.Add(GetRandomPieChartDataset());
await pieChart.UpdateAsync(chartData, chartOptions);
}
private PieChartDataset GetRandomPieChartDataset()
{
return new PieChartDataset()
{
Data = new List<double>
{
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120),
random.Next(120)
},
BackgroundColor = new List<string>
{
backgroundColors[0],
backgroundColors[1],
backgroundColors[2],
backgroundColors[3],
backgroundColors[4],
backgroundColors[5]
},
};
}
private void PrepareBackgroundColors()
{
if (backgroundColors is null)
{
backgroundColors = new List<string>();
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
backgroundColors.Add(GetRandomColor().ToRgbString());
}
}
private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256));
}