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));
}