Blazor Bar Chart

A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.

How it works #

In the following example, a categorical 12-color palette is used.
TIP
For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. 
<BarChart @ref="barChart" Width="500" Height="300" />

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
</div>

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount = 0;
    private int labelsCount = 0;
    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset
                && barChartDataset is not null
                && barChartDataset.Data is not null)
            {
                var count = barChartDataset.Data.Count;

                var newData = new List<double?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                barChartDataset.Data = newData;
                newDatasets.Add(barChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        if (datasetsCount >= 12)
            return;

        var chartDataset = GetRandomBarChartDataset();
        chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        if (labelsCount >= 12)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset)
                data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200)));
        }

        chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalBarChartAsync()
    {
        barChartOptions.IndexAxis = "y";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task ShowVerticalBarChartAsync()
    {
        barChartOptions.IndexAxis = "x";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomBarChartDataset());
        }

        return datasets;
    }

    private BarChartDataset GetRandomBarChartDataset()
    {
        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();

        datasetsCount += 1;

        return new BarChartDataset()
            {
                Label = $"Product {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = new List<string> { c.ToChartRgbString() },
                BorderColor = new List<string> { c.ToChartRgbString() },
                BorderWidth = new List<double> { 0 },
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return months[labelsCount - 1];
    }

    #endregion Data Preparation
}

Horizontal bar chart #

<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Data = new List<double?> { 55000, 15000, 18000, 21000 },
                BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
                BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new BarChartOptions();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };

        barChartOptions.Plugins.Legend.Display = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Stacked bar chart #

<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double?> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double?> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double?> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Grouped stacks #

Set the Stack property on each dataset to group bars into separate stacked series within the same chart. 
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        chartData = new ChartData
            {
                Labels = new List<string> { "Q1", "Q2", "Q3", "Q4" },
                Datasets = new List<IChartDataset>
                {
                    new BarChartDataset
                    {
                        Label = "North Budget",
                        Data = new List<double?> { 42, 47, 44, 50 },
                        BackgroundColor = new List<string> { colors[0] },
                        BorderColor = new List<string> { colors[0] },
                        BorderWidth = new List<double> { 0 },
                        Stack = "North"
                    },
                    new BarChartDataset
                    {
                        Label = "North Actual",
                        Data = new List<double?> { 39, 45, 48, 53 },
                        BackgroundColor = new List<string> { colors[1] },
                        BorderColor = new List<string> { colors[1] },
                        BorderWidth = new List<double> { 0 },
                        Stack = "North"
                    },
                    new BarChartDataset
                    {
                        Label = "South Budget",
                        Data = new List<double?> { 35, 38, 41, 46 },
                        BackgroundColor = new List<string> { colors[4] },
                        BorderColor = new List<string> { colors[4] },
                        BorderWidth = new List<double> { 0 },
                        Stack = "South"
                    },
                    new BarChartDataset
                    {
                        Label = "South Actual",
                        Data = new List<double?> { 33, 40, 43, 45 },
                        BackgroundColor = new List<string> { colors[5] },
                        BorderColor = new List<string> { colors[5] },
                        BorderWidth = new List<double> { 0 },
                        Stack = "South"
                    }
                }
            };

        barChartOptions = new BarChartOptions
            {
                Responsive = true,
                Interaction = new Interaction { Mode = InteractionMode.Index }
            };

        barChartOptions.Scales.X!.Stacked = true;
        barChartOptions.Scales.Y!.Stacked = true;
        barChartOptions.Scales.X.Title = new ChartAxesTitle { Text = "Quarter", Display = true };
        barChartOptions.Scales.Y.Title = new ChartAxesTitle { Text = "Revenue (in millions)", Display = true };
        barChartOptions.Plugins.Title!.Text = "Grouped stacked revenue by region";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }
}

Border radius #

Use BorderRadius on each dataset to soften bar edges and create rounded columns. 
<BarChart @ref="barChart" Width="500" Height="300" />

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
</div>

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount;
    private int labelsCount;
    private readonly string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private readonly Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData.Datasets is null || !chartData.Datasets.Any())
            return;

        foreach (var dataset in chartData.Datasets.OfType<BarChartDataset>())
            dataset.Data = Enumerable.Range(0, dataset.Data?.Count ?? 0)
                             .Select(_ => (double?)random.Next(-100, 100))
                             .ToList();

        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
            datasets.Add(GetRandomBarChartDataset());

        return datasets;
    }

    private BarChartDataset GetRandomBarChartDataset()
    {
        var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();

        datasetsCount += 1;

        return new BarChartDataset
            {
                Label = $"Product {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = new List<string> { color.ToChartRgbaString(0.5) },
                BorderColor = new List<string> { color.ToChartRgbString() },
                BorderWidth = new List<double> { 2 },
                BorderRadius = new List<double> { 10 }
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
            data.Add(random.Next(-100, 100));

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
            labels.Add(GetNextDataLabel());

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return months[labelsCount - 1];
    }
}

Locale #

By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). 
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double?> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double?> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double?> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new();
        barChartOptions.Locale = "de-DE";
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Data labels #

<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double?> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double?> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double?> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Animation delay #

Configure chart-level animation timing through ChartOptions.Animation to delay or pace the initial render. 
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        chartData = new ChartData
            {
                Labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" },
                Datasets = new List<IChartDataset>
                {
                    new BarChartDataset
                    {
                        Label = "Windows",
                        Data = new List<double?> { 28000, 8000, 2000, 17000 },
                        BackgroundColor = new List<string> { colors[3] },
                        BorderColor = new List<string> { colors[3] },
                        BorderWidth = new List<double> { 0 }
                    },
                    new BarChartDataset
                    {
                        Label = "macOS",
                        Data = new List<double?> { 8000, 10000, 14000, 8000 },
                        BackgroundColor = new List<string> { colors[4] },
                        BorderColor = new List<string> { colors[4] },
                        BorderWidth = new List<double> { 0 }
                    },
                    new BarChartDataset
                    {
                        Label = "Other",
                        Data = new List<double?> { 28000, 10000, 14000, 8000 },
                        BackgroundColor = new List<string> { colors[5] },
                        BorderColor = new List<string> { colors[5] },
                        BorderWidth = new List<double> { 0 }
                    }
                }
            };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";
        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;
        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
        barChartOptions.Animation = new ChartAnimation { Duration = 1000, Delay = 1500 };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }
}

Dataset animation #

You can configure animations globally on the chart options or per dataset to stagger how each series enters the chart. 
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        chartData = new ChartData
            {
                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
                Datasets = new List<IChartDataset>
                {
                    new BarChartDataset
                    {
                        Label = "Product A",
                        Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
                        BackgroundColor = new List<string> { colors[0].ToChartColor().ToChartRgbString() },
                        BorderColor = new List<string> { colors[0].ToChartColor().ToChartRgbString() },
                        BorderWidth = new List<double> { 0 },
                        Animation = new ChartAnimation { Delay = 0, Duration = 1200 }
                    },
                    new BarChartDataset
                    {
                        Label = "Product B",
                        Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
                        BackgroundColor = new List<string> { colors[1].ToChartColor().ToChartRgbString() },
                        BorderColor = new List<string> { colors[1].ToChartColor().ToChartRgbString() },
                        BorderWidth = new List<double> { 0 },
                        Animation = new ChartAnimation { Delay = 250, Duration = 1200 }
                    },
                    new BarChartDataset
                    {
                        Label = "Product C",
                        Data = new List<double?> { 18, 38, 50, 29, 66, 47 },
                        BackgroundColor = new List<string> { colors[2].ToChartColor().ToChartRgbString() },
                        BorderColor = new List<string> { colors[2].ToChartColor().ToChartRgbString() },
                        BorderWidth = new List<double> { 0 },
                        Animation = new ChartAnimation { Delay = 500, Duration = 1200 }
                    }
                }
            };

        barChartOptions = new BarChartOptions
            {
                Responsive = true,
                Animation = new ChartAnimation { Duration = 1200, Easing = "easeOutQuart" }
            };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }
}

Combo bar/line #

Mix BarChartDataset and LineChartDataset in the same chart to combine columns with a trend line. 
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToChartColor();
        var targetColor = ColorUtility.CategoricalTwelveColors[1].ToChartColor();

        chartData = new ChartData
            {
                Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
                Datasets = new List<IChartDataset>
                {
                    new BarChartDataset
                    {
                        Label = "Revenue",
                        Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
                        BackgroundColor = new List<string> { revenueColor.ToChartRgbaString() },
                        BorderColor = new List<string> { revenueColor.ToChartRgbString() },
                        BorderWidth = new List<double> { 0 }
                    },
                    new LineChartDataset
                    {
                        Label = "Target",
                        Data = new List<double?> { 50, 55, 60, 70, 72, 78 },
                        BackgroundColor = targetColor.ToChartRgbaString(),
                        BorderColor = targetColor.ToChartRgbString(),
                        PointRadius = new List<double> { 4 },
                        PointHoverRadius = new List<double> { 6 }
                    }
                }
            };

        barChartOptions = new BarChartOptions
            {
                Responsive = true,
                Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false }
            };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }
}

Click event #

Set the OnClick callback to react when a chart data item is selected. The callback receives ChartClickEventArgs with the dataset index and label, data-item index and label, and raw value. 
<BarChart @ref="barChart" Width="600" OnClick="HandleClickAsync" />

@if (selectedChartItem is not null)
{
    <p class="mt-3 mb-0">
        Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex),
        @FormatLabel(selectedChartItem) (index @selectedChartItem.Index),
        value @FormatValue(selectedChartItem)
    </p>
}

@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;
    private ChartClickEventArgs? selectedChartItem;

    protected override void OnInitialized()
    {
        chartData = new ChartData
        {
            Labels = new List<string> { "January", "February", "March" },
            Datasets = new List<IChartDataset>
            {
                new BarChartDataset
                {
                    Label = "Orders",
                    Data = new List<double?> { 45, 68, 54 },
                    BackgroundColor = new List<string> { "#36A2EB" },
                },
            },
        };

        barChartOptions = new BarChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await barChart.InitializeAsync(chartData, barChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }

    private Task HandleClickAsync(ChartClickEventArgs eventArgs)
    {
        selectedChartItem = eventArgs;
        return Task.CompletedTask;
    }

    private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}";

    private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null";
}

Chart Components — Dedicated Library

Chart components have been moved to the dedicated BlazorExpress.ChartJS library to support independent feature additions and easier maintenance. Complete the following steps in the Blazor project that renders the charts.

  1. Install the package used by these demos: 
    dotnet add package BlazorExpress.ChartJS --version 1.2.4
  2. Import the component namespace in _Imports.razor: 
    @using BlazorExpress.ChartJS
  3. Load the browser scripts in this order from the host page, after the Blazor framework script. The data-labels plugin is needed only when a chart uses data labels. 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>

See the BlazorExpress.ChartJS website and GitHub repository for current package documentation. We also recommend checking the original BlazorExpress.ChartJS demos when adapting advanced examples.

For a complete charts setup walkthrough, see the Getting Started — Charts Setup section.
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap 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 v4.0.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Other Libraries

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.